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

ZACH LEBAR.COM - V2: ORGANIC FLUCTUATIONS

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


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

IMPORTS

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

@import "section.css";

@import "structure.css";

@import "style.css";

@import "typography.css";


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

BASE RESETS & STYLES

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

* { margin: 0; padding: 0; }

body {
	background: url(../img/bg.jpg) repeat;
	
	font-family: Verdana, sans-serif;
	font-size: 11px;
	color: #604b3d;
}

.container {
	width: 771px;
	margin: 0 auto;
}

.container p {
	padding: 0 100px;
}

.fixed {
	position: fixed;
}

.fixed.nav {
	height: 20px;
	top: 5px;
	border: none;
}


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

PROGRESSIVE ENHANCEMENT

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

/*.blurb a:hover,
 {
	-webkit-box-shadow: 0px 0px 10px rgba(96, 75, 61, 0.5);
	-moz-box-shadow: inset 0px 0px 10px rgba(96, 75, 61, 0.5);
}

div.nav .top ul li.notebook a:hover,
div.nav .top ul li.labs a:hover {
	-webkit-box-shadow: 0px 0px 10px rgba(67, 73, 56, 0.7);
	-moz-box-shadow: inset 0px 0px 10px rgba(67, 73, 56, 0.7);
}*/


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

COMING SOON

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

img.comingsoon {
	position: relative;
	left: 50%;
	
	margin-left: -450px;
	margin-top: 100px;
}



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

HOMEPAGE

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

h1.logo {
	background: url(../img/logo.png) no-repeat top center;
	display: block;
	width: 937px;
	height: 535px;
	
	margin: 0 auto;
	
	text-indent: -9999px;
	
	margin-top: 50px;
}

.home .container {
	margin-bottom: 80px;
}

.home h5.container {
	margin-top: 10px;
	margin-bottom: 3px;
	color: rgb(96, 75, 61);
	color: rgba(96, 75, 61, 0.8);
}


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

NAV STYLING

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

h5.nav {
	margin-top: 40px;
}

div.nav {
	width: 100%;
	margin-top: 2px;
	
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

div.nav .top {
	height: 47px;
	width: 771px;
	margin: 0 auto;
	
	border-left-width: 1px;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
}

div.nav .top ul {
	width: 314px;
	margin: 0 auto;
	padding: 0;
}

div.nav ul li {
	list-style: none;
	margin: 0;
}

div.nav .top ul li.notebook a {
	display: block;
	
	height: 100%;
	width: 130px;
	
	text-align: center;
	font-size: 25px;
	color: rgb(96, 75, 61);
	color: rgba(96, 75, 61, 1);
	padding-left: 25px;
	
	float: left;
	
	position: relative;
}

div.nav .top ul li.notebook a span,
div.nav .top ul li.labs a span {
	position: relative;
	top: -5px;
	
	text-transform: uppercase;
}

div.nav .top ul li.notebook a span.icon,
div.nav .top ul li.labs a span.icon {
	display: block;
	height: 24px;
	widows: 22px;
	
	background: url(../img/icon-notebook.png) no-repeat 0 2px;
	
	position: relative;
	top: 12px;
	left: -5px;
}

div.nav .top ul li.labs a span.icon {
	background: url(../img/icon-themes.png) no-repeat;
}

div.nav .top ul li.labs a {
	display: block;
	
	height: 100%;
	width: 100px;
	
	margin-left: 192px;
	
	text-align: center;
	font-size: 25px;
	color: rgb(96, 75, 61);
	color: rgba(96, 75, 61, 1);
	padding-left: 25px;
	
	position: relative;
}

div.nav .top ul li.notebook a:hover,
div.nav .top ul li.labs a:hover {
	background: rgb(138, 150, 116);
	background: rgba(138, 150, 116, 0.4);
	
	border-left-width: 1px;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
	
	left: -1px;
}

div.nav .description {
	width: 100%;
	
	border-top-width: 1px;
	border-top-style: solid;
	
	clear: left;
}

div.nav .description p {
	height: 15px;
	width: 771px;
	margin: 0 auto;
	padding: 5px 0;
	
	text-align: center;
	
	background: rgb(138, 150, 116);
	background: rgba(138, 150, 116, 0.2);
	
	border-left-width: 1px;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
}

div.nav .description p.notebook,
div.nav .description p.labs {
	display: none;
}

div.nav.green, 
div.nav.green .top,
div.nav.green .top ul li a,
div.nav.green .description,
div.nav.green .description p {
	border-color: rgba(138, 150, 116, 0.7);
}

div.nav.blue, 
div.nav.blue .top,
div.nav.blue .top ul li a,
div.nav.blue .description,
div.nav.blue .description p {
	border-color: rgba(116, 140, 163, 1.0);
}

div.nav.orange, 
div.nav.orange .top,
div.nav.orange .top ul li a,
div.nav.orange .description,
div.nav.orange .description p {
	border-color: rgb(247, 126, 88);
	border-color: rgba(247, 126, 88, 1.0);
}


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

SLIM NAV

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

div.nav.slim {
	height: 16px;
}

div.nav.slim p {
	margin: 1px 0 0 20px;
	color: #fdfaef;
	text-transform: uppercase;
}

div.nav.slim ul {
	padding: 0;
}

div.nav.slim ul li {
	display: inline;
	padding: 0 10px 0 0;
	color: #fdfaef;
}

div.nav.slim ul li:last-child {
	padding-right: 20px;
}

div.nav.slim ul li a {
	color: #fdfaef;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	
	position: relative;
	top: 1px;
}

div.nav.slim ul li a:hover {
	font-weight: bold;
}

div.nav.slim {
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
	border-bottom-width: 1px;
	border-bottom-style: solid;
}	

div.nav.slim.green {
	background: rgb(138, 150, 116);
	background: rgba(138, 150, 116, 0.5);
}

div.nav.slim.blue {
	background: rgb(116, 140, 163);
	background: rgba(116, 140, 163, 0.5);
}

div.nav.slim.orange {
	background: rgb(247, 126, 88);
	background: rgba(247, 126, 88, 0.5);
}


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

RSS FEED LINK

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

.rss.nav {
	border: none;
}

.rss.nav a {
	color: rgb(253, 250, 239);
	text-decoration: none;
}

.rss.nav a:hover {
	text-decoration: underline;
}


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

NOTEBOOK

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

.notebook h1.logo {
	background: url(../img/notebook/logo.png) no-repeat top center;
	width: 740px;
	height: 466px;
}


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

LABS

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

.labs h1.logo {
	background: url(../img/labs/logo.png) no-repeat top center;
	width: 960px;
	height: 601px;
	margin-top: 20px;
}


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

FOOTER

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

p.footer {
	margin: 15px 0 30px 0;
	text-align: center;
	text-transform: uppercase;
}