/*
Title: 		Taran Matharu styles
Author: 	http://www.iheartspaceships.com
*/

* { margin: 0; padding: 0; }
div.clearme { clear: both; height: 0; }

/*________________ general styles ________________*/

html, body { height: 100%; }

body {
	color: #000;
	font-family: Arial, sans-serif;
	font-size: 0.8em;
	background: #121212;
}

h1 { display: none; }
a { color: #D1CFCF; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }

h2.error-text { font-size: 2em; color: #FFF; }
p.error-text { font-size: 1em; color: #FFF; }

/*________________ header ________________*/

div#updates {
	position: absolute; top: 72px; left: 100px;
	width: 160px;
	font-size: 1em;
}
div#updates a { font-size: 1.1em; font-weight: bold; }

div#updates p {
	margin-bottom: 8px;
}

div#anims {
	position: absolute; top: 0; right: 0;
	width: 755px;
	height: 220px;
}
div.homepage { background: url('../images/css-images/animHomepage.jpg') top left no-repeat; }
div.mywork { background: url('../images/css-images/animMywork.jpg') top left no-repeat; }
div.aboutme { background: url('../images/css-images/animAboutme.jpg') top left no-repeat; }
div.sketchbook { background: url('../images/css-images/animSketchbook.jpg') top left no-repeat; }

/*________________ navigation ________________*/

ul#mainNav {
	width: 825px;
	margin: 0 auto;
	position: relative;
	z-index: 1;

}
ul#mainNav li {
	list-style: none;
	float: left;
}

ul#mainNav li a {
	display: block;
	text-indent: -10000px;
	overflow: hidden;
	width: 165px;
	height: 30px;
}
a#navHome { background: transparent url('../images/css-images/navHome.gif') top center no-repeat; }
a#navWork { background: transparent url('../images/css-images/navWork.gif') top center no-repeat; }
a#navAbout { background: transparent url('../images/css-images/navAbout.gif') top center no-repeat; }
a#navSketchbook { background: transparent url('../images/css-images/navSketchbook.gif') top center no-repeat; }
a#navEmail { background: transparent url('../images/css-images/navEmail.gif') top center no-repeat; }

a#navHome:hover, a#navWork:hover, a#navAbout:hover, a#navSketchbook:hover, a#navEmail:hover { background-position: 0 -30px; }
a#navHome.selected, a#navWork.selected, a#navAbout.selected, a#navSketchbook.selected, a#navEmail.selected { background-position: 0 -30px; }

/*________________ main layout ________________*/

div#bump-bump {
	visibility: hidden;
	width: 100%;
	height: 49%;
	margin-top: -290px;
	float: left;
}

div#container {
	background: #4B6976 url('../images/css-images/containerBG.jpg') top center no-repeat;
	width: 1025px;
	margin: 0 auto;
	clear: both;
	
  	height:580px;
  	
  	position: relative;
	top: -290px;
	/* IE4ever Hack: Hide from IE4 **/
	position: static;
	/** end hack */
}

/* Hide from IE5mac \*//*/
div#bump-bump { display: none; }
html, body { height: auto; }
/* end hack */

div#contentWrap {
	position: relative;
	padding-top: 213px;
	width: 1025px;
	height: 367px;
}

div#mainContent {
	clear: both;
	padding-top: 29px;
	color: #757575;
	width: 1025px;
	height: 237px;
	position: relative;
}

div#taranIdent {
	width: 271px;
	height: 237px;
	float: left;
	background: url('../images/css-images/ident.jpg') bottom left no-repeat;
}

/*________________ my work ________________*/

ul#workNav {
	float: left;
	width: 95px;
}

ul#workNav li {
	list-style: none;
}

ul#workNav li a {
	display: block;
	text-indent: -10000px;
	overflow: hidden;
	width: 95px;
	height: 23px;
}
a#showreel { background: transparent url('../images/css-images/showreel.gif') top center no-repeat; }
a#personal { background: transparent url('../images/css-images/personal.gif') top center no-repeat; }
a#industry { background: transparent url('../images/css-images/industry.gif') top center no-repeat; }

a#showreel:hover, a#personal:hover, a#industry:hover { 
	background-position: 0 -23px;
}
a#showreel.selected, a#personal.selected, a#industry.selected { 
	background-position: 0 -23px;
}

div#workDetails {
	background: #EBEBEB url('../images/css-images/workDetailBG.gif') top left no-repeat;
	width: 498px;
	font-size: 0.9em;
  	height:237px;
  	float: right;
  	position: relative;
  	margin-right: 100px; display: inline;
}

div#workDetailsInner {
	width: 182px;
	float: left;
}

div#workDetailsInner h2 {
	padding: 4px 6px 1px 6px;
}
div#workDetailsInner p {
	padding: 0 4px 1px 6px;
}

ul#actionsNav {
	position: absolute; bottom: 0; left: 0;
	width: 182px;
	background: transparent url('../images/css-images/controlBG.gif') top left repeat-x;
}

ul#actionsNav li {
	list-style: none;
	float: left;
	height: 25px;
}

ul#actionsNav li a {
	display: block;
	text-indent: -10000px;
	overflow: hidden;
	width: 91px;
	height: 25px;
	position: absolute;
}
ul#actionsNav li#play a { background: transparent url('../images/css-images/play.gif') top left no-repeat; top: 0; left: 0; }
ul#actionsNav li#next a { background: transparent url('../images/css-images/next.gif') top left no-repeat; top: 0; left: 0; }
ul#actionsNav li#back a { background: transparent url('../images/css-images/back.gif') top left no-repeat; top: 0; right: 0; }

ul#actionsNav li#play a:hover, ul#actionsNav li#next a:hover, ul#actionsNav li#back a:hover { 
	background-position: 0 -25px;
}

div#vimeoWrapper { position: absolute; top: 0; right: 0; width: 316px; height: 237px; } 

/*________________ about me ________________*/

ul#aboutNav {
	float: left;
	width: 95px;
}

ul#aboutNav li {
	list-style: none;
}

ul#aboutNav li a {
	display: block;
	text-indent: -10000px;
	overflow: hidden;
	width: 95px;
	height: 23px;
}
a#downloadcv { background: transparent url('../images/css-images/downloadcv.gif') top center no-repeat; }

a#downloadcv:hover { 
	background-position: 0 -23px;
}

div#aboutTaran {
	color: #ebebeb;
	
	width: 293px;
	float: right;
	font-size: 1.2em;
  	
  	margin-right: 100px;
  	display: inline;
  	
  	position: relative;
  	border-top: 1px solid #ebebeb;
  	padding-top: 1px;
  	padding-right: 193px;
  	
  	min-height: 230px;
	/* IE 6/7 height */
 	height:auto !important;
  	height:230px;
}

div#aboutTaran p {
	margin-bottom: 20px;
}

img#polaroid { position: absolute; bottom: -20px; right: -20px; }

/*________________ sketchbook ________________*/

ul#sketchbookNav {
	float: left;
	width: 95px;
}

ul#sketchbookNav li {
	list-style: none;
}

ul#sketchbookNav li a {
	display: block;
	text-indent: -10000px;
	overflow: hidden;
	width: 95px;
	height: 23px;
}
li#next-sub a { background: transparent url('../images/css-images/next-sub.gif') top center no-repeat; }
li#back-sub a { background: transparent url('../images/css-images/back-sub.gif') top center no-repeat; }

li#next-sub a:hover, li#back-sub a:hover { 
	background-position: 0 -23px;
}

div#sketchbookGrid {
	width: 492px;
	float: right;
	margin-right: 99px;
	display: inline;
}

div#sketchbookGrid img {
	float: left;
	border: none;
	margin: 0 2px 2px 0;
	display: inline;
}

/*________________ footer ________________*/

div#footer {
	clear: both;
	width: 825px;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 0.85em;
	color: #25343B;
	position: relative;
}

div#footer a {
	color: #25343B;
	text-decoration: none;
}

div#footer ul {
	float: right;
}

div#footer ul li {
	list-style: none;
}

span#copyright { float: left; }

div#facebookLike { position: absolute; bottom: -60px; left: -100px; }

/*________________ homepage ________________*/

div#introOne, div#introTwo, div#introThree, div#introFour {
	float: left;
	width: 156px;
	margin-right: 10px;
	display: inline;
}
div#introFour { margin-right: 0; }

div#introOne h2, div#introTwo h2, div#introThree h2, div#introFour h2 {
	text-indent: -5555em;
	display: block;
	width: 156px;
	height: 200px;
	background: url('../images/showreel-home.jpg') top left no-repeat;
}

div#introOne a, div#introTwo a, div#introThree a, div#introFour a {
	display: block;
	width: 146px;
	height: 30px;
	background: url('../images/css-images/introTwoLink.gif') top left no-repeat;
	color: #090C0D;
	padding: 7px 0 0 10px;
	text-decoration: none;
	font-size: 0.85em;
}

div#introTwo h2 {
	background: url('../images/industry-home.jpg') top left no-repeat;
}

div#introThree h2 {
	background: url('../images/5.jpg') top left no-repeat;
}

div#introFour h2 {
	background: url('../images/6.jpg') top left no-repeat;
}