/*-----------------------------------------------------------------------------------------------

	Craig Baldwin dot com cascading style sheet
	All code copyright Craig Baldwin 2010, except for Masonry, Nivo Slider and sexyCycle code	
 
-------------------------------------------------------------------------------------------------
	Global Styles
-----------------------------------------------------------------------------------------------*/

* {
	margin: 0px;
	padding: 0px; }

	body { background: url(images/background_dark.jpg) repeat top left #262626; }

ul {
	list-style: none;
	color: #555; }

	li { list-style: none; }

img { border: 0px; }

.red { color: #a11616; }

.shadow { 
		box-shadow: 0px 0px 10px #999;  
		-moz-box-shadow: 0px 0px 10px #999;  
		-webkit-box-shadow: 0px 0px 10px #999; }

/*-----------------------------------------------------------------------------------------------
	Typography
-----------------------------------------------------------------------------------------------*/

p, a, li {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.7em;
	color: #262626; }
	
	a:hover { color: #000; }		

@font-face {
	font-family: 'MuseoSans500';
	src: url('http://craigbaldwin.com/fonts/MuseoSans_500.eot');
	src: local('Museo Sans 500'), 
	local('MuseoSans-500'), 
	url('http://craigbaldwin.com/fonts/MuseoSans_500.woff') format('woff'), 
	url('http://craigbaldwin.com/fonts/MuseoSans_500.otf') format('opentype'), 
	url('http://craigbaldwin.com/fonts/MuseoSans_500.svg#MuseoSans-500') format('svg'); }

h1, h1 a, h2, h2 a, h3, h3 a, h4, h5 {
	font-family: 'MuseoSans500', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, Verdana, sans-serif;
	z-index: 1;
	font-weight: 200;
	text-shadow: 0px 1px 0px #fff; }

	h1, h1 a {
		font-size: 32px;
		line-height: 1.4em;
		margin: 10px 0 10px 0;
		text-decoration: none; }
	
		h1 a:hover { color: #555; }

	h2, h2 a {
		line-height: 1.2em;
		margin-bottom: 15px; }
		
		h2 { font-size: 24px; }
		
			h2 a {
				text-decoration: none;
				font-size: 24px; }
				
				h2 a:hover { text-decoration: underline; }
	
	h3 {
		font-size: 18px;
		line-height: 1.2em;	
		margin: 0 0 10px 0; }
	
/*-----------------------------------------------------------------------------------------------
  Top
-----------------------------------------------------------------------------------------------*/

#logo {
	background: url(images/background_nav.png) repeat-x top left;
	display: block;
	height: 200px;	
	position: absolute;
	top: 0px;
	width: 100%;	
	z-index: 1; }
	
	#logo_box {
		height: 200px;
		margin: 0 auto; 
		position: relative;
		top: 0px;
		width: 900px; }
			
		#logo_logo {
			background: url(images/home/logo.png) no-repeat top left;	
			display: block;
			height: 143px;
			left: 258px;
			position: absolute;
			top: 28px;
			width: 401px;
			z-index: 2; }
			
			#logo_logo a {
				display: block;
				height: 143px;
				width: 401px; }

/*-----------------------------------------------------------------------------------------------
	Navigation Bar
-----------------------------------------------------------------------------------------------*/

#navbar {
	height: 80px;
	position: relative;
	top: 185px;	
	z-index: 2; }
	
		#nav {
			position: relative;
			height: 46px;
			top: 1px; }
		
			#nav ul { width: 600px; }
		
				#nav li { 
					display: inline;
					padding: 0px 18px 0px 0px; }
		
			#nav a {
				position: relative;
				top: 14px;
				color: #000;
				text-decoration: none; }
			
				#nav a:hover { text-decoration: underline; }	
				
/*-----------------------------------------------------------------------------------------------
	Secondary Navigation Bar
-----------------------------------------------------------------------------------------------*/

#nav_second {
	position: relative;
	top: 3px;
	z-index: 3; }
	
	.nav_second {
		position: relative;
		top: -3px;
		z-index: 3; }
	
	#nav_second ul li, .nav_second ul li { 
		display: inline;
		padding: 0px 18px 0px 0px; }
	
	#nav_second ul li a, .nav_second ul li a {
		color: #000;
		text-decoration: none; }
		
		#nav_second ul li a:hover, .nav_second ul li a:hover {
			text-decoration: underline; }
				
/*-----------------------------------------------------------------------------------------------
	Content
-----------------------------------------------------------------------------------------------*/

#white {
	background: url(images/background.jpg) repeat top center #ebebeb;
	padding-bottom: 5px; }

	.centre {
		margin: 0 auto;
		width: 900px; }

		/* Contains #text and #sidebar */
		#main {
			margin-bottom: 20px;
			margin-top: 190px;
			position: relative;
			width: 900px;
			top: 0px; }
		
			#text, .text {
				position: relative;
				width: 900px;
				margin: 0px 20px 0px 0px;
				z-index: 6; }
				
				#text p, .text p { width: 600px; }
				
			.divide {
				background: #262626;
				border-bottom: 1px #fff solid;
				border-right: 1px #fff solid;
				clear: both;
				display: block;
				height: 2px;
				margin: 25px 0 10px 0;
				width: 900px; }
				
				.three_columns {
					float: left;
					width: 293px; }
					
					.three_columns p { width: 293px; }
					
				.two_columns {
					float: left;
					width: 440px; }
					
					.two_columns p { width: 445px; }
					
				.clear { clear: both; }

/*-----------------------------------------------------------------------------------------------
	Sidebar
-----------------------------------------------------------------------------------------------*/

#sidebar_column, .sidebar_column {
	position: absolute; 
	top: 40px;
	left: 630px;
	float: right;
	z-index: 7; }
	
	.sidebar {
		background: url(images/background_dark.jpg) repeat bottom right #262626;
		position: relative;
		margin-top: 20px;
		float: right;
		width: 250px;
		padding: 10px 5px 10px 15px;
		box-shadow: 0px 0px 10px #999;  
		-moz-box-shadow: 0px 0px 10px #999;  
		-webkit-box-shadow: 0px 0px 10px #999; }
	
		.sidebar img { border: 0px; }
		
		.sidebar h2, .sidebar h2 a, .sidebar p { color: #ebebeb; }
	
			.sidebar h2, .sidebar h2 a {
				background: none;
				padding: 0px;
				margin: 0 0 3px 0;
				text-decoration: none;
				text-shadow: 0px 0px 0px #fff;}
				
				.sidebar h2 a:hover { color: #fff; }
				
	.sidebar_text {
		position: relative;
		margin-top: 82px;
		padding: 0 20px 0 20px; }
		
	.sidebar h2 { text-shadow: 0px 0px 0px #262626; }

/*-----------------------------------------------------------------------------------------------
	Footer
-----------------------------------------------------------------------------------------------*/

#footerbar {
	position: relative;
	width: 100%;
	border-top: 1px solid #ebebeb; }
	
	#footer { padding: 10px 0px 10px 0px; }
	
		#footer p {
			color: #ebebeb;
			font-size: 11px; }
		
		#footer a {
			color: #ebebeb;
			font-size: 11px; }
		
			#footer a:hover { color: #fff; }

/*-----------------------------------------------------------------------------------------------
	Homepage
-----------------------------------------------------------------------------------------------*/

#home_box {
	display: block;
	height: 210px;
	margin-bottom: 10px;
	position: relative; }
	
	.home_box_one, .home_box_two, .home_box_three {
		background: none;
		display: block;
		float: left;
		height: 200px;
		width: 290px; }
		
		.home_box_one p, .home_box_two p, .home_box_three p { padding-top: 5px; }
	
		.home_box_one { margin: 15px 0 0 0; }
			
		.home_box_two { margin: 15px 0 0 15px; }
		
		.home_box_three { margin: 15px 0 0 15px; }	
		
/*-----------------------------------------------------------------------------------------------
	Portfolio
-----------------------------------------------------------------------------------------------*/

#download {
	background: url(http://craigbaldwin.com/images/mini/download.png) top left no-repeat;
	display: block;
	height: 112px;
	width: 290px; }
	
	#download:hover {
		background: url(http://craigbaldwin.com/images/mini/download.png) bottom left no-repeat;
		display: block;
		height: 112px;
		width: 290px; }	
				
/*-----------------------------------------------------------------------------------------------
	Nivo Slider styling
		Used for Homepage slider
			Source: http://nivo.dev7studios.com/
-----------------------------------------------------------------------------------------------*/

.nivoSlider { position: relative; }

	.nivoSlider img {
		position: absolute;
		top: 0px;
		left: 0px; }

	.nivoSlider a.nivo-imageLink {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		border: 0;
		padding: 0;
		margin: 0;
		z-index: 60;
		display: none; }

.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%; }

.nivo-caption {
	position: absolute;
	left: 0px;
	bottom: 0px;
	background: #000;
	color: #fff;
	opacity: 0.8; /* Overridden by captionOpacity setting */
	width: 100%;
	z-index: 89; }
	
	.nivo-caption p {
		padding: 5px;
		margin: 0; }

.nivo-directionNav a {
	border: 0;
	cursor: pointer;
	display: block;	
	height: 30px;	
	position: absolute;
	text-indent: -9999px;
	top: 235px;
	width: 30px;
	z-index: 99; }
	
.nivo-prevNav {	
	background: url(http://craigbaldwin.com/images/arrows.png) no-repeat top left;
	left: 10px; }

.nivo-nextNav {	
	background: url(http://craigbaldwin.com/images/arrows.png) no-repeat bottom right;
	right: 10px; }

.nivo-controlNav a {
	position: relative;
	z-index: 99;
	cursor: pointer; }
	
	.nivo-controlNav a.active {	font-weight: bold; }
	
#slider_shadow {
	background: url(http://craigbaldwin.com/images/shadow.png) no-repeat top center;
	display: block;
	height: 500px;
	left: -30px;
	position: relative;
	width: 960px;
	z-index: 1; }
		
	#slider {
		background: url(images/spinner.gif) no-repeat 50% 50%;
		position: relative;
		left: 30px;
		margin: 25px 0 15px 0;
		width: 900px;
		z-index: 2; }
		
		#slider img {
			display: none;
			position: absolute;
			top: 0px;
			left: 0px; }
			
		#slider a {	
			border: 0;
			display: block; }
				
/*-----------------------------------------------------------------------------------------------
	Masonry jQuery styling
		Used for Portfolio thumbnail grids
			Source: http://desandro.com/resources/jquery-masonry
-----------------------------------------------------------------------------------------------*/

#grid {
	position: relative;
	width: 915px; }

	.wrap { padding-top: 10px; }
	
		.wrap:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;	}
	
		.box {
			margin: 0 15px 15px 0;
			padding: 0px;
			font-size: 11px;
			float: left; }
			
			.box p { 
				font-size: 11px;
				line-height: 1.5em; }
			
				.box p a { color: #000; }
		
		.col { 
			background: #262626;
			width: 290px; }
			
			.col:hover { background: #a11616; }
		
			.col img { max-width: 290px; }
			
			.col p {
				color: #ebebeb;
				font-size: 12px;
				padding: 15px 0 20px 15px; }
			
		.col2 { width: 290px; }
		
			.col2 img { max-width: 290px; }
			
/*-----------------------------------------------------------------------------------------------
	sexyCycle 
		Used on most Portfolio pages
			http://suprb.com/apps/sexyCycle/
-----------------------------------------------------------------------------------------------*/

.sexyCycle { 
	overflow: hidden;
	position: relative; }
	
	.sexyCycle-wrap { 
		position: relative; 
		width: 99999px; }
	
		.sexyCycle-content { 
			cursor: pointer;
			overflow: hidden;
			position: absolute;
			width: 99999px;   }
			
			ul.sexyCycle-content  { 
				cursor: pointer;
				list-style: none; 
				margin: 0; 
				padding: 0; 
				position: absolute;
				width: 99999999px; }
				
				li.sexyCycle-content  { 
					cursor: pointer;
					margin: 0; 
					padding: 0; }
					
	.controllers {
		color: #959595;
		cursor: pointer;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
		font-size: 12px;
		line-height: 1.8em;
		text-decoration: none; }