/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/plugins/tabs.css";

/* Page
-------------------------------------------------------------- */

#page { margin: 0 auto; width: 950px; }



/* Alert  
---------------------------------------------------------------*/
#alert {
	margin-top: 10px;
	background-color: #fff6bf;
	padding: 5px;
	font-weight: bold;
	font-family: Tahoma;
	line-height: 1.3em;
	border: 2px solid #ffd324;
}
#alert a {	color: #0985b4; }
#alert a:hover {	color: #0496cd; }
#alert li {	padding: 5px 0px; }
#alert ul { float: left; padding-left: 20px; }

/* Header
-------------------------------------------------------------- */

#header { 
	height: 74px;
}

#header .logo {
	float: left;
	display: inline;
	margin-top: 9px;
}

#header .links {
	margin-top: 15px;
	float: right;
	text-align: right;
}

#header ul {
	list-style: none;
}

#header li {
	float: left;
	display: inline;
	margin-left: 15px;
}

#header li a {
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
}

#header li a:hover {color:#aec8ed; text-decoration: none;}

#header .tabs { border-bottom: 1px solid #ddd; }
#header .tabs li { margin-right: 1px; }
#header .tabs a { padding: 5px 15px; background: #ddd; color: #666; text-decoration: none; }


/* Backgrounds
-------------------------------------------------------------- */

.top_heavy, .regular {
	background-position: top left;
	background-repeat: repeat-x;
	background-color: #fbfbfb;	
}
.top_heavy {background-image: url('../img/backgrounds/main.png');}
.regular {background-image: url('../img/backgrounds/regular.png');}

#introduction { float: left; width: 480px; margin-right: 130px; }

#resources { float: left; width: 230px; }
#resources h3 { color: #888; }
#resources ul, #resources ol { color: #888; }
#resources ul a { color: #555; }

/* Containers
-------------------------------------------------------------- */
.wave {
	border: 1px solid #c4c6c7;
	background-color: #fff;
	background-image: url('../img/backgrounds/waves.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	min-height: 280px;
	padding: 10px;
	margin: 4px 0px 20px 0px;
}

.wave .copy {
	float: left;
	display: inline;
	width: 470px;
}

.darkbox {
	background-color: #f1f1f1;
	padding: 15px 20px;
	margin-bottom: 15px;
}

.half {
	float: left;
	display: inline;
	width: 48%;
	margin-right: 2%;
}


.features {
	float: left;
	display: inline;
	border-right: 1px solid #c4c6c7;
}

.features .feature {
	float: left;
	display: inline;
	width: 315px;
	margin-right: 20px;
}

.features .feature h3 {
	float: left;
	display: inline;
	margin: 5px 0px 0px 5px;
}

.features .row, .darkbox .row {margin-bottom: 20px;}

.last {
	margin: 0px;
	padding: 0px;
}

.provides {
	float: left;
	display:inline;
	width: 250px;
	margin-left: 20px;
}

.simple_formbox {
	display: inline;
	float: left;
	margin: 10px 0px;
	width: 660px;
	padding: 10px;
	background-color: #333537;
	color: #ffffff;	
}
		/* Sub-division (indenting twice for a new organizational trend)
		-------------------------*/	
		
		.simple_formbox div {
			padding: 8px;
			background-color: #7D8FAA;
		}
		
		.simple_formbox input[type="submit"] {
			background-color: #F3F3F3;
			color: #000000;
			border: 4px solid #333537;
		}
		
		.simple_formbox textarea {
			font-size: 12px;
			width: 600px;
			height: 250px;
			overflow: auto;
		}
		
		.simple_formbox input[type="text"] {
			padding: 5px;
			width: 250px;
		}
		
		.simple_formbox input[type="password"] {
			padding: 5px;
			width: 250px;
		}
		
.stylish_list {
	float: left;
	display: inline;
	width: 680px;
}
		/*Notice the shorter dashed line.
		---------------------------*/
		
		.stylish_list div {
			padding: 5px;
			border: .5px solid #1A1D23;
		}
		
		.stylish_list .one {
			background-color: #7A8CA5;
			color: #ffffff;
		}
		
		.stylish_list .two {
			background-color: F3F3F3;
			color: #000000;
		}
		
		.stylish_list td {
			width: 100px;
			border: .5px solid #1A1D23;
			padding: 10px;
			text-align: center;
		}
		
.side_fill {
	float: left;
	display: inline;
	width: 250px;
	margin: 10px 0px 0px 15px;
	height: 600px;
	background-color: #ffffff;
}
		/* Subclasses of .side_fill
		--------------------------*/
		.side_fill .little_window {
			height: 300px;
			background-color: #fff;
			margin: 25px;
		}
		
		.side_fill .text_spot {
			padding: 15px;
			color: #000000;
		}
/*	Tour section CSS
---------------------------------------------------------------*/
		
.tour_container {
	height: 500px;
	border: 1px solid gray;
	background-image: url('../img/tour_background.png');
}

		/*	.tour_container
		--------------------------*/
		.tour_container .tour_image {
			margin: 10px 10px 0px 50px;
			height: 420px;
			width: 550px;
			float: left;
		}
		
		.tour_container .textbox {
			float: left;
			padding: 10px;
			width: 160px;
			height: 440px;
			margin: 10px;
		}
		
.tour_tabs {
	width: 100px;
	height: 300px;
	display: inline;
	float: left;
	line-height: 1.5;
	padding: 10px;
}

		/*	.tour_tabs
		------------------*/
		.tour_tabs ul {
			background-color: #32373D;
			width: 90px;
			list-style: none;
		}
		
		.tour_tabs li {
			background-color: #32373D;
			padding: 10px 2px 10px 2px;
		}
		
		.tour_tabs a {
			color: #ffffff;
		}
		
		.tour_tabs .selected {
			background-color: #ffffff;
			padding: 10px 2px 10px 2px;
		}
		
		.tour_tabs .selected a {
			color: #32373D;
		}
		

/* Buttons
-------------------------------------------------------------- */

.get_started {
	width: 300px;
	height: 75px;
	margin: 15px 0px 0px 40px;
}


/* Front page
-------------------------------------------------------------- */
.front_page .icon {
	float: left;
	display: inline;
	height: 25px;
	width: 25px;
}

.front_page .bottom_copy {
	margin-bottom: 10px;
}

.products {
	margin: 15px 0px;
	text-align: center;
	line-height: 1.4em;
}
.products .product {
	float: left;
	display: inline;
	border: 2px solid #c4c6c7;
	min-height: 200px;
	width: 232px;
	margin-top: 15px;
	padding: 10px 0px;
	background-color: #f9f9f9;
}
.products .main_product {
	float: left;
	display: inline;
	border: 4px solid #7c8fa9;
	background-color: #fff;
	width: 232px;
	padding: 10px 0px;
}
.products h2 {
	font-family: arial;
	font-weight: normal;
	color: #222;
	padding: 0px;
}

.products h3 {
	text-transform: uppercase;
	color: #7c8fa9;
	font-size: 1.2em;
	border-bottom: 1px solid #ddd;
	padding: 4px 0px;
	margin: 0px 5px 10px 5px;
}

.products ul {
	list-style: none;
	font-size: 1.5em;
	line-height: 1.3em;
	margin-bottom: 5px;
}

.products .main_product ul {
	font-size: 1.6em;
	margin-bottom: 20px;
}
strong {
	color: #C33700;
}

/* Regular Layout
-------------------------------------------------------------- */

#title_bar {height: 40px; padding-top: 10px;}
#title_bar h1 {color: #222;}


/* Footer
-------------------------------------------------------------- */
#footer {
	background-color:#1A1D23;
	border-top: 2px solid #c4c6c7;
	color:#828A9C;
	padding:4px;
}

#footer strong { color: #0096cd; }

#footer a { color: #4e66a1; }
#footer a:hover { color: #7189c6; }

#footer .container {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
}
#footer .site_navigation {
	line-height: 1.6em;
	font-size: 11px;
}
#footer .copyright {
	float: right;
	text-transform: uppercase;
	font-size: 10px;
	text-align: right;
}



/* --- yoinked by dan guzek for sliding login panel
		last updated: June 3, 2009 --- */

	/*
Name: Sliding Login Panel
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

	The CSS, XHTML and design is released under Creative Common License 3.0:
	http://creativecommons.org/licenses/by-sa/3.0/

*/ 

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
  	background: url('../img/loginSlide/tab_b.png') repeat-x 0 0;
	height: 42px;
	position: relative;
}

.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
  	font-weight: bold;
	line-height: 42px;
	margin: 0px;
  	color: white;
  	font-size: 80%;
	text-align: center;
}

.tab ul.login li.left {
  	background: url('../img/loginSlide/tab_l.png') no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
}

.tab ul.login li.right {
  	background: url('../img/loginSlide/tab_r.png') no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}

.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url('../img/loginSlide/tab_m.png') repeat-x 0 0;
}

.tab ul.login li a {
	color: #15ADFF;
}

.tab ul.login li a:hover {
	color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
	height: 30px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
}

.tab a.open {background: url('../img/loginSlide/bt_open.png') no-repeat left 0;}
.tab a.close {background: url('../img/loginSlide/bt_close.png') no-repeat left 0;}
.tab a:hover.open {background: url('../img/loginSlide/bt_open.png') no-repeat left -19px;}
.tab a:hover.close {background: url('../img/loginSlide/bt_close.png') no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 40px;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
	width: 100%;
	height: 270px;
	color: #999999;
	background: #333333;
	overflow: hidden;
	position: relative;
	z-index: 3;
}

#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
}

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
}

#panel p {
	margin: 5px 0;
	padding: 0;
}

#panel a {
	text-decoration: none;
	color: #15ADFF;
}

#panel a:hover {
	color: white;
}

#panel a-lost-pwd {
	display: block;
	float: left;
}

#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}

#panel .content .left {
	width: 280px;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #333;
}

#panel .content .right {
	border-right: 1px solid #333;
}

#panel .content form {
	margin: 0 0 10px 0;
}

#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}

#panel .content input:focus.field {
	background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}

#panel .content input.bt_login {
	width: 74px;
	background: transparent url('../img/loginSlide/bt_login.png') no-repeat 0 0;
}

#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url('../img/loginSlide/bt_register.png') no-repeat 0 0;
}

#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
}


/* --- end new content from dan --- */

.darkbox h3 {
    border-bottom: 1px solid #ccc;
}

.darkbox table tr td input {
    width: 400px;
    padding: 7px 5px;
    font-size: 13px;
	border: 1px solid #ccc;
}

.darkbox label { font-weight: bold;}

.darkbox span {display: block; margin-top: 3px; font-size: 11px; font-weight: bold; color: #555;}

.review table {border: 2px solid #C4C6C7; margin: 10px 0px; }
.review td { padding: 5px; }
.review input {font-size: 13px; font-weight: bold;}