/*NOTES ---------------------------------

Template file for Hazard Media Website

UPDATE INFO ------------------------

Revision number: 2.0.0
Last updated: 12.03.2010
Last update made by: Michael Andrew (michael@hazardmedia.co.nz)

CONTENTS ---------------------------

=1: Reset all elements to a common value
=2: Default classes
=3: Accessibility
=4: Default Styles
=4a: colours, sizes, etc
=5: Layout Styles
=6: generic styles
=6a: sIFR
=7: Page related styles
=7a: about page

*/

/* -- =1: reset all elements to a common value ----------------------------------------------------- */
body {color:#000;background:#FFF; word-wrap: break-word;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"'";}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;} /* a negative value for line-height here causes the css to become invalid, however this is necessary to prevent display issues in some browsers */
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}



/* -- =2: default classes -------------------------------------------------------------------------- */
.center { text-align: center; }
.right { text-align: right !important; }
.left { text-align: left !important; }
.small { font-size: 0.9em; }
.smaller { font-size: 0.8em !important; }
.bold { font-weight: bold !important; }
.floatRight { float: right; margin: 10px 0px 10px 10px; clear: both;}
.floatLeft { float: left; margin: 0px 10px 10px 0px; clear: both;}
.clear { clear: both; }


/* -- =3: accessibility ---------------------------------------------------------------------------- */
.aural {
	position: absolute;
	left: -9999px;
	font-size: small;
}

.hide { display: none; }


/* -- =4: Default Styles --------------------------------------------------------------------------- */
/* =4a: colours, sizes, etc of elements */
body {
	font: 13px helvetica, arial verdana, sans-serif; /* set font size to 10px (a nice round number) - 1.4 line height */
	background: #999 url("../_img/bg-bottom-normal.gif");
	background-attachment: fixed;
	line-height: 17px;
}

	body.bodyAlt{
		background: #333 url("../_img/bg-bottom-alt.gif");
	}

h1, h2, h3, h4, blockquote {
	color: #333;
}

body.bodyAlt h1, body.bodyAlt h2, body.bodyAlt h3, body.bodyAlt h4, body.bodyAlt blockquote,  body.bodyAlt p{
	color: #fff;
}

h1, h2, h3, h4, #nav a{
	text-transform: uppercase;
}

h1 {
	letter-spacing: -3px;
	font-size: 92px;
	margin-top: 17px;
	font-family: impact, arial, helvetica, sans-serif;
 }

h2 {
	margin-top: 17px;
	font-size: 44px;
	font-family: impact, arial, helvetica, sans-serif;
	
	
}

h3 { 

	font-size: 28px; 
	font-family: impact, arial, helvetica, sans-serif;
	

}

p,blockquote {
	margin-top: 17px;
}

blockquote {
	font-family: impact, arial, helvetica, sans-serif;
	font-size: 18px;
}

h4 { font-size: 14px; font-weight: bold; }

cite {
	font-style: italic;
}

a { color: #333; font-weight: bold; }

a:visited { color: #999; }

a:hover, a:active { color: #666; text-decoration: none; }

strong { font-weight: bold; }

em{ font-style:italic;}

/* -- =5: Layout Styles ---------------------------------------------------------------------------- */

.ie6-upgradebar {
     display: none;
}

#container {
	margin: 0 auto;
	width: 16880px;
	height: 800px;
}

body {height:100%; overflow-y:hidden, margin:0}
html {height:100%; overflow-y:hidden}


	#header{
		width: 100%;
		position: fixed;
		top:0px;
		left: 0px;
		height: 50px;
		background-attachment: fixed;
	}
		.headerNormal{
			background: #999 url("../_img/bg-top-normal.gif");
		}
	
		.headerAlt{
			background: #000 url("../_img/bg-top-alt.gif");
		}
		#logo, #logoAlt{
		
			width: 133px;
			height: 78px;
			margin-left: 45px;
			margin-top: 10px;
			float: left;
			position: relative;
			z-index: 2;
		}
		
		#logoAlt{
			display: none;
		}
		
		#logo:hover, #logoAlt:hover{
			filter:alpha(opacity=90);
			-moz-opacity:0.9;
			-khtml-opacity: 0.9;
			opacity: 0.9;
		}
	
	#pageTitle{
		margin: 15px 0px 0px 0px;
		background: #fff;
		width: 50%;
		height: 72px;
		overflow:hidden;
		float: left;
		/*position: absolute;*/
		/*right: 409px;*/
	}
	
		#pageTitle p{
			color: #333333;
			font-size: 1.6em;
			line-height: 1.0em;
			margin-left: 5px;
			display: block;
			position: relative;
			font-weight: bold;
			text-transform:uppercase;
			margin-top: 3px;
			width: 25%;
		}
	
	#navHeader{
		width: 122px;
		height: 106px;
		position: absolute;
		right: 287px;
	}
	
	#nav {
		position: absolute;
		right: 20px;
		z-index: 2;
	}
	
	
		#nav ul{
			margin-top: -8px;
			position: relative;
		}
		
		#nav li{
			height: 45px;
			border-left: 1px #868686 solid;
			float: left;
			display: inline-block;
		}
		
		#nav li:first-child{
			border: none;
		}
		
		#nav a{	
			
			font-family: impact, arial, helvetica, sans-serif;
			font-weight: normal;
			line-height: 50px;
			font-size: 24px;
			padding: 5px 25px 15px 25px;
			text-decoration: none;
		}
		
		#nav a .cufon{
			padding-top: 13px;
		}
		
		.navNormal a{
			color: #fff;
		}
		
		.navAlt a, .contentItemAlt a{
			color: #9900FF;
		}
		
		.navNormal a:hover, .navNormal a.selected{
			color: #666;
		}
		
		.navAlt a:hover, .navAlt a.selected, .contentItemAlt a:hover{
			color: #660099;
		}
		
		.navNormal a.disabled{
			color: #adacac;
			cursor: default;
		}
		
		.navAlt a.disabled{
			color: #333;
			cursor: default;
		}
	
	#contentContainer{
		height:659px;
	}
	.contentContainerNormal{
		background: #fff url("../_img/bg-main-normal.jpg") repeat-x 0px 0px;
	}
	.contentContainerAlt{
		background: #333 url("../_img/bg-main-alt.png") repeat-x 0px 50px;
	}
	
		#pull-me-btn-normal, #pull-me-btn-alt{
			width: 206px;
			height: 193px;
			top: 50px;
			left: 750px;
			position: absolute;
			cursor: pointer;
			z-index: 1;
		}
		
		#pull-me-btn-normal:hover{
			filter:alpha(opacity=80);
			-moz-opacity:0.8;
			-khtml-opacity: 0.8;
			opacity: 0.8;
		}
		
		#pull-me-btn-alt:hover{
			filter:alpha(opacity=40);
			-moz-opacity:0.4;
			-khtml-opacity: 0.4;
			opacity: 0.4;
		}
		
		#pull-me-btn-alt{
			display: none;
		}
	
		#starbust-alt{
			display:none;
			position: absolute;
			width: 381px;
			height: 394px;
			top: 120px;
			left: 20px;
			background: url('../_img/starburst-alt.png') no-repeat;
			filter:alpha(opacity=30);
			-moz-opacity:0.3;
			-khtml-opacity: 0.3;
			opacity: 0.3;
		}
		
		#glow-alt{
			display: none;
			position: absolute;
			width: 1080px;
			height: 473px;
			left: 310px;
			top: 50px;
			background: url('../_img/pink-glow-alt.png') no-repeat;
			filter:alpha(opacity=30);
			-moz-opacity:0.3;
			-khtml-opacity: 0.3;
			opacity: 0.3;
		}
	
		#monitor {
			position: absolute;
			left: 50px;
			top: 180px;
			width: 300px;
			height: 320px;
			
			text-align: center;
		}
		
		.monitor-normal{
			border: 4px #ccc dotted;
		}
		
		.monitor-alt{
			border: 4px #FF00FF dotted;
		}
		
			#download-cv{
				width: 200px;
				height: 125px;
				position: absolute;
				left: -50px;
				top: -40px;
				background-image: url("../_img/download-cv-label.png");
			}
			
			.download-cv-alt{
				background-position: 0px -125px;
			}
			
			 
			
			#download-cv:hover, #download-cv-alt:hover{
				filter:alpha(opacity=80);
				-moz-opacity:0.8;
				-khtml-opacity: 0.8;
				opacity: 0.8;
			}
			
			#download-cv a{
				width: 200px;
				height: 125px;
				text-decoration: none;
				display: block;
			}
			
			#download-cv-alt{
				
			}
			
			#cv-box-icon{
				
				width: 171px;
				height:0 !important;
				line-height: 261px;
				padding-top: 261px;
				overflow: hidden;
				display: block;
				position: relative;
			}
			
			#cv-box-alt, #cv-box-icon{
				margin-top: 20px;
				margin-left: 70px;
			}
			
			#cv-box-alt{
				display: none;
				width: 171px;
				height: 261px;
			}
			
			.cv-box-icon-normal{
				background: url("../_img/cv-button-static.png") no-repeat;
			}
			
			.cv-box-icon-normal:hover{
				background-position: 0px -261px;	
			}
		
		#core-skills{
				position: absolute;
				left: 380px;
				top: 180px;
				width: 100px;
				height: 240px;
				border: 4px #ccc dotted;
				text-align: center;
				padding: 40px;
		}
		
			.skill-box{
				width: 100px;
				height: 100px;
				margin-bottom: 40px;
			}
			
			.skill-box a{
				color: #fff;
				text-decoration: none;
				width: 100px;
				height: 100px;
				line-height: 100px;
				display: block;
			}
			
			#skill-flex{
				background: #999;
			}
			
			#skill-flash{
				background: #990000;
			}
			
			#skill-css3:hover{
				opacity: 0.8;	
			}
			
			#skill-flex:hover{
				background: #ccc;
				
			}

			#skill-flash:hover{
				background: #f00;
			}
			
			#skill-html5:hover{
				opacity: 0.8;
			}
			
			
			
				.skill-box p{
					color: #fff;
					font-family: impact, arial, helvetica, sans-serif;
					font-weight: normal;
					font-size: 64px;
					line-height: 100px;
					margin-top: 0px;
					height: 100px;
				}
				
				.skill-box p .cufon{
					margin-top: 22px;
				}
		
		#logo-watermark{
			width: 476px;
			height: 278px;
			position: fixed;
			top: 383px;
			left: 589px;
			z-index: 1;
		}
		
		.logo-watermark-normal{
			background: url("../_img/logo-bg-normal.png");
		}
		
		.logo-watermark-alt{
			background: url("../_img/logo-bg-alt.png");
		}
		
		#home {
			margin-left: 565px;
		}
		
			#home .tagline {
				font-size: 33px;
			}
			
			#lab-intro-block h1{
				font-size: 82px;
			}
			
			#lab-intro-block h2{
				font-size: 52px;
				margin-top: 3px;
			}
		
			#home h1, #lab-intro-block h1{
				height: 65px;
			}
			
			#home h3, #lab-intro-block h3{
				height: 30px;
				margin-top: -4px;
			}
		
		.contentItem, .contentItemAlt{
			height: 320px;
			float: left;
			margin-left: 20px;
			margin-top: 180px;
			position: relative;
			z-index: 10;
		}
		
		.contentItemAlt{
			display: none;
		}	
		
		
			#lab-intro{
				display:none;
			}
		
				#lab-intro h1, #lab-intro h2{
					color: #000;
				}
				
				#alt-grafitti{
					background: url('../_img/bg-scrawl-alt.png') no-repeat;
					width: 725px;
					height: 274px;
					position: absolute;
					/*left: 385px;
					top: 265px;*/
					left: -180px;
					top: 80px;
					z-index: 10;
				}
				
				#alt-grafitti .hit{
					width: 194px;
					height: 100px;
					position: relative;
					left: 178px;
					top: 73px;
					cursor: pointer;
				}
				
				
				
			.description{
				width: 360px;
				height: 320px;
				margin:0px 20px 20px 40px;
				float: left;
				color: #000;
			}
			
			#home .description{
				width: 380px;
			}
			
			.description h1, .description h2, .description h3, .description p, .description #intro-text embed{
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 10px;
			}
				.description h1 a, .description h2 a, .description h3 a{
					border: none;
					text-decoration: none;
				}
			
				.working-for a{
					color: #666;
				}
				
				 .working-for a:hover{
					color: #999;
				}
			
				.view-live-btn{
					background: url("../_img/btn-view-live-site.png") no-repeat;
					width: 122px;
					height:0 !important;
					line-height: 31px;
					padding-top: 31px;
					overflow: hidden;
					display: block;
					margin-top: 15px;
				}
				
				.view-live-btn:hover{
					background-position: 0px -31px;	
				}
				
				.view-live-btn:active{
					background-position: 0px -62px;	
				}
			
				.red-highlight{
					color: #990000;
					font-weight: bold;
				}
			
		
			
			.screenshots, .screenshotsBlank{
				float: left;
				width: 490px;
				height: 320px;
				overflow: hidden;
				
			}
			
			.screenshots{
				background: #000;
				-moz-box-shadow:3px 3px 15px #000;
				-webkit-box-shadow:3px 3px 15px #000;
				box-shadow:3px 3px 15px #000;
			}
			
			#lab-intro-block .screenshots, #lab-intro-block .screenshotsBlank{
				height: 371px;
			}
			
			#theres-more .screenshots, .no-bg{
				background: none;
				text-align: right;
			}
			
			.screenshots a:hover img{
				filter:alpha(opacity=90);
				-moz-opacity:0.90;
				-khtml-opacity: 0.90;
				opacity: 0.90;
			}
			
			.click-to-enlarge{
				width: 101px;
				height: 101px;
				position: absolute;
				top:0px;
				left: 0px;
				margin-left: 389px;
				background: url('../_img/btn-click-to-enlarge.png');
			}
			
			.sidebar{
				width: 37px;
				height: 430px;
				background: #000;
				margin: 20px 20px 20px 20px;
				float: left;
			}
			
			.sidebar ul li{
				float: left;
				clear: both;
			}
			
			a.next, a.nextAlt {
				float: left;
				padding-top: 73px;
				overflow: hidden;
				height: 0px !important; 
				height /**/:73px; /* for IE5/Win only */
				background-repeat: no-repeat;
				width: 47px;
				margin-top: 110px;
				position: relative;
				z-index: 20;
			}
		
			a.next {
				background: url(../_img/next-arrow.png) top left;
			}
			
			a.nextAlt {
				background: url(../_img/next-arrow.png) 0 -146px;
				display: none;
			}
			
			a.next:active, a.next:hover {
				background-position: 0 -73px;
			}
			
			a.nextAlt:active, a.nextAlt:hover {
				background-position: 0 -219px;
			}
			
			a.disabled:active {
				background-position: 0 0px;
				cursor:default;
			}
			
			a.disabled:hover {
				background-position: 0 0px;
				cursor:default;
			}
				
	#footer{
		width: 100%;
		position: fixed;
		top:659px;
		left: 0px;
		height: 50px;
		
		color: #fff; 
		text-align: right;
	}
		
		#footer .copyright{
			margin-right: 40px;
		}
			#footer .copyright .break{
				color: #666;
			}
		
			#footer .copyright a{
				color: #fff;
			}
			
#ie6-warning-container{
	display: none;
}

/* =6: generic styles ------------------------------------------------------------------------------ */


/*=6a: sIFR ------------------------------------------------------------------------------ */

.cufon-loading a.rollover { 
   visibility: hidden !important; 
} 

/* =7: Page related styles ------------------------------------------------------------------------- */