/*
version:   1.0
author:    Devin Ikram
email:     modernine@gmail.com
website:   http://www.modernine-design.com
*/


/*--------------------Global Styles--------------------*/
html { min-height: 100%; margin-bottom: 1px; }

body#home, body#about, body#projects, body#resume, body#contact, body#blog, body#links, body#print, body#web, body#sketches, body#shits {
	padding:			0;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0; /* to avoid margins */
    text-align: center; /* to correct the centering IE bug*/
}

body#home {background: url(../images/home_bgs/rotate.php) center 125px no-repeat;}

#sitecontainer {
    margin: 0 auto;
    width: 956px;
    text-align: left; /* to realign text */
}

#container {
	width: 956px;
	margin: 0 auto;
	float:left;
}

p {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	color: #333;
	text-decoration: none;
	margin:5px 0 0 0;
}

a {
	font-size:12px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 16px;
	color: #333;
	text-decoration: none;
}

a:hover { color: #D61E26;}
a:active {outline: none;}
a:focus {outline: none;}

h1 {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin: 0 0 10px 0;
	padding-left:6px;
	border-left:5px solid #D61E26;
}

h1 span {	
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 18px;
	color: #CCC;
	text-decoration: none;
}

h1 a{
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
}

h1 a:hover { color: #D61E26;}

h2 {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin: 0 0 10px 0;

}


/*--------------------Navigation--------------------*/
#sitelogo, .nav {
	height: 105px;
	width: 214px;
	padding-top: 20px;
	padding-left: 20px;
	float: left;
} 

a#about, a#projects, a#resume, a#contact, a#shop, a#links {
display:block;
text-indent:-9999px;
}
a#about {
width: 74px;
height:29px;
background: url("../images/nav/topnav1.gif") top no-repeat;
}
a#projects {
width: 104px;
height:27px;
background: url("../images/nav/topnav2.gif") 0 0 no-repeat;
}
a#resume {
width: 94px;
height:29px;
background: url("../images/nav/topnav3.gif") 0 0 no-repeat;
}
a#contact {
width: 97px;
height:23px;
background: url("../images/nav/topnav4.gif") 0 0 no-repeat;
}
a#shop {
width: 63px;
height:31px;
background: url("../images/nav/topnav5.gif") 0 0 no-repeat;
}
a#links {
width: 58px;
height:21px;
background: url("../images/nav/topnav6.gif") 0 0 no-repeat;
}
a:hover#about,
a:hover#projects,
a:hover#resume,
a:hover#contact,
a:hover#shop,
a:hover#links {background-position: bottom;}

body#about a#about, 
body#projects a#projects, 
body#resume a#resume, 
body#contact a#contact, 
body#shop a#shop, 
body#links a#links,
body#print a#projects,
body#web a#projects,
body#sketches a#projects,
body#shits a#projects {background-position: bottom;}


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

#footer {
	font-family:Helvetica, Arial, sans-serif;
	font-size:10px;
	color:#CCCCCC;
	width: 936px;
	margin: 0 auto;
	padding: 10px 0 0 20px;
	float:left;
}


/*--------------------Home Page--------------------*/
div#respectwelcome {
	width:214px;
	height:430px;
	float:right;
	background-image: url(../images/bg_80_black.png) repeat;
	padding-left:20px;
	padding-right:20px;
	/* transparent png hack for ie */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg_80_black.png',sizingMethod='scale');
}

/* reset for everyone else */
div#respectwelcome {
	background: url(../images/bg_80_black.png) repeat;
}

.welcome {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	color: #FFF;
	text-decoration: none;
	margin-top:5px;
}

/*--------------------Projects Navigation--------------------*/

#projectnav {
	width: 214px;
	padding-left: 20px;
	float: left;
} 

a#topnine, a#print, a#web, a#sketches, a#shits {
display:block;
text-indent:-9999px;
height:25px;

}
a#topnine {
width: 87px;
background: url("../images/nav/projectnav1.gif") top no-repeat;
}
a#print {
width: 53px;
background: url("../images/nav/projectnav2.gif") 0 0 no-repeat;
}
a#web {
width: 48px;
background: url("../images/nav/projectnav3.gif") 0 0 no-repeat;
}
a#sketches {
width: 101px;
background: url("../images/nav/projectnav4.gif") 0 0 no-repeat;
}
a#shits {
width: 156px;
background: url("../images/nav/projectnav5.gif") 0 0 no-repeat;
}

a:hover#topnine,
a:hover#print,
a:hover#web,
a:hover#sketches,
a:hover#shits {background-position: bottom;}

body#projects a#topnine, 
body#print a#print, 
body#web a#web, 
body#sketches a#sketches, 
body#shits a#shits {background-position: bottom;}

/*--------------------Projects--------------------*/
#projectscontainer {
	width: 702px;
	float: left;
	xpadding-right: 20px;
}

#projectsrow {
	width: 702px;
	height:190px;
	float: right;
	margin-right: 20px;
	margin-bottom:20px;
	border-bottom: 1px solid #CCC;
	display:inline;
}

.project {
	height: 150px;
	width: 214px;
	float: left;
	margin-bottom: 20px;
	margin-left: 20px;
	display:inline;
}

.project img {
	background:#FFF;
	width:196px;
	height:132px;
	padding: 8px;
	border: 1px solid #CCC;
}

.project a:hover img {
	border: 1px solid #878787;
}

.project a p {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 15px;
	color: #FFF;
	text-decoration: none;
	margin: 0;
}


.title {
	font-size:14px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 16px;
	color: #333;
	text-decoration: none;
	margin: 0;
}

.detailtitle {
	font-size:14px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 16px;
	color: #333;
	text-decoration: none;
	margin: 0;
}

.details {
	margin-top:5px;
}
	
.project .button {
	width:14px;
	height:14px;
	border: 1px solid #CCC;
	margin-top:5px;
	margin-right:5px;
	padding:0;
	display:inline;
}

.project a:hover button {
	border: 1px solid #878787;
}

.projectinfo {
	width: 214px;
	float: left;
	margin-bottom: 20px;
	margin-left: 20px;
	display:inline;
}

.summary {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	color: #333;
	text-decoration: none;
	margin-top:5px;
}


/*--------------------Lightbox--------------------*/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	
	
/*--------------------Resume--------------------*/
.resumecontainer {
	width: 214px;
	float: left;
	padding-bottom:20px;
}

#resumejobcontainer {
	width: 448px;
	margin-left: 20px;
	float:left;
	display:inline;

}

#contactbox {
	width: 214px;
	margin-left: 20px;
	float: left;
	display:inline;
}

.resume1col {
	width: 214px;
	margin-left: 20px;
	float: left;
	padding-bottom:20px;
	display:inline;
} 

.resumejob {
	width: 448px;
	float: left;
	padding:0 0 15px 0;
}

.resumetitle {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin:0 0 10px 0;
	padding-left:5px;
	border-left:5px solid #D61E26;
}

.resumejob p span {
	font-size:14px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin:0;
}	

.jobtitle {
	font-size:14px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	color: #999;
	text-decoration: none;
	margin:2px 0 0 10px;
}

.resumejob .jobbullets {
	width:408px;
	margin:2px 0 0 40px;
	padding:0;
}

.resumejob li {
	font-size:12px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 16px;
	color: #333;
	text-decoration: none;
	margin:0;
	list-style:square;
}

/*--------------------Contact--------------------*/
#contactform {
	margin-left: 20px;
	float: left;
	display:inline;
}

#contactform p {	
	font-size:16px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 18px;
	color: #CCC;
	text-decoration: none;
}

#name, #email, #message {
	padding:2px;
	font:14px/18px Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #333;
	margin:2px 0 2px 0;
}

input#name, input#email, textarea#message {
	width: 440px;
	padding:4px;
	border:1px solid #CCC;
}

input#name:focus, input#email:focus, textarea#message:focus {
	border:1px solid #878787;
}

/*--------------------Feeds--------------------*/
/*--------------------My Delicious--------------------*/
#deliciouscontainer {
	width: 214px;
	float: left;
	margin: 0 0 20px 0;
	display:inline;
}

h2.delicious-banner  {	
	display:none;
}

.delicious-posts { font-family: Helvetica, Arial, sans-serif; }
.delicious-banner { margin: 0; padding: 0;}
.delicious-posts ul,.delicious-posts li { margin: 0; padding: 6px 0 6px 0;}
.delicious-post { border-top: 1px solid #EEE;  font-size: 12px; }
.delicious-banner a {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin: 2px 0 10px 0;
}
.delicious-posts a:hover { color: #D61E26; }
.delicious-posts a { text-decoration: none; color: #333; line-height: 16px; display: block; padding: 0;}
.delicious-post a { color: #333; }

/*--------------------My Flickr--------------------*/
#flickrcontainer {
	width: 214px;
	float: left;
	margin: 0 0 20px 0;
	padding-left: 20px;
	display:inline;
}
#flickr_badge_uber_wrapper {text-align:left; width:214px;}
#flickr_badge_wrapper {padding:10px 0 10px 0; float:left;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid #CCC !important;
	background:#FFF;
	padding: 6px;
	border: 1px solid #CCC;
}
.flickr_badge_image img:hover {border: 1px solid #878787 !important;}

#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; /*margin-right:5px;*/}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#333333;}
#flickr_badge_wrapper {margin:0; padding: 0 0 10px 0; width:214px;}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#333333 !important;}
div .flickr_badge_image {margin:0 10px 10px 0; padding:0; float:left;}

/*--------------------About--------------------*/
#aboutcontainer {
	width: 448px;
	margin: 0 20px 0 20px;
	float:left;
	display:inline;
}

#aboutpic {
	background:#FFF;
	width:196px;
	float:left;
	padding: 8px;
	margin: 0 20px 10px 0;
	border: 1px solid #CCC;
	display:inline;
}


h1.abouttitle {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin: 0 0 10px 234px;
	padding-left:6px;
	border-left:5px solid #D61E26;
}

p.aboutheader a {
	font-size:20px;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height: 20px;
	color: #333;
	text-decoration: none;
	margin: 0 0 10px 0;
}

p.aboutheader a:hover { color: #D61E26; }

/*--------------------Links--------------------*/
#linksbox{
	width: 448px;
	margin: 0 20px 0 20px;
	float:left;
	display:inline;
}