/* -

	WebSweet

	211 Interactive
	- CHDS 2008

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

/* 0 - colours

	
--- */

@import url("text.css");		/* text styles */
@import url("forms.css");  		/* form styles */
	
/* 1 - universal
--------------------- */
body { 
	font-size: 100%; 
	background: #0e1114 url("/images/bg-grate.png") repeat-x center top;
	}

#container {
	font-size: 62.5%;
	}
body, h1, h2, h3, ul, li, a, hr, div, img, table, form, fieldset { 
	margin: 0; padding: 0;
	}
hr {
	visibility: hidden;
	clear: both;
	}
.hide { display: none; }


/* 2 - structure/layout
--------------------- */

	/* border */
	#nav, #masthead, #sub_container, #footer {
	border-left: 3px solid #0d1013;
	border-right: 3px solid #0d1013;
	}
	#footer { border-bottom: 3px solid #0d1013; }
	
#container {
	margin: 0 auto;
	width: 100%;
	background: transparent;
	}

#header {
	margin: 0 auto; padding: 0;
	width: 850px; height: 60px;
	position: relative;
	}
	#header h1 {
		margin: 0; padding: 0;
		position: absolute;
		top: 10px; left: 20px;
		}
		#container #header h1 a {
			margin: 0; padding: 0;
			display: block;
			border: none; text-decoration: none;
			}
			#container #header h1 a span {
				display: block;
				}
	#header a.client-login {
		position: absolute;
		top: 0; right: 20px;
		}
#masthead {
	margin: 0 auto; padding: 0;
	width: 850px; height: 114px;
	position: relative;
	background: #fff;
	text-align: left;
	}
	.home #masthead { background: transparent; height: 285px; }
	#masthead p { margin: 0; padding: 0; }
	#masthead img {
		margin: 0;
		}

#content {
	margin: 0 auto; padding: 0;
	width: 850px;
	clear: both;
	position: relative;
	background: #292e31;
	}
#sub_container {
	margin: 0 auto; padding: 0 40px;
	width: 770px;
	background: #292e31 url("/images/masthead-shadow.png") repeat-x top left;
	}
.home #sub_container {
	margin: 0 auto; padding: 0;
	width: 850px;
	background: #292e31 url("/images/masthead-shadow.png") repeat-x top left;
	}
	#main_content {
		margin: 40px 0 30px 0; padding: 0;
		width: 500px; 
		float: left;
		text-align: left;
		position: relative;
		}
		#main_content div.article {
			clear: both;
			margin-bottom: 10px;
			}
	#sidebar {
		margin: 40px 0 30px 0; padding: 0;
		width: 225px; height: auto;
		float: right;
		text-align: left;
		position: relative;
		}
		#sidebar .article {
			width: 92%;
			}
		#sidebar img.border {
			margin: 0; padding: 0;
			}
	
#footer {
	margin: 0 auto 10px auto; padding: 0;
	width: 850px; height: 100px;
	background: #1c1f23 url("/images/footer-border.png") no-repeat top center;
	clear: both;
	position: relative;
	}
	.home #footer { background: #1c1f23; }
	#footer p {
		margin: 0 auto; padding: 20px 0 20px 20px;
		width: 350px;
		position: absolute;
		top: 15px; right: 0;
		background: transparent url("/images/divider-dark.png") no-repeat center left;
		}
		#footer img {
			margin: 22px 0 -3px 20px;
			float: left;
			}
	#container #footer ul#partners {
		margin: 0; padding: 0;
		width: 453px; height: 56px;
		position: absolute;
		left: 20px; top: 22px;
		list-style-type: none;
		list-style-image: none;
		background: transparent url("/images/partners.png") no-repeat top left;
		}
		#container #footer ul#partners li { margin: 0; padding: 0; float: left; width: auto; }
		#footer ul#partners li a { display: block; height: 50px; background: transparent; margin-right: 5px; opacity: 0.5; }
		#footer ul#partners li.sony a { width: 90px; }
		#footer ul#partners li.hd a { width: 50px; }
		#footer ul#partners li.quicktime a { width: 50px; }
		#footer ul#partners li.flash a { width: 60px; }
		#footer ul#partners li.apple a { width: 60px; }
		#footer ul#partners li.finalcut a { width: 110px; }
		
		#footer ul#partners li a span { display: none; }
		
		
/* 2B - home page
--------------------- */
#sub_container #intro { 
	margin: 0 auto; padding: 0;
	width: 700px;
	position: relative;
	}
#sub_container #intro div.article {
	margin: 0; padding: 50px 0 0 0;
	width: 420px;
	}
#sub_container #intro a.clapper {
	margin: 0; padding: 0;
	position: absolute;
	top: -35px; right: 0;
	z-index: 10;
	}
#sub_container #features {
	margin: 30px auto 20px auto; padding: 0; padding-left: 75px;
	width: 850px; height: 207px;
	position: relative;
	background: transparent url("/images/bg-glow-feature.png") no-repeat center left;
	}
#sub_container #features div { margin: 20px 0 0 0; }
#sub_container #features #feature_1 { width: 175px; padding: 0; float: left; position: relative; }
#sub_container #features #feature_2 { width: 175px; padding: 0; float: left; position: relative; }
#sub_container #features #feature_3 { width: 175px; padding: 0; float: left; position: relative; }
#sub_container #features img.feature-divider { margin: 70px 20px 0 20px; float: left; }


#sub_container #extras {
	width: 850px; height: auto;
	position: relative;
	background: transparent url("/images/bg-glow-bottom.png") no-repeat bottom left;
	}
	#sub_container #extras img.full-service { margin: 20px 0 0 20px; float: left; }
	#sub_container #extras div.article { margin: 50px 0 0 0; padding-left: 30px; float: left; width: 250px; }
	#sub_container #extras img.deco { margin: 0 60px 10px 0; float: right; }
	
	
/* 3C - main navigation
--------------------- */

#nav {
	margin: 0 auto; padding: 0;
	width: 850px; height: 56px;
	display: block; clear: both;
	background: #0e1114 url("/images/nav-bg.png") repeat-x center left;
	}
#nav ul {
	margin: 0; padding: 0 20px 0 0;
	list-style-type: none;
	width: auto; height: 56px;
	text-align: right;
	float: right;
	background: transparent; 
	}
	#nav li {
		margin: 0; padding: 0;
		text-align: center;
		height: 56px; width: auto;
		float: left;
		border-bottom: none;
		background: transparent;
		white-space: nowrap;
		background: transparent url("/images/nav-divider.jpg") repeat-y top left;
		}
	.home #nav li:first-child { display: none !important; }
	#nav li:hover {
		background: transparent url("/images/nav-divider.jpg") repeat-y top left;
		}
		#nav li a {
			margin: 0; padding: 20px 15px;
			height: 20px;
			text-align: center;
			width: auto; height: auto;
	    	}

/* sub nav */
#sub_nav { 
	width: 200px;
	}
	#sub_nav ul {
		margin: 0 0 20px 0; padding: 0 0 15px 0;
		list-style-type: none !important;
		list-style-image: none !important;
		background: transparent url("/images/sub-nav-bg-trans.png") repeat-y top left;
		}
		#sub_nav ul li {
			margin: 0; padding: 10px 0 10px 15px;
			background: transparent url("/images/sub-nav-item-trans.png") no-repeat 1px 0;
			clear: both;
			}



/* 3B - pop-out sub-menu
--------------------- */

#nav ul li ul,
#nav ul li ul li ul { display: none; }

#container div#nav li { display: block; position: relative; }
#container div#nav li a { display: block; }
/*
#container div#nav ul li ul,
#container div#nav ul li ul li ul {
	padding: 15px 0 15px 0;
	border: none;
	width: 200px; height: auto;
	border: 1px solid #ddd;
	background: #fff;
	}
	
#container div#nav ul li ul li,
#container div#nav ul li ul li ul li {
	margin: 0; padding: 0;
	width: 200px; 
	float: left;
	height: auto;
	border: none;
	text-align: left;
	background: none;
	}
	#container div#nav ul li ul li:hover,
	#container div#nav ul li ul li ul li:hover {
		background: transparent;
		}
		
#container div#nav ul li ul li a,
#container div#nav ul li ul li ul li a {
	margin: 0;	padding: 5px 10px 0 10px;
	display: block;
	position: relative;
	width: 180px;
	text-align: left;
	border-bottom: 1px solid #fff;
	}
	
	#container div#nav ul li ul li a:hover,
	#container div#nav ul li ul li ul li a:hover {  }
	#container div#nav ul li ul li span,
	#container div#nav ul li ul li ul li span {
		width: auto;
		background: none;
		}

#container div#nav ul ul, 
#container div#nav ul ul ul, 
#container div#nav ul ul ul ul {
	position: relative;
	z-index: 6000;
	}

#container div#nav ul li:hover ul ul, 
#container div#nav ul ul li:hover ul ul, 
#container div#nav ul ul ul li:hover ul ul { display: none; }

#container div#nav ul ul li:hover, 
#container div#nav ul ul ul li:hover { 
	background: transparent;
	border: none;
	}

#container div#nav ul li:hover ul {
	display: block;
	position: absolute;
	width: 200px;
	top: 30px;
	left: -50px;
	z-index: 6000;
	}
#container div#nav ul ul li:hover ul {
	display: block;
	position: absolute;
	width: auto;
	top: -16px;
	left: 200px;
	z-index: 6000;
	}
#container div#nav ul ul ul li:hover ul {
	display: block;
	position: absolute;	
	width: auto;
	top: 0;
	left: 200px;
	z-index: 6000;
	}
*/

/* 4 - anchors
--------------------- */

#container a img { border: none; }
#container #sidebar a { border: none; }

#nav a:link { color: #243a51; text-decoration: none; }
#nav a:visited { color: #243a51; text-decoration: none; }
#nav a:hover { color: #b7124e; text-decoration: none; }
#nav a:active { color: #7c022f; text-decoration: none; }

#sub_container a:link { color: #c52761; text-decoration: underline; }
#sub_container a:visited { color: #c52761; text-decoration: underline; }
#sub_container a:hover { color: #fff; text-decoration: underline; }
#sub_container a:active { color: #971243; text-decoration: underline; }

#sub_nav a:link { color: #c52761; text-decoration: none; }
#sub_nav a:visited { color: #c52761; text-decoration: none; }
#sub_nav a:hover { color: #fff; text-decoration: none; }
#sub_nav a:active { color: #971243; text-decoration: none; }

#footer a:link { color: #46c5de; text-decoration: underline; }
#footer a:visited { color: #46c5de; text-decoration: underline; }
#footer a:hover { color: #999; text-decoration: underline; }
#footer a:active { color: #46c5de; text-decoration: underline; }

a:focus {
	outline: none;
	}
#nav li.current_page a { color: #b7124e; }
#sub_nav li.current_page { background: transparent url("/images/sub-nav-item-selected-trans.png") no-repeat 1px 0; }
#sub_nav li.current_page a { color: #fff; }


/* 7 - images
--------------------- */

img.arrow-small { margin: -3px 0 -6px 0; }

/* x - powered by
--------------------- */
a.powered-by { margin: 0 auto 40px auto; display: block; width: 850px; height: auto; text-align: right; }
a.powered-by img { }

/* x - ajax loader
--------------------- */
span#please_wait { 
	margin: 0 0 0 -25px; padding: 0;
	display: block; 
	background: #fff url("/images/websweet/ajax-loader.gif") no-repeat center center;
	position: absolute;
	right: 10px; top: 10px;
	border: 4px solid #262626;
	width: 50px; height: 50px; 
	z-index: 50000;
	}