@import url("/assets/css/reset.css");
@import url("/assets/css/forms.css");
@import url("/assets/css/easy_slider.css");
@import url("/assets/css/slimbox2.css");


body { margin: 0; padding: 0; font: normal  62.5% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif; text-align: center; background: #F5F2D7; color: #000; line-height: 150%;
}

a { text-decoration: none; font-weight: bold; color: #400;  padding: 0 2px; }

strong, b { font-weight: bold; }
em { text-decoration: italic; }



#mast { display: block; width: 100%; height: 200px; background: #400 url(/assets/i/mast.png) top left repeat-x; position: relative; }

#waves { position: absolute; bottom: 87px; right: 0; display: block; width: 100%; height: 114px; background: url('/assets/i/dawn.png') top center no-repeat; }


#logo {  position: absolute; display: block; top: 5px; left: 50px; }
#logo a img { display: block; border: 0; color: #fff; font-size: 250%; font-weight: normal;}



/*					Main Nav
---------------------------------------------------------- */

#nav { position: absolute; display: block; height: 70px; width: 585px; bottom: 14px; left: 0px !important; }

#nav ul { float: left; list-style-type: none; margin: 0; padding: 0; }

#nav ul li { font-size: .9em; font-weight: bold; letter-spacing: 2px; text-align: left; float: right; margin: 5px 0 0 0; padding: 0; }

html>body #nav ul li { margin-bottom: .3em; }

#nav ul li a, #nav ul li a:visited { display: block; padding: 0; width: 90px; height: 65px; float: left; text-align: center; margin-right: 0; font-size: 1.2em; font-weight: normal; }

#nav ul li a span { display: block; padding-top: 46px; color: #fff; }

#nav-home a { margin-left: 45px; background: transparent url(/assets/i/nav-about.png) 0 -130px no-repeat; }
#nav-about a { margin-left: 25px; background: transparent url(/assets/i/nav-about.png) 0 -130px no-repeat; }
#nav-services a { margin-left: 0; background: transparent url(/assets/i/nav-services.png) 0 -130px no-repeat; }
#nav-portfolio a { margin-left: 0; background: transparent url(/assets/i/nav-portfolio.png) 0 -130px no-repeat; }
#nav-ecommerce a { margin-left: 0; background: transparent url(/assets/i/nav-ecommerce.png) 0 -130px no-repeat; }
#nav-contact a { margin-left: 0; background: transparent url(/assets/i/nav-contact.png) 0 -130px no-repeat; }
#nav-articles a { margin-left: 0; background: transparent url(/assets/i/nav-articles.png) 0 -130px no-repeat; }

#nav ul li a:hover { background-position: 0 0; }
#nav li a.current { background-position: 0 -65px; }

#nav ul li a:hover span { color: #300; }
#nav li span a.current { text-decoration: underline; }



/*					Page Structure
---------------------------------------------------------- */

#con_wrap { width: 960px; margin: 0 auto 0 auto; }

#content  { width: 960px; float: left; display: block; text-align: left; /*background: #ECE1B0 url('/assets/i/content3.png') top left repeat-y;*/ }


#main  { width: 500px; float: left; background: transparent; margin: 30px 10px 0 0px; padding: 0; color: #000; min-height: 800px; height: 800px; text-align: left; line-height: 150%; font-size: 110%; }


html>body #main { height: auto; margin-left: 10px;}

#main p { margin-bottom: 1em; font-size: 110%; line-height: 160%; }

h1 { margin: 0; display: block; width: 500px; font: normal 38px/40px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #37630D; }
body#home h1 { display: none; }

#main h2 { margin: 0; display: block;  font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font-weight: normal; color: #37630D; }
#main h2.article { margin: 0; display: block; clear: both; height: 2em; font: normal 20px/22px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font-weight: normal; color: #37630D; }
body#home #main h2 { margin: 50px 0 10px 0;  }


#main h3 { margin: 5px 0; display: block;  font: normal 18px/20px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font-weight: normal; color: #900; }
#main h4 { margin: 5px 0; display: block;  font: normal 16px/18px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font-weight: normal; color: #900; }

#main ul { display: block; float: left; list-style: none; margin: 0 0 2em 10px; padding: 0; width: 90%; }

html>body #main ul { margin: 0 0 0 20px; }

#main ul li { list-style-type: none; display: block; margin: 0; padding: 0 0 0 20px; background: url(/i/tick2.png) no-repeat; }

#main ul li.lead { padding: 0 0 .2em 0; background-image: none; font-weight: bold; font-size: 110%; }



#sidebar  { position: relative; float: right; width: 350px; background: #EFE8C8 url(/assets/i/sidebar.png) bottom left no-repeat; margin: 0 5px 0 0; padding: 0 0 90px 0; height: 500px; }

html>body #sidebar { margin-right: 10px;}


#monitor, #sidebar_custom { position: absolute; top: -170px; left: 0; }

#sidebar ul.ticks {display: block; float: left; clear: left; list-style: none; font-size: 120%; }
#sidebar ul.ticks li {display: block; float: left; clear: left; list-style-type: none; margin: 0 0 10px 0; padding: 2px 0 2px 20px; background: url(/assets/i/tick.png) 0 50% no-repeat; }

/*																		FOOTER ELEMENTS
______________________________________________________________________________________*/
#foot_wrap { display: none; width: 900px; margin: 0 auto; font-size: 1.4em; line-height: 150%; }
#foot_wrap a { color: green; }
.foot_block { display: block; float: left; width: 270px;  text-align: left; }
.foot_block h4 {font: normal 18px/20px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; } }
#footer .service { border-right: 1px solid #fff;}
/*#footer .quotes { border-right: 1px solid #fff;}*/
#footer .coffee { margin: 0 0 0 0;}
#footer .coffee img { float: left;  margin: 0 7px 5px 0; }
.services	{ margin: 0 45px 0 0; }
.service ul { margin: 0; padding: 0; display: none !important; background: #fff; }
.services li { padding: 5px 0 5px 40px; margin: 0 0 10px -30px; background: url(/assets/i/tick.png) 0 50% no-repeat; list-style-type: none; }

#footer .quotes { margin: 0 45px 0 0;  }
.quotes .bubble { display: block; float: left; width: 210px; padding: 10px 10px 30px 10px; background: transparent url(/assets/i/bubble.png) bottom left no-repeat; }
.quotes cite { display: block; float: left; clear: left; width: 210px; margin: 10px 0 0 0; }
.quotes .bubble p {  }


/*																		MISC
______________________________________________________________________________________*/

p#benchmark { display: block; float: left; width: 100%; text-align: center; color: transparent; }
p.wide { display: block; float: left; width: 100%; text-align: center; x }

#quick_links { margin: 60px 0 15px 0;  display: block; float: left; width: 100%; text-align: center; font-size: 0.9em; }
#quick_links p { padding: 0 20%; }


/*				GENERAL Hilite		*/
.hilite { margin: 0 0 1em 0; padding: 1px 10px 20px 10px; font: normal 15px/17px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font-weight: normal;  background: url(/assets/i/intro.png) 0 0 no-repeat; color: #300000; }

.intro { margin: 0 0 1em 0; padding: 1px 10px 20px 10px; font: normal 15px/17px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; background: url(/assets/i/intro.png) 0 0 no-repeat; }
body#home .intro {  font: normal 18px/20px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; } 
.intro p.small
{
font: normal 80% "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif !important;
}

/*				GENERAL QUOTE		*/

img.quote_open { margin: 0 20px 0 0;  }
img.quote_close { margin: 0 0 0 10px;   }

#main .pullquote { padding-bottom: 20px; margin-bottom: 20px; }

#small_quote blockquote.pullquote  { width: 450px; margin: 0 0 1.5em 0; padding: 0 5px; }

html>body #small_quote blockquote.pullquote { width: 450px; }


#sidebar blockquote.pullquote { width: 310px !important; font-size: 120%; }

#small_quote blockquote.pullquote p  { margin: 0; background-position: bottom right; color: #492d00; }

#small_quote blockquote.pullquote p.pullquote  { padding: 1em 2.5em; margin: 0; line-height: 150%; font-size: 110%; text-align: justify; }

#small_quote blockquote.pullquote p cite  { color: #222; display: block; text-align: right; padding: 6px; margin: 0 5px; }

#small_quote .end-bubble { height: 2px; display: block; margin: 0 0 0 1px; }

.xxl { display: inline; font: 150% bold !important; }




/*				BIOs		*/
.bio { float: left; margin: 0 40px 0 0; padding: 0 0 20px 0; display: block; width: 200px; background: url(/assets/i/bio.png) top left repeat-x; min-height: 300px; }

.bio img { float: left; margin: 10px; border: 1px solid #500; }

.bio h3 { margin: 10px 0 0 0; padding: 0 5px; float: left; font: 14px/16px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; text-align: center; }

.bio p { padding: 5px; float: left; display: block; width: 180px; }

.bio i { padding: 3px; }

/*				tutorial boxes		*/
.tut_box
{
float: left;
margin: 10px 10px 30px 0;
padding: 0 0 10px 0;
display: block;
width: 490px;
border-bottom: 1px dotted #C3B578;
}

html>body .tut_box { margin: 0 40px 20px 0; }


.tut_box img
{
float: left;
margin: 10px;
border: 0;
}

.tut_box h3
{
margin: 10px 0 5px 10px;
padding: 0;
float: left;
font-size: 150%;
width: 490px;
display: block;
color: #600;
font-weight: normal;
}

.tut_box h4
{
margin: 10px 0 5px 10px;
padding: 0;
float: left;
font-size: 120%;
width: 490px;
display: block;
color: #2B4710;
font-weight: normal;
}

.tut_box p
{
padding: 0 1.5em 5px 1.5em;
}

.tut_box img.thumb
{
float: none;
display: inline;
}

.tut_box ol
{
/*float: none;
display: inline;*/
}

html>body .tut_box ol 
{  
clear: both;
/*float: left;*/
/* display: block; */
/*margin: 0 0 0 0;*/
}

.tut_box ol li
{
font-size: 1.1em;
margin-bottom: .7em;
}

.demo_link
{
display: block;
margin: 1em 10px 0 0;
float: left;
/* width: 450px; */
text-align: right;
}

.demo_link img  { float: right !important; margin: 0; }

.key
{
font-size: 80%;
padding: 3px;
font-family: "Courier", "Courier New";
background: #fefefe;
color: #222;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
}


#main ul li
{
list-style-type: none;
display: block;
padding: 5px 0 0 20px;
margin: 0 0 10px 0;
background: url('/assets/i/tick.png') 0 50% no-repeat;
}


/*				comments		*/
.comments, .comment_form
{
/* background: #400 url(i/break2.png) top left no-repeat; */
float: left;
margin: 20px 10px 30px 0;
padding: 0 0 0 0;
display: block;
width: 500px;
}

.comment_form { /*background: #400;*/ background-image: none; }

.comments h3, .comment_form h3
{
font-size: 160%;
color: #fffed9;
text-indent: 26px;
height: 26px;
font-weight: normal;
}


.single_comment
{
float: left;
margin: 0 10px 30px 0;
padding: 0 0 0 0;
display: block;
width: 480px;
padding: 5px;
}

.second
{
background: #E3D8A9;
}

.small_date { float: right; }

.error { display: block; clear: left; margin: 1em auto; border: 1px solid #D893A1;  padding: 16px 40px; background: #FBE6F2 url(/assets/i/error.png) 3px 3px no-repeat; color: #900; } 

/*				SIDEBAR HEADERS		*/
#sidebar h4, #sidebar h2
{
margin: 0 0 10px 10px;
font: 20px/22px Verdana, sans-serif;
font-weight: normal;
color: #37630D;
}


/*				ARTICLES	*/

.article_preview { float: left; display: block; border-bottom: 1px dotted #C3B578; width: 470px; padding: 3px 5px 30px 5px; margin: 10px 0 30px 0; }
.article_preview h2 a { font: normal 20px/22px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; }

.article_preview.active { background: #F8F7EA; cursor: pointer; }
.article_preview.active h2 a { color: #37630D !important; }
.article_preview.active .date .month { background: #900; }


.article_clear { float: left; clear: both; display: block; width: 450px; height: 10px; background: transparent; }

.article_preview h4 { float: right; margin: 10px 10px 0 0; display: block; }

.article img { float: left; }

.article p { display: block; width: 420px; float: left; }

.date { display: block; float: left; width: 50px; background: transparent url(/assets/i/curl.gif) bottom left no-repeat; margin: 0 10px 10px 10px; text-align: center; }
	
.date .month { padding: 5px 0 1px 0; font-size: 1.1em; background: #600; text-transform: uppercase;  letter-spacing: 2px; color: #fff; }
.date .day { font-size: 2.1em; margin: 3px 0 0 0;  }
.date .year { padding: 0 0 10px 0;}

.pub_date { font-size: 90%; display: block; float: left; clear: both;  width: 500px; margin: 10px 0 10px 0; }


/*				PORTFOLIO	*/
/*																		PORTFOLIO
______________________________________________________________________________________*/

.portfolio { display: block; float: left; margin: 20px 30px 0 0; width: 500px; padding: 0 0 10px 0; border-bottom: 1px dotted #C3B578; }
.portfolio img { display: block; float: left; margin: 0 0 10px 10px !important; }
.portfolio .abstract { display: block; float: left; width: 360px;  }
.portfolio .abstract p { padding: 0 15px 5px 15px; }

#content .clearer { margin: 15px auto 40px auto; height: 20px; width: 450px; background: transparent url('/assets/i/break.gif')  center no-repeat; float: left; }

.clear { float: left; display: block; margin: 15px auto 40px auto; height: 20px; width: 450px; }

#sidebar .clear { width: 340px; }

/*				ECOMMERCE SIDEBAR		*/
#sidebar_gfx { position: relative; float: left; width: 350px; }

#sidebar_gfx img { float: left; }

#screen_content { position: absolute; display: block; top: 9px; left: 30px; width: 292px; height: 217px; background: transparent; }

#bag { float: left; display: block; width: 325px; height: 350px; background: transparent url('/assets/i/bag.png') top left no-repeat; }

#webify_side { float: left; display: block; width: 325px; height: 420px; background: transparent url('/assets/i/chic-geek.png') top left no-repeat; }

#coffee { float: left; display: block; width: 320px; height: 250px; background: transparent url('/assets/i/coffee.png') top left no-repeat; }

#sidebar_info { margin: 0; padding: 0; width: 300px; float: left; display: block; position: relative; color: #333; }

#sidebar_info b { color: #333; }

#sidebar_info p { float: left; padding: 1.2em; }

#sidebar_info p.large { font: 15px Verdana, sans-serif; font-weight: normal; color: #300; line-height: 170%; }

#sidebar_info a { border-bottom: 1px dotted #fff; }

#sidebar_info ul { margin: 0 0 0 1em; padding: 0; list-style: none; }

#sidebar_info ul li  { font-size: 120%; margin: 0 0 .5em 0; padding: 0 0 .6em 26px; line-height: 1.4em; background: url('/assets/i/tick.png') no-repeat 0 4px; float: left; display: block; width: 280px; }

/*				MONITOR		*/
#monitor { float: left; display: block; }

#screen { position: relative; float: left; display: block; width: 350px; height: 350px; background: url('/assets/i/monitor.png') top left no-repeat; }



/*	MISC	*/

.small_text { font-size: 90% !important; }

#flash { margin-top: 20px; }

a.inkscape { margin: 10px 0 0 0; float: left; display: block; padding: 0 0 0 30px; background: url('/assets/i/inkscape3.png') top left no-repeat; height: 30px; border-bottom: none; }

a.inkscape:hover { text-decoration: underline; }

a.wordpress { margin: 10px 0 0 0; float: left; display: block; padding: 0 0 0 30px; background: url('/assets/i/wordpress.png') top left no-repeat; height: 30px; border-bottom: none; }

a.wordpress:hover { text-decoration: underline; }

a.zip { margin: 10px 0 0 0; float: left; display: block; padding: 0 0 0 30px; background: url('/assets/i/zip.png') top left no-repeat; height: 30px; border-bottom: none; }

a.zip:hover { text-decoration: underline; }


p.large { font-size: 120%; margin: 0; padding: 0; }

#socialBMs { display: block; border-top: 1px solid #513333; float: left; margin: 2em 0 2em 15px; padding: .5em 0 0 0; width: 300px; }

html>body #socialBMs { padding: 1em 0 0 0; margin: 0 0 0 30px; }

#socialBMs h3 { margin: 0 0 1em 0; padding: 0; font: normal 20px/22px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; }

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

#socialBMs ul li  { float: left; background: none; margin: 0 25px 0 0; padding: 0; width: 16px; height: 16px; }

html>body #socialBMs { margin: 0 0 0 20px; }

#socialBMs ul li a { display: block; float: left; padding: 0; margin: 0; width: 16px; height: 16px; text-indent: -9999em; text-decoration: none !important; border: 3px solid #E3D8A9; }

#socialBMs ul li a:hover { border: 3px solid #400000	 }

#delicious a 	{ background: url('/assets/i/delicious.gif') no-repeat 0 0;  }
#digg a 	{ background: url('/assets/i/digg.gif') no-repeat 0 0; }
#reddit a 	{ background: url('/assets/i/reddit.gif') no-repeat 0 0; }
#stumbleupon a 	{ background: url('/assets/i/stumbleupon.gif') no-repeat 0 0; }


#creative_commons { border-top: 1px solid #513333; display: block; float: left; margin: 0 0 0 15px; padding: 1em 0 0 0; font-size: 120%; width: 300px; }

htm>body #creative_commons { padding: 1em 0 0 0; margin: 2em 0 0 30px; }

#creative_commons a { text-decoration: none; border-bottom: 0; }

#creative_commons a:hover { text-decoration: underline; }

#creative_commons img { float: left; border: 0; margin: 0 5px 3px 0; }

#creative_commons img a { border: 0 !important; }

#creative_commons p { margin: 0 0 1em 0; padding: 0; }

/* Archive (adapted partially from veerle.duoh.com)
------------------------------------------------------------------*/
#archive
{
	margin:10px 0;
	float:left;
	width:280px;
	}
#archive h4 {
	display:block;
	height:40px;
	width:280px;
	}
	
						
#archive ul {
	padding:1px 0 0 0;
	margin: 0 0 10px 0;
	}	

#archive ul li {
		background-image: none;
	}

#archive ul li a {
	display:block;
	padding:9px 10px;
	border-bottom: 1px solid #CABF8D;
	}

#archive ul li a:hover {
		background: #CABF8D;
	}

#archive ul li a span {
	color: #333;
	font-size:.90em;
	}