/**********************************************************************************************

	Title: Slurp Network
	Author: Studio 7 Designs Inc
	Copyright: Envira Media Inc

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.2.1 Secondary Content
			2.3 sidebar
			2.4 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #191309 url(../images/bg/body_img.jpg) repeat 50% 0;
		font: 62.5%  'Trebuchet MS',Helvetica, Arial, sans-serif;
		text-align: center;
		color: #623f38;
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: none;
		cursor: help;
	}
	
	input, textarea, select {
		font: 1em Arial, Helvetica, sans-serif;
	}

	a {
		color: #2ac6e9;
		text-decoration: none;
	}
	
	a:hover {
		color: #f3497d;
		text-decoration: none;
	}
	
	h1 {
		margin: 0 0 20px 0;
		font-weight: normal;
		font-size: 1.4em;
		line-height: normal;
	}
	h2 {
		margin: 0 0 16px 5px;
		font-weight: normal;
		font-size: 2.2em;
		color: #f9f9f9;
		line-height: normal;
		
	}
	p{
		font-size: 1.2em;
	}

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	
	
	/* image replacement */	
	
	.ir,
	.ir a, 
	.ir span {
		display: block;
		overflow: hidden;
		text-align: center;
	}
	
	.ir a span,
	a.ir span {
		cursor: pointer;
	}
	
	.ir {
		position: relative;
	}
		
	.ir span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background-repeat: no-repeat;
	}
	
	/* 	Use the following snippet to replace text with images
	
	.ir-name, 
	.ir-name span {
		width: 100px;
		height: 50px;
	}
	
	.ir span {
		background-image: url(../images/ir_name.gif);
	}
	*/
	
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.container{
		width: 980px;
		margin: 0 auto;
	
	}
	#page{
		text-align: left;
		line-height: 1.3em;
		overflow: hidden;
		background: url(../images/bg/header_img.jpg) repeat-x 50% 0;
	}
	.page-inner{
		background: url(../images/bg/header_bg_img.jpg) no-repeat 50% 0;
	}
	#index #page{
		background-image: none;
	}
	#header {
		text-align: left;
		line-height: 1.3em;
		overflow: hidden;
		padding-bottom: 15px;
		width: 980px;
		margin: 0 auto;
		position: relative;
		height: 305px;
	}
	
	/* Default layout (2 columns: content + right sidebar ) */
	
	#content {
		width: 980px;
		position: relative;
		z-index: 100;
		min-height: 660px;
	}
	#footer {
		clear: both;
		background: #0c0902 url(../images/bg/footer_img.jpg) repeat-x 50% 0;
		min-height: 290px;
	}
	

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
	
	#header h1 a{
		display: block;
		width: 502px;
		position: absolute;
		right: -4px;
		top: 160px;
		height: 88px;
		overflow: hidden;
		line-height: 20px;
		background: url(../images/logo.png) no-repeat;
		cursor: pointer;
		text-indent: -999em;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	.slurp_network{
		width: 135px;
		height: 22px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.slurp_network a,
	.slurp_network a span{
		width: 135px;
		height: 15px;
		position: relative;
		display: block;
		cursor: pointer;
		overflow: hidden;
		text-indent: -9999px;
	}
	.slurp_network a{
		margin: 6px 0 0 12px;
	}
	.slurp_network a span{
		background: url(../images/slurp_network_logo_top.png) no-repeat 0 0px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.slurp_network_list{
		display: none;
	}
	 .roll{
		display: block;
	}
	.slurp_network_list{
		padding: 25px 4px 12px 5px;
		width: 315px;
		position: absolute;
		left: 0;
		top: 24px;
		background: #201b17;
		border: 1px solid #312720;
		border-top: none;
		font: 1.2em Helvetica, Arial, sans-serif;
	}
	.slurp_network_list ul{
		padding-bottom: 15px;
	}
	.slurp_network_list li{
		width: 315px;
		overflow: hidden;
		min-height: 24px;
		line-height: 24px;
		color: #a4957d;
	}
	.slurp_network_list li:hover,
	.slurp_network_list li.mover{
		background-color:#383430;
	}
	.slurp_network_list li a{
		float: left;
		color: #76a1be;
		text-transform: uppercase;
		width: 110px;
		background: url(../images/ico/network_arrow.png) no-repeat 8px 50%;
		padding-left: 19px;
		text-decoration: none;
	}
	.slurp_network_list p{
		color: #598527;
		background: url(../images/bg/popup_top.png) repeat-x 0 0;
		position: relative;
		margin: 0 10px;
		padding: 20px 3px 0 2px;
	}
	.envira-top{
		width: 131px;
		height: 20px;
		background: url(../images/envira_media_logo.png) no-repeat 0 0;
		display: block;
		position: absolute;
		right: 0;
		top: 15px;
		text-indent: -1000em;
	}
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/
	.box{
		width: 980px;
		margin-bottom: 37px;
		float: left;
	}
	.box ul{
		position: relative;
		z-index: 1;
		width: 980px;
		
	}
	#recent,#supporters{
		z-index: 100;
	}
	#webdesignerdepot{
		z-index: 50;
	}
	#fuelyourcreativity{
		z-index: 40;
	}
	#abduzeedo{
		z-index: 30;
	}
	#latest-tutorials{
		z-index: 1;
	}
	.box li{
		width: 320px;
		min-height: 22px;
		line-height: 22px;
		background: url(../images/bg/link.png) repeat 0 0;
		float: left;
		margin: 0 0 5px 10px;
		padding: 3px 0;
		font-size: 1.2em;
		position: relative;
		z-index: 10;
		font-family: 'Lucida Grande', 'Lucida sans', 'Trebuchet MS', Helvetica, Arial, sans-serif;
	}
	.image_box li{
		padding: 0px;
	}
	.box li.first{
		margin-left: 0;
		clear: left;
	}
	.box li:hover,
	.box li.over{
		background: #f9f9f9 url(../images/bg/link_h.png) repeat 0 0;
		z-index: 100;
	}
	.box li:hover a,
	.box li a:hover,
	.box li.over a{
		color: #ff0060;
	}
	.box li a{
		background: url(../images/ico/arrow_listings.png) no-repeat 100% 50%;
		padding: 0 12px 0 10px;
		float: left;
		text-decoration: none;
	}
	.box li .listing_popup{
		padding: 10px 4px 5px 5px;
		width: 315px;
		background: #201b16;
		color: #99896f;
		border: 1px solid #312720;
		font: 0.8em Arial, Helvetica, sans-serif;
		position: absolute;
		left: -999em;
		z-index: 9999;
		top: 29px;
		visibility: hidden;
	}
	.box li:hover .listing_popup,
	.box li.over .listing_popup{
		left: 25px;
		z-index: 9999;
		visibility: visible;
	}
	.listing_popup_content{
		background: url(../images/bg/popup_top.png) repeat-x 0 0;
		position: relative;
		margin: 0 5px;
		padding: 15px 0px 10px 0px;
		width: 300px;
		z-index: 1000;
	}
	.listing_popup_content p{
		margin: 0 0 10px 110px;

	}
	.no-image p{
		margin-left: 0;
	}
	.listing_popup_content img{
		border: 1px solid #f9f9f9;
		position: absolute;
		left: 0px;
		top: 15px;
	}
	.listing_popup_arrow{
		background: url(../images/bg/popup_arrow.png) no-repeat 0 0;
		position: absolute;
		top: -9px;
		left: 10px;
		width: 16px;
		height: 10px;
	}
	
	.box.narrow{
		width: 320px;
		float: left;
		margin-right: 10px;
		z-index: 1;
	}
	.box.narrow ul{
		width: 320px;
	}
	.box.narrow.last{
		margin-right: 0px;
	}
	.box.narrow li{
		margin-left: 0;
	}
	
	
	.tutorial-box{
		background: url(../images/bg/link.png) repeat 0 0;
		border: 1px solid #231a0d;
		padding: 19px 0 9px 0px;
		width: 978px;
		overflow: hidden;
		clear: left;
	}
	.tutorial-box ul{
		width: 978px;
		overflow: hidden;
	}
	.tutorial-box .wrapper{
		position: relative;
	}
	.tutorial-box li{
		background: none;
		width: 142px;
		margin: 0 0 5px 18px;
		z-index: 1;
	}
	.tutorial-box.flickr-box li{
		background: none;
		width: 75px;
		margin: 0 0 18px 21px;
	}
	.tutorial-box li:hover{
		background: none;
	}
	.tutorial-box li a{
		background: none;
		padding: 0;
	}
	.tutorial-box li a img{
		border: 1px solid #f9f9f9;
	}
	.tutorial-box li a:hover img{
		border-color: #ac0441;
	}
	.tutorial-box.sponsors li a img{
		border: none;
	}
	.tutorial-box.sponsors li a:hover img{
		border-color: transparent;
	}
	.tutorial-box ul.css-websites{
		width: 640px;
		position: relative;
		overflow: hidden;
	}
	.lastest-css-websites{
		float: left;
		width: 640px;
		overflow: hidden;
	}
	.tutorial-box ul.css-websites li{
		margin-bottom: 16px;
	}
	.premium{
		float: right;
		width: 300px;
		height: 285px;
		margin-right: 20px;
	}
	.premium img{
		border: 1px solid #f9f9f9;
	}
	.psd-tuts{
		background: url(../images/brought/psdtuts.png) no-repeat 0 0;
		width: 225px;
		height: 19px;
		float: right;
		margin: 3px 18px 0 0;
		text-indent: -1000em;
	}
	.flickr{
		background: url(../images/brought/flickr.png) no-repeat 0 0;
		width: 205px;
		height: 19px;
		float: right;
		margin: -5px 18px 3px 0;
		text-indent: -1000em;
	}
	.resources{
		background: url(../images/brought/bsa-support.png) no-repeat 0 0;
		width: 215px;
		height: 12px;
		float: right;
		margin: 10px 19px 5px 0;
		text-indent: -1000em;
	}
	.best-web{
		background: url(../images/brought/best-web.png) no-repeat 0 0;
		width: 198px;
		height: 22px;
		float: right;
		text-indent: -1000em;
		margin: -3px 0 0;
		clear: left;
	}
	.premium-space{
		background: url(../images/brought/premiumspace.png) no-repeat 0 0;
		width: 104px;
		height: 12px;
		float: right;
		margin: 15px 0px 0 0;
		text-indent: -1000em;
	}
	.box.half-size{
		width: 480px;
		float: left;
		margin-right: 20px;
	}
	.box.half-size ul{
		width: 480px;
	}
	.box.half-size.last{
		margin-right: 0px;
	}
	
	.half-size li{
		padding: 11px 10px 10px 9px;
		margin: 0 0 5px 0;
		width: 461px;
		color: #2ac6e9;
		font-size: 0.9em;
		line-height: 1.4;
	}
	
	.box.half-size li a{ 
		background: none;
		padding: 0;
		float: none;
	}
	.box.half-size li h3,
	.box.half-size li h3 a{
		color: 	#f3497d;
	
	}
	.box.half-size li h3{
		font-size: 1.3em;
	}
	#flickr{
		clear: left;
	}
/* 2.4	Footer
-----------------------------------------------------------------------------------------------*/	
	#footer{
		clear: both;
		font-size: 1.1em;
		padding: 47px 0 0;
		font-family: Helvetica, Arial, sans-serif;
	}
	#footer p{
		width: 220px;
		line-height: 1.5;
		margin-bottom: 20px;
	}
	#footer .suggestions p{
		width: 210px;
	}
	#footer .copy{
		float: left;
	}
	#footer .site-design{
		float: right;
	}
	#footer .site-design a{
		color: #623f38;
	}
	#footer h2{
		text-indent: -1000em;
		height: 22px;
		width: 185px;
		margin-bottom: 25px;
	}
	#footer .container{
		z-index: 1;	
	}
	.content-box{
		float: left;
		color: #615c53;
		position: relative;
		z-index: 1;
		margin-bottom: 45px;
	}
	.advertise{
		width: 255px;
	}
	.advertise a,
	.suggestions a,
	.about a{
		font-size: 1.2em;
	}
	.advertise h2{
		background: url(../images/titles/advertise.png) no-repeat 0 0;
	}	
	.about{
		width: 267px;
	}
	.about h2{
		background: url(../images/titles/about.png) no-repeat 0 0;
	}
	.suggestions{
		width: 264px;
	}
	.suggestions h2{
		background: url(../images/titles/suggestions.png) no-repeat 0 0;
	}	
	.network{
		width: 190px;
	}
	.network h2{
		background: url(../images/titles/slurp.png) no-repeat 0 0;
	}
	.network li{
		overflow: hidden;
		clear: left;
	}
	.network a{
		text-transform: uppercase;
		float: left;
		padding: 5px 7px;
		position: relative;
	}
	.network a:hover{
		background: #f9f9f9;
		color: #f3497d;
	}
	
	.network_logos{
		width: 980px;
		overflow: hidden;
		clear: both;
	}
	.network_logos li{
		float: left;
		width: 160px;
	}	
	.network_logos li.envira{
		width: 180px;
	}
	.network_logos li.envira a{
		width: 131px;
		height: 20px;
		background: url(../images/titles/envira_media_logo.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
	}
	.network_logos li.slurp a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/design_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li.apple a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/apple_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li.earth a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/earth_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li.green a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/green_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li.pop a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/pop_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li.tweet a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/tweet_slurp_small.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 0px;
		}
	.network_logos li a{
		width: 132px;
		height: 24px;
		background: url(../images/titles/design_slurp_small_shade.png) no-repeat 0 0;
		display: block;
		text-indent: -1000em;
		margin-left: 15px;
	}