/* -

	WebSweet.ca

	- CHDS 2008

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

/* colours


--- */

@import url("text.css");		/* text styles */
@import url("forms.css");  		/* form styles */

/* universal
--------------------- */
body {
	font-size: 100%;
	background: #094050;
	}
body.maintenance {
	background: #fff;
	}

#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; }


/* structure/layout
--------------------- */
#container {
	margin: 0 auto;
	width: 100%;
	background: transparent;
	}
	
#header img {
	width: 27%;
    margin: 0; padding: 0px 0px 0px 0px;				
}
						
#header {
	margin: 0 auto; padding: 0;
	width: 100%; height: 128px;
	background: transparent url("../images/bg-header.jpg") repeat-x top center;
	}
	#header_content {
		margin: 0 auto;
		width: 850px;
		position: relative;
		}
	#header_content h1 {
		margin: 0; padding: 0;
		position: absolute;
		top: 37px; left: -20px;
		}
		#header_content h1 a {
			margin: 0; padding: 0;
			display: block;
			border: none; text-decoration: none;
			}
			#header_content h1 a span {
				display: block;
				}

#masthead {
	margin: 0 auto; padding: 0;
	width: 100%; height: 100px;
	background: transparent url("../images/bg-masthead-content.jpg") repeat-x top center;
	text-align: left;
	position: static;
	}
	#masthead_content {
		margin: 0 auto; padding: 20px 0 0 0;
		width: 784px;
		}
		#masthead_content img#section_title {
			margin: 0; padding: 0;
			float: left;
			}
		#masthead_content #sign_up_button {
			margin: 0; padding: 5px 10px 0 0;
			background: transparent url("../images/") no-repeat top center;
			width: 330px; height: 66px;
			display: block;
			float: right;
			}
			#masthead_content #sign_up_button p { color: #666; font-size: 11px; float: left; width: 140px; padding: 10px 0 0 0; }
			#masthead_content #sign_up_button em { font-style: normal; color: #fff; }

			#masthead_content #sign_up_button a {
				margin: 0 auto;
				background: transparent url("../images/button-signup.png") no-repeat top center;
				width: 173px; height: 49px;
				display: block;
				float: right;
				}
			#masthead_content #sign_up_button a:hover {
				background: transparent url("../images/button-signup.png") no-repeat 0 -49px;
				}
				#masthead_content #sign_up_button a span { display: none; }


		/* home page masthead
		.home #masthead {
			margin: 0 auto; padding: 0;
			width: 100%; height: 247px;
			background: transparent url("../images/bg-masthead-content.jpg") repeat-x top center;
			text-align: left;
			position: relative;
			}
			.home #masthead_content {
				margin: 0 auto; padding: 20px 0 0 0;
				width: 784px;
				}
				.home #masthead_content #screen {
					margin: 0; padding: 0;
					display: block;
					width: 420px; height: 320px;
					float: left; overflow: hidden;
					background: transparent url("../images/screen-trans.png") no-repeat top center;
					}
					.home #masthead_content #screen img {
						margin: 0; padding: 24px 0 0 30px;
						display: none;
						}
					.home #masthead_content #screen img:last-child {
						display: block;
						}
				.home #masthead_content #ws_intro {
					margin: 0; padding: 0 0 0 15px;
					width: 320px; height: 190px;
					float: left;
					}
					.home #masthead_content #ws_intro img { padding: 3px 0 0 10px; }
					*/

#sub_container {
	margin: 0 auto; padding: 0;
	width: 100%;
	background: #fff url("../images/bg-content.png") repeat-x top center;
	border-top: 6px solid #126783;
	border-bottom: 6px solid #126783;
	}

	/* home page features
	#features {
		margin: 0 auto 20px auto; padding: 40px 0 0 0;
		width: 784px;
		clear: both;
		text-align: left;
		}
		#features #feature_1 div.article,
		#features #feature_2 div.article,
		#features #feature_3 div.article {
			margin-bottom: 10px; padding: 0 30px 0 20px;
			float: left;
			border: none !important;
			}
	#sub_container #features #feature_1 { display: block; width: 260px; padding: 0; float: left; position: relative; background: transparent url("../images/sidebar-divider.png") no-repeat top right; }
	#sub_container #features #feature_2 { display: block; width: 260px; padding: 0; float: left; position: relative; background: transparent url("../images/sidebar-divider.png") no-repeat top right; }
	#sub_container #features #feature_3 { display: block; width: 260px; padding: 0; float: left; position: relative; }
	*/

/* content layouts
--------------------- */

	#content {
		margin: 0 auto; padding: 40px 0 30px 0;
		width: 784px;
		}
	/* default - 2 col wide left + sidebar */
	#main_content {
		margin: 0 auto; padding: 0;
		width: 500px; min-height: 300px;
		float: left;
		text-align: left;
		position: relative;
		}
		#main_content div.article {
			clear: both;
			margin-bottom: 10px;
			}
	#sidebar {
		margin: 0 0 10px 0; padding: 0 20px 0 40px;
		width: 200px; height: auto;
		float: right;
		text-align: left;
		position: relative;
		background: transparent url("../images/sidebar-divider.png") no-repeat top left;
		}
		#sidebar img.border { margin: 0; padding: 0; }

	/* 1 col wide */
	#one_col #main_content { width: 784px; }
	/* 2 col even */
	#two_col_even #main_content { width: 360px; }
	#two_col_even #sidebar { width: 360px; }
	/* 2 col sidebar + wide right */
	#two_col_left_sidebar #main_content { width: 200px; }
	#two_col_left_sidebar #sidebar { width: 500px; }

/* footer
--------------------- */

#footer {
    margin: 20px auto 0 auto; padding: 0 0 60px 0;
	width: 960px; height: auto;
	clear: both;
	position: relative;
	}
	#footer p {
		margin: 0; padding: 0;
		width: auto;
		position: absolute;
		left: 80px; top: 0;
		}
	#footer a.powered-by {
		position: absolute;
		margin: 0; padding: 0;
		right: 0; top: 0;
		left:650px;
		/*width: 221px;*/
		background: transparent;
		}
		#footer a#poweredby img { position: absolute; float: right; }
	    #footer a#poweredby:hover {
		  border: 1px solid #333;
	    }


/* main navigation
--------------------- */
#nav {
	margin: 0; padding: 0;
	width: auto; height: 50px;
	display: block;
	position: absolute;
	top: 90px; right: 10px;
	z-index: 2;
	}

/* main nav on content pages */

#nav ul {
	margin: 0; padding: 0;
	list-style-type: none;
	width: auto; height: auto;
	text-align: right;
	background: transparent;
	}
	#nav li {
		margin: 0; padding: 0;
		text-align: center;
		width: auto; height: auto;
		float: left;
		}
	#nav li:first-child { background: none; }

	#nav li a {
		margin: 10px 0 0 20px; padding: 0 0 10px 0;
		display: block;
		text-align: center;
		width: auto; height: auto;
    	}
    	#nav li a span {  }


/* vertical sub nav
--------------------- */

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

#container div#nav li { position: relative; }
#container div#nav li a { display: block; }

#container div#nav ul li ul,
#container div#nav ul li ul li ul {
	margin: 0; padding: 0;
	border: none;
	width: 200px; height: auto;
	border-top: 1px solid #23292e;
	border-bottom: 1px solid #2a3037;
	border-left: 1px solid #23292e !important;
	border-right: 1px solid #23292e !important;
	background: transparent url("../images/bg-masthead-content.jpg") no-repeat top center;
	-moz-box-shadow: 0 0 10px #111;
	-webkit-box-shadow: 0 0 10px #111;
	}

#container div#nav ul li ul li,
#container div#nav ul li ul li ul li {
	margin: 0; padding: 0;
	text-align: left;
	height: 30px; width: auto;
	float: left;
	background: none;
	}
	#container div#nav ul li ul li:hover,
	#container div#nav ul li ul li ul li:hover {
		}

#container div#nav ul li ul li a,
#container div#nav ul li ul li ul li a {
	margin: 0;	padding: 7px 15px 0 15px;
	display: block;
	position: relative;
	width: 170px; height: 30px;
	text-align: left;
	background: none;
	}

#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;
	top: 30px;
	left: 0;
	z-index: 6000;
	}
	#container div#nav ul ul li:hover ul {
		display: block;
		position: absolute;
		width: auto;
		top: -1px;
		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;
			}

/* anchors
--------------------- */
#container a img { border: none; }
#container #sidebar a { border: none; }

#nav a:link 		{ color: #ddd; text-decoration: none; }
#nav a:visited 		{ color: #ddd; text-decoration: none; }
#nav a:hover 		{ color: #6bc2e3; text-decoration: none; }
#nav a:active 		{ color: #237a9b; text-decoration: none; }

	/* required to cancel current_page style of parent ul */
	#nav ul li ul li a:link 		{ color: #ddd; text-decoration: none; }
	#nav ul li ul li a:visited 		{ color: #ddd; text-decoration: none; }
	#nav ul li ul li a:hover 		{ color: #6bc2e3; text-decoration: none; }
	#nav ul li ul li a:active 		{ color: #237a9b; text-decoration: none; }

#content a:link 	{ color: #000; text-decoration: underline; }
#content a:visited 	{ color: #000; text-decoration: underline; }
#content a:hover 	{ color: #ffffff; text-decoration: underline; }
#content a:active 	{ color: #000; text-decoration: underline; }

#sub_container a:link 		{ color: #000; text-decoration: underline; }
#sub_container a:visited 	{ color: #000; text-decoration: underline; }
#sub_container a:hover 		{ color: #666; text-decoration: underline; }
#sub_container a:active 	{ color: #999; text-decoration: underline; }

/* green */
#footer .l1 a:link 		{ color: #689f33; text-decoration: underline; }
#footer .l1 a:visited 	{ color: #689f33; text-decoration: underline; }
#footer .l1 a:hover 	{ color: #90bc65; text-decoration: underline; }
#footer .l1 a:active 	{ color: #537c2c; text-decoration: underline; }
/* blue */
#footer .l2 a:link 		{ color: #3e97b9; text-decoration: underline; }
#footer .l2 a:visited 	{ color: #3e97b9; text-decoration: underline; }
#footer .l2 a:hover 	{ color: #6bc2e3; text-decoration: underline; }
#footer .l2 a:active 	{ color: #237a9b; text-decoration: underline; }

a:focus {
	outline: none;
	}

#nav ul li.current_page a { color: #3e97b9; font-weight: lighter; }

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

#ws_loading { background: transparent; padding: 4px; }

/* img border default colour */
#main_content img, #sidebar img { border-color: #6bc2e3 !important; }


/* tables
--------------------- */
#content table {
	margin: 0 0 25px 0; padding: 0;
	width: 100%;
	}
#content table thead tr td {
	padding: 15px 0 4px 10px;
	background: #fff url("../images/divider-horizontal.png") no-repeat bottom left;
	}

#content table tbody tr.odd td {
	background: #f7fcfd;
	}
	#content table tbody tr:first-child td {
		border-top: none;
		}
#content table tbody tr td {
	margin: 0; padding: 4px 0 4px 10px;
	border-top: 1px solid #e7f3f7;
	border-left: 1px solid #e7f3f7;
	width: 90px;
	}
	#content table tbody tr td:first-child {
		width: auto;
		border-left: none;
		}

	#content table tbody tr:hover td {
		background: #ecf6f9;
		}

/* pricing grid */
#content table.pricing_grid tbody tr:first-child td {
	padding: 6px 0 6px 10px;
	}

/* breadcrumbs
--------------------- */
#breadcrumbs {
	margin: 0 0 10px 0;
	clear: both;
	}