/* -

	WebSweet.ca

	- CHDS 2008

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

/* 0 - colours

	
--- */

@import url("text.css");		/* text styles */
@import url("forms.css");  		/* form styles */
	
/* 1 - universal
--------------------- */
body {
	font-size: 100%;
	background: #000;
	background: #070f16; /* blue */
	}

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

/* alerts
--------------------- */
#container div.error_message { 
	margin: 5px 0 5px 0; padding: 10px 10px 5px 40px;
	border: 1px solid #e1b2b2;
	background: #ffeeee url("../images/error.png") no-repeat 10px 7px;
	}
	#container div.error_message h4 { color: #c93636; font-size: 16px; border: none; text-align: left; padding: 0; margin: 0 0 10px 0; font-weight: bolder; }
	#container div.error_message p 	{ color: #c93636; font-size: 12px; margin-bottom: 5px; }
	
#container div.positive_message { 
	margin: 5px 0 5px 0; padding: 10px 10px 5px 40px;
	border: 1px solid #b9dcad;
	background: #ebf8e5 url("../images/accept.png") no-repeat 10px 7px;
	}
	#container div.positive_message h4 { color: #4a6f3d; font-size: 16px; border: none; text-align: left; padding: 0; margin: 0 0 10px 0; font-weight: bolder; }
	#container div.positive_message p 	{ color: #4a6f3d; font-size: 12px; margin-bottom: 5px; }


/* 2 - structure/layout
--------------------- */
#container {
	margin: 0 auto;
	width: 100%;
	background: transparent;
	}

#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: 30px; left: 0;
		}
		#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") no-repeat top center;
	text-align: left;
	position: relative;
	}
	#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") no-repeat 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.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; min-height: 190px;
					float: left;
					position: relative;
					}
					.home #masthead_content #ws_intro img { padding: 3px 0 0 10px; }
			
		/* home page demo button */
		#masthead_content #demo_button {
			margin: 0; padding: 17px 0 0 0;
			background: transparent url("../images/demo-bg-trans.png") no-repeat top center;
			width: 272px; height: 66px;
			display: block;
			float: left;
			}
			#masthead_content #demo_button a {
				margin: 0 0 0 26px;
				background: transparent url("../images/button-demo.png") no-repeat top center;
				width: 227px; height: 49px;
				display: block;
				}
			#masthead_content #demo_button a:hover {
				background: transparent url("../images/button-demo.png") no-repeat 0 -49px;
				}
				#masthead_content #demo_button a span { display: none; }

		/* home page sign up button */
		#features #sign_up_button {
			margin: 0 auto; padding: 20px 0 10px 0;
			background: transparent url("../images/signup-bg.png") no-repeat top center;
			width: 100%; height: 64px;
			display: block;
			clear: both;
			}
			#features #sign_up_button a {
				margin: 0 auto;
				background: transparent url("../images/button-signup.png") no-repeat top center;
				width: 173px; height: 49px;
				display: block;
				}
			#features #sign_up_button a:hover {
				background: transparent url("../images/button-signup.png") no-repeat 0 -49px;
				}
				#features #sign_up_button a span { display: none; }
				

#sub_container {
	margin: 0 auto; padding: 0;
	width: 100%;
	background: #fff url("../images/bg-content.png") repeat-x top center;
	border-top: 6px solid #181f22;
	border-bottom: 6px solid #181f22;
	}
	
	/* home page features */
	#features {
		margin: 100px auto 10px auto; padding: 0;
		width: 784px; 
		clear: both;
		text-align: left;
		position: relative;
		}
		#features div.article {
			margin-bottom: 10px; padding: 0 30px 0 20px;
			float: left;
			}
	#sub_container #features #feature_1 { width: 260px; padding: 0; float: left; position: relative; background: #fff url("../images/feature-divider.png") no-repeat top right; }
	#sub_container #features #feature_2 { width: 260px; padding: 0; float: left; position: relative; background: #fff url("../images/feature-divider.png") no-repeat top right; }
	#sub_container #features #feature_3 { width: 260px; padding: 0; float: left; position: relative; }
	
	#features div img.feature_icon {
		margin: 0; padding: 0;
		position: absolute;
		left: 15px; top: 0;
		}
	
	/* content pages */
	#content { 
		margin: 0 auto; padding: 40px 0 30px 0;
		width: 784px; 
		}
	#main_content {
		margin: 0 auto; padding: 0;
		width: 500px; min-height: 300px;
		float: left;
		text-align: left;
		position: relative;
		}
	.wide #main_content {
		margin: 0 auto; padding: 0;
		width: 784px; min-height: 300px;
		float: left;
		text-align: left;
		position: relative;
		}
		#main_content div.article {
			clear: both;
			margin-bottom: 20px;
			}
			
	#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;
			}
		#sidebar div.article { margin-bottom: 10px; }
		
		#sidebar #cta {
			margin-bottom: 25px;
			width: 184px; height: 202px;
			overflow: hidden;
			display: block;
			}
	
#footer {
	margin: 0 auto 0 auto; padding: 20px 0 0 0;
	width: 100%; height: 100px;
	background: transparent url("../images/bg-footer.jpg") repeat-x top center;
	clear: both;
	}
	#footer_content {
		margin: 0 auto;
		position: relative;
		width: 784px;
		}
		#footer_content p {
			margin: 0 auto;
			}
		#footer_content p.l2 { margin: 10px 0 0 0; padding-top: 10px; width: 71%; border-top: 1px solid #232323; }
		#footer_content a#poweredby {
			margin: 0; padding: 0;
			width: 221px;
			position: absolute;
			right: 0; top: 0;
			background: transparent;
			border: 1px solid #222;
			}
			#footer_content a#poweredby img { margin: 0; padding: 0; float: right; }
		#footer_content a#poweredby:hover {
			border: 1px solid #333;
			}
		#footer p.l2 { color: #777; }

/* omni nav
--------------------- */
#omni_nav {
	margin: 0 auto; padding: 15px 12px 0 0;
	text-align: right;
	}
	#omni_nav a:first-child { border-right: 1px solid #333; padding: 0 10px 0 0; margin: 0 8px 0 0; }
	
/* 3C - main navigation
--------------------- */
#nav {
	margin: 0; padding: 0;
	width: auto; height: 50px;
	display: block;
	position: absolute;
	top: 40px; right: 0;
	z-index: 2;
	}

/* main nav on content pages */

#nav ul {
	margin: 0; padding: 0;
	list-style-type: none;
	width: auto; height: 50px;
	text-align: right;
	background: transparent; 
	}
	#nav li {
		margin: 0; padding: 0;
		text-align: center;
		width: auto; height: 50px;
		float: left;
		/* background: transparent url("../images/nav-divider.png") no-repeat top left; */
		}
	#nav li:first-child { background: none; }
	#nav li:last-child 	{ /*background: none;*/ }


	#nav li a {
		margin: 10px 0 0 0; padding: 0;
		display: block;
		text-align: center;
		width: 50px; height: 33px;
    	}
    	#nav li a span { display: none; }
    	
	#nav li.demo a 		{ width: 77px; background: transparent url("../images/nav-demo.png") no-repeat 0 0; }
	#nav li.features a 	{ width: 97px; background: transparent url("../images/nav-features.png") no-repeat 0 0; }
	#nav li.benefits a 	{ width: 97px; background: transparent url("../images/nav-benefits.png") no-repeat 0 0; }
	#nav li.pricing a 	{ width: 86px; background: transparent url("../images/nav-pricing.png") no-repeat 0 0; }
	#nav li.custom a 	{ width: 152px; background: transparent url("../images/nav-custom.png") no-repeat 0 0; }
	#nav li.news a 		{ width: 74px; background: transparent url("../images/nav-news.png") no-repeat 0 0; }

	#nav li.demo:hover a 		{ background: transparent url("../images/nav-demo.png") no-repeat 0 -33px; }
	#nav li.features:hover a 	{ background: transparent url("../images/nav-features.png") no-repeat 0 -33px; }
	#nav li.benefits:hover a 	{ background: transparent url("../images/nav-benefits.png") no-repeat 0 -33px; }
	#nav li.pricing:hover a 	{ background: transparent url("../images/nav-pricing.png") no-repeat 0 -33px; }
	#nav li.custom:hover a 		{ background: transparent url("../images/nav-custom.png") no-repeat 0 -33px; }
	#nav li.news:hover a 		{ background: transparent url("../images/nav-news.png") no-repeat 0 -33px; }

	#nav li.demo:active a 		{ background: transparent url("../images/nav-demo.png") no-repeat 0 -32px; opacity: 0.7; }
	#nav li.features:active a 	{ background: transparent url("../images/nav-features.png") no-repeat 0 -32px; opacity: 0.7; }
	#nav li.benefits:active a 	{ background: transparent url("../images/nav-benefits.png") no-repeat 0 -32px; opacity: 0.7; }
	#nav li.pricing:active a 	{ background: transparent url("../images/nav-pricing.png") no-repeat 0 -32px; opacity: 0.7; }
	#nav li.custom:active a 	{ background: transparent url("../images/nav-custom.png") no-repeat 0 -32px; opacity: 0.7; }
	#nav li.news:active a 		{ background: transparent url("../images/nav-news.png") no-repeat 0 -32px; opacity: 0.7; }
	
	#nav li[class~="current_page"] a 	{ background-position: 0 -33px; opacity: 0.7; }

/* 3B - pop-out sub-menu
--------------------- */
#nav ul li ul,
#nav ul li ul li ul { display: none; }


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

#nav a:link 		{ color: #444; text-decoration: none; }
#nav a:visited 		{ color: #444; text-decoration: none; }
#nav a:hover 		{ color: #46c5de; text-decoration: none; }
#nav a:active 		{ color: #444; text-decoration: none; }

/* omni nav */
#omni_nav a:link 		{ color: #3e97b9; text-decoration: none; }
#omni_nav a:visited 	{ color: #3e97b9; text-decoration: none; }
#omni_nav a:hover 		{ color: #6bc2e3; text-decoration: none; }
#omni_nav a:active 		{ color: #237a9b; text-decoration: none; }
#omni_nav a.current_page { color: #1d6b88; text-decoration: none; }
class="current_page"

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

#footer a:link 		{ color: #555; text-decoration: underline; }
#footer a:visited 	{ color: #555; text-decoration: underline; }
#footer a:hover 	{ color: #999; text-decoration: underline; }
#footer a:active 	{ color: #ddd; 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;
	}


/* 7 - 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;
	}

/* showcase grid */
#container #content table#showcase_grid tbody tr td {
	background: transparent;
	}
	#container #content table#showcase_grid tbody tr td {
		border: none;
		width: 150px; height: 110px;
		}
	

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