/* jsn Web Styles - updated May 1/10 */



/****************************************************************************************************************************/
/* Design notes */
/*The main goal with this update was to simplify the stylesheets and limit the amount of div's that have been used. I also 
wanted to create a more seamless design with the blog and the rest of the site, so the naviagtion has be rethought.

Portfolio section has been revised to include my featured work and an archive section has been added and the majority of
my work as migrated to that.

Other design edits: the background colour has been changed to a light grey, the type is now a dark grey and the navigation
has been changed from a horizontal navigation across the top of the page to a verticle navigation down the left hand side.*/
/****************************************************************************************************************************/


/****************************************************************************************************************************/
/* typography for website - all typefaces are open source fonts from The League of Moveable Type - http://www.theleagueofmoveabletype.com/ */
@font-face {   
   font-family: "BlackoutMidnight";   
   src: url(fonts/Blackout-Midnight-webfont.eot); /* IE browers */   
   src: local("BlackoutMidnight"), url(fonts/Blackout-Midnight-webfont.ttf) format("truetype"), url(fonts/Blackout-Midnight-webfont.woff) format("woff"), url(fonts/Blackout-Midnight-webfont.svg) format("svg"); /* non-IE browers */ 
   font-weight: normal;
   font-style: normal;
}   

@font-face {   
   font-family: "LeagueGothic";   
   src: url(fonts/League_Gothic-webfont.eot); /* IE browers */   
   src: local("LeagueGothic"), url(fonts/League_Gothic-webfont.ttf) format("truetype"), url(fonts/League_Gothic-webfont.woff) format("woff"), url(fonts/League_Gothic-webfont.svg) format("svg"); /* non-IE browers */ 
   font-weight: normal;
   font-style: normal;
} 

@font-face {   
   font-family: "Junction";   
   src: url(fonts/Junction-webfont.eot); /* IE browers */   
   src: local("Junction"), url(fonts/Junction-webfont.ttf) format("truetype"), url(fonts/Junction-webfont.svg) format("svg"); /* non-IE browers */ 
   font-weight: normal;
   font-style: normal;
} 

@font-face {   
   font-family: "Creampuff";   
   src: url(fonts/creampuf-webfont.eot); /* IE browers */   
   src: local("Creampuff"), url(fonts/creampuf-webfont.ttf) format("truetype"), url(fonts/creampuf-webfont.svg) format("svg"); /* non-IE browers */ 
   font-weight: normal;
   font-style: normal;
} 

/****************************************************************************************************************************/
/* main styles for all pages */

body  {
	font: 80%/1.5em "Junction", Helvetica, sans-serif;
	background: #E6E6E6 url(images/mainBkgd.jpg) no-repeat left top;
	margin: 0;
	padding: 0;
	text-align: left;
	color: #666;
}

h1 {
	font-family: "BlackoutMidnight", Helvetica, Arial, sans-serif;
	font-size: 175%;
	line-height: 50%;
	font-weight: bold;
}

h2 {
	font-family: "LeagueGothic", Helvetica, Arial, sans-serif;
	font-size: 175%;
	line-height: 50%;
	text-decoration: underline;
}

h3 {
	font-family: "LeagueGothic", Helvetica, Arial, sans-serif;
	font-size: 125%;
}

a img {
	border-style: none;
}

a:link {
	color: #666;
	text-decoration: none;
}

a:visited {
	color: #666;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #99CC00;
	text-decoration: underline;
}

ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
} 


/****************************************************************************************************************************/
/* containter - flush left */
#wrapper {
	width: 1000px;
	text-align: left;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	left: 0px;
	top: 0px;
	position: relative;
}

#container {
	width: 1000px;
	text-align: left;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	left: 0px;
	top: 0px;
} 


/****************************************************************************************************************************/
/* header */
#header {
	padding-left: 10px;
	margin-top: 15px;
	padding-top: 10px;
} 


/****************************************************************************************************************************/
/* main navigation */
#MainNav {
	width: 175px;
	margin-top: 15px;
	padding-right: 20px;
	padding-left: 34px;
	float: left;
	padding-top: 15px;
} 

#MainNav h1 {
	font-family: "BlackoutMidnight", Helvetica, sans-serif;
	font-size: 300%;
	line-height: 50%;
	font-weight: bold;
}

#MainNav p {
	font: 100%/.5 em "Junction", Helvetica, sans-serif;
}

#MainNav a:link {
	color: #666666;
	text-decoration: none;
	display: block;
}

#MainNav a:visited {
	color: #666666;
	text-decoration: none;
}

#MainNav a:hover, a:active, a:focus {
	color: #99CC00;
	text-decoration: none;
}


/****************************************************************************************************************************/
/* main content holder */
#Content {
	width: 650px;
	margin-top: 15px;
	margin-left: 325px;
	padding-top: 30px;
} 


/****************************************************************************************************************************/
/* holder for sections on the index page */
#indexSection1 {
	width: 650px;
	height: 175px;
} 

#indexSection2 {
	width: 600px;
	color: #FFFFFF;
} 

#indexSection2-1 {
	width: 325px;
	float: left;
	background-image: url(images/TheLatestBlast.png);
	height: 325px;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
} 

#indexSection2-1 a:link {
	color: #FFF;
	text-decoration: none;
}

#indexSection2-1 a:visited {
	color: #FFF;
}

#indexSection2-1 a:hover, a:active, a:focus {
	color: #99CC00;
	text-decoration: underline;
}

#indexSection2-2 {
	width: 260px;
	float: right;
	color: #666666;
	margin-top: 165px;
	padding-top: 5px;
} 

#indexSection2-2 a:link {
	color: #666;
	text-decoration: none;
}

#indexSection2-2 a:visited {
	color: #666x;
}

#indexSection2-2 a:hover, a:active, a:focus {
	color: #99CC00;
	text-decoration: underline;
}

#indexSection3 {
	width: 650px;
	padding-top: 25px;
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	border-bottom-color: #666666;
	margin-top: -20px;
	padding-bottom: 15px;
	background-image: url(images/Chevrons.gif);
	background-repeat: no-repeat;
	background-position: top;
} 

#indexSection3 h1 {
	font-family: "BlackoutMidnight", Helvetica, Arial, sans-serif;
	font-size: 175%;
	line-height: 175%;
	font-weight: bold;
	background-color: #E6E6E6;
	display: inline;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

#indexSection4 {
	width: 650px;
	padding-top: 15px;
} 

#indexImg {
	position:absolute;
	left:297px;
	top:75px;
	width:644px;
	height:349px;
	z-index:1;
}

/****************************************************************************************************************************/
/* holder for sub navigation on portfolio and archive pages */
#PorfolioNav {
	width: 650px;
} 


/****************************************************************************************************************************/
/* holder for sub navigation on portfolio and archive pages */
#PorfolioContent {
	width: 450px;
	margin-top: 15px;
	margin-left: 325px;
	padding-top: 30px;
} 


/****************************************************************************************************************************/
/* page widths where needed */
#About {
	width: 425px;
}

#Shop {
	width: 425px;
} 


/****************************************************************************************************************************/
/* footer content */
#footer {
	margin-top: 45px;
	margin-bottom: 10px;
	margin-left: 25px;
}

#footer p {
	margin: 0;
	padding: 10px 0;
	font-size: 75%;
	color: #666;
	line-height: 100%;
}

#footer a:link {
	color: #666;
	text-decoration: none;
}

#footer a:visited {
	color: #666;
}

#footer a:hover, a:active, a:focus {
	color: #99CC00;
	text-decoration: underline;
}


/****************************************************************************************************************************/
/* floats */
.fltlft { 
	float: left;
	margin-right: 8px;
}

.SecondaryCopyfltlft {
	margin-bottom: 45px;
	margin-right: 10px;
	float: left;
}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}