/* Coding and design by Hambo Design
-------------------------------------------------------------*/

body 					{ background-color: #000; }



/* DIV Classes
-------------------------------------------------------------*/

.section					{ clear: left; display: inline; float: left; margin-bottom: 20px; width: 470px; }
.section img				{ margin-bottom: 10px; }

.wide					{ float: left; position: relative; width: 470px; }
.narrow					{ float: left; margin: 0 20px 20px 0; position: relative; width: 220px; }
.narrow.last				{ margin-right: 0; }

.entry					{ border-bottom: 1px dotted #ccc; float: left; margin-bottom: 30px; padding-bottom: 10px; }

.entry_image				{ display: inline; float: left; margin-right: 20px; width: 220px; }
.entry_content				{ float: left; width: 230px; }
#slog .entry_content		{ width: 470px; }
	
.comment_post			{ border-bottom: 1px solid #222; padding-top: 10px; }
.author_comment			{ background: url(/assets/images/icons/author_comment.gif) top right no-repeat; }



/* Rollover Image Styling
-------------------------------------------------------------*/

.narrow a					{ color: #444; display: block; text-decoration:none; width: 220px; }
.narrow img				{ height: 110px; }

.wide a					{ color: #444; display: block; text-decoration:none; width: 470px; }
.wide img					{ height: 240px; }

.collection_mask			{ position: absolute; left: 0px; top: 0px; display: none; }
a:hover .collection_mask 	{ display: inline; }

.narrow .collection_mask		{ background: transparent url(/assets/images/presentation/hover_img_narrow.png) no-repeat scroll left top; height: 110px; width:220px; }	
.wide .collection_mask		{ background: transparent url(/assets/images/presentation/hover_img_wide.png) no-repeat scroll left top; height: 240px; width: 470px; }	



/* Navigation Styling
-------------------------------------------------------------*/

ul#navigation				{ background: url(/assets/images/presentation/nav.gif) no-repeat; clear: both; float: left; height: 160px; margin-bottom: 20px; width: 330px; }
ul#navigation li a			{ display: block; height: 20px; text-indent: -9999px; width: 330px; }

#home li#nhome a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px 0; }
li#nhome a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px 0; }
	
#about li#nabout a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -20px; }
li#nabout a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -20px; }

#news li#nnews a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -40px; }
li#nnews a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -40px; }

#work li#nwork a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -60px; }
li#nwork a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -60px; }

#clients li#nclients a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -80px; }
li#nclients a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -80px; }

#careers li#ncareers a		{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -100px; }
li#ncareers a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -100px; }	

#contact li#ncontact a		{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -120px; }
li#ncontact a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -120px; }

#slog li#nslog a			{ background: url(/assets/images/presentation/nav.gif) no-repeat -660px -140px; }
li#nslog a:hover			{ background: url(/assets/images/presentation/nav.gif) no-repeat -330px -140px; }


ul#subnav_work			{ position: absolute; z-index: 10; left: 225px; list-style-type: none; padding-top: 10px; padding-right: 5px; text-align: right; width: 100px;  }
ul#subnav_work li a			{ color: #fff; font-size: 11px; height: 20px; width: 100px; }

p#slog_logo				{ display: block; margin-left: 20px; }




/* List Styling
-------------------------------------------------------------*/

ul.article_list				{ list-style-type: none; float: left; width: 470px; }
ul.article_list li				{ display: block; font-family: inherit; font-size: 12px; }
ul.article_list li a			{ border-bottom: 1px solid #444; display: block; padding: 5px 0; width: 470px; }
ul.article_list li a span		{ color: #444; }
ul.article_list li a:hover		{ background-color: #2a2a2a; }




/* Structure Divs
-------------------------------------------------------------*/

#container 				{ background-color: #000; text-align: left; width: 860px; }

#brand_and_nav			{ float: left; margin-right: 60px; width: 330px; }

#title						{ float: left; margin-bottom: 30px; width: 330px; }
#title h1					{ float: right; }

#content					{ float: left; width: 470px; }

#client_examples			{ float: left; list-style-type: none; margin-bottom: 20px; overflow: auto; width: 470px; }
.example					{ float: left; display: block; margin-right: 15px; width: 96px; }
.example img				{ border: 3px solid #333; }
.example p				{ color: #666; margin: 0; text-align: center; }



/* Masthead Area
-------------------------------------------------------------*/
	
#masthead				{ border-top: 5px solid #777; margin: 0 auto 80px; padding-top: 5px; position: relative; text-align: left; width: 95%; }
ul#address 				{ float: left; }
ul#address li				{ display: inline; margin-right: 10px; }

#masthead p				{ display: inline; float: right; }

ul#social					{ background: url(/assets/images/icons/social_media_ssllc.png) no-repeat; clear: both; height: 35px; list-style-type: none; position: absolute; top: 35px; left: 89%; width: 96px; }
ul#social li				{ float: left; height: 35px; width: 32px; }
ul#social li a				{ display: block; height: 35px; text-indent: -9999px; width: 32px; }


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

#footer 					{ clear: both; padding-top: 40px; text-align: right; width: 860px; }
#footer p					{ margin: 0; }