/* ========================================================================================== */
/* = Designing Trendz - CSS - Coded by Superscope Media inc, www.superscopemedia.com - 2008 */
/* ========================================================================================== */	
/* RESET */
@import url("reset.css");

/* =================================== */
/* = SITE STRUCTURE ................ = */
/* =================================== */

	body {background-color: #fff; font-size: 70%; font-family:Georgia, "Times New Roman", Times, serif; color: #ccc;background-image: url('../img/backgrounds/bgtile.gif');background-repeat: repeat; background-position: top;}

	#wrap {width:960px; height: auto; margin: 0 auto; padding: 0px 0px 0px 0px; position:relative; overflow: visible;}
	#mainbodywrap {width:958px; margin: -4px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #000; position:relative; overflow: auto; background-image: url('../img/backgrounds/mbw-bg.jpg');background-repeat: no-repeat; background-position: top; min-height:350px;height:auto !important;height:350px; border-left:1px solid #333; border-right:1px solid #333;}
	
	#header-img {width:960px;margin: 20px 0px 0px 0px; padding: 0px 0px 0px 0px; height:65px;}
	#header{width:960px;margin: 0 auto; padding: 0px 0px 0px 0px; height:35px; position:relative;z-index:98; background-image: url('../img/backgrounds/header-nav-bg.gif');background-repeat: no-repeat; background-position: top; background-color:#000000}
	
	/* Footer */
	#footer {width:960px; min-height:200px;height:auto !important;height:200px; margin: 0 auto; padding: 0px 0px 0px 0px; position:relative; overflow: visible; border-top:1px solid #222;}


	/* FLASH */
	#flashcontent {width:960px; margin: 0 auto; padding: 0px 0px 0px 0px; z-index:1; overflow: visible; background-color:#000000}

	
/* =================================== */
/* = MAIN LAYOTUS DIVS ............. = */
/* =================================== */

	/*- 66% split -*/
	#col-2thirds-l-wrap {width:639px; margin: 0 auto;  padding: 0px 0px 0px 0px; float: left;}
	#col-2thirds-l {width:569px; margin: 0 auto;  padding: 30px 30px 30px 30px; line-height: 16px; font-size: 110%; }

	
	/*- 33% split - Each is a third total of the main body wrap-*/
	#col-third-l-wrap {width:319px; margin: 0 auto; padding: 0px 0px 0px 0px; float: left; }
	#col-third-l{width:259px; margin: 0 auto; padding: 30px 30px 30px 30px;  line-height: 16px;}
	
	#col-third-m-wrap {width:319px; margin: 0 auto; padding: 0px 0px 0px 0px; float: left;}	
	#col-third-m {width:259px; margin: 0 auto; padding: 30px 30px 30px 30px; line-height: 16px;}
	
	#col-third-r-wrap {width:319px; margin: 0 auto; padding: 0px 0px 0px 0px; float: right;}
	#col-third-r {width:259px; margin: 0 auto; padding: 30px 30px 30px 30px; line-height: 16px;}
	
	/*- Full Width -*/
	#col-full-wrap {width:958px; margin: 0px 0px 0px 0px;  padding: 0px 0px 0px 0px;float: left;}
	#col-full {width:898px; margin: 0 auto;  padding: 30px 30px 30px 30px; line-height: 16px; font-size: 110%;}	
	

	
/* =================================== */
/* = NAVIGATION ELEMENTS............ = */
/* =================================== */

/* = Main menu / Header = */	
/* = -------------------------------------------- = */	

	/* Containers and general Setup */
	#header h1 {position:absolute;left:-9999px; }	
	#header ul {list-style:none;margin: 0px 0px 0px 0px;padding:0; font-size: 90%;  text-transform: uppercase;}
	
	/* Nav buttons setup */
	#header ul li {float:left; border-right:1px solid #333; border-top:1px solid #333; border-bottom:1px solid #222; line-height:33px;position:relative;z-index:99;outline: none; text-align:center}

	/* Nav States  */
	#header ul li a {color:#999;text-decoration:none; width: 136px; height:33px;float:left;display:inline; /*ie*/padding:0 0px;outline: none; }
	#header ul li a:hover {display:block; color:#66cc00; background-image: url('../img/backgrounds/n-hover-bg.jpg');background-repeat: no-repeat; background-position: top;}
	#header ul li a.active-0ff {display:block;background-image:none !important; background-color:#232323; color:#66cc00;}
	#header ul li a.active {display:block; color:#fff; background-image: url('../img/backgrounds/n-active-bg-green.jpg');background-repeat: no-repeat; background-position: top;}	

/* =================================== */
/*  Details                            */
/* =================================== */

	/* Side bar container for product facts, tips, excetra */	
	#sidebar-con {width:224px; margin: 0px 0px 20px 0px; padding: 16px 16px 16px 16px; line-height: 16px; background-color:#111; border:1px solid #222; background-image: url('../img/backgrounds/sidebarcon-bg.jpg');background-repeat: no-repeat; background-position: top;}
	

	/* Side bar container for simple lists and checklists */
	#sb-subcon {width:258px; margin: 0 auto; padding: 20px 30px 20px 30px; float: left; overflow: hidden;}
	#sb-subcon-title {color: #aaaaaa; font-size: 120%; font-weight:bold; margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px;}
	
	/* Pull Quotes */	
	#pullquote-con {width: 520px; margin: 10px 0px 10px 0px; padding: 20px 30px 20px 30px; float: left; overflow: hidden; color: #66cc00; font-size: 130%; font-weight:normal; font-style: italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center;line-height: 20px; display:block; }
	


	/* Styled Lists */
	#highlights ul {margin-left: 0; padding-left: 0; list-style-position: outside; font-weight:normal; color:#aaaaaa; line-height: 18px;}
	#highlights li {padding-left: 20px; background-image: url(../img/arrow.gif); background-repeat: no-repeat; background-position: 0 .5em;}
	
	/* Press/Testimonial */	
	#press-mod {width: 100%; margin: 10px 0px 30px 0px; padding: 0px 0px 0px 0px; float: left; overflow: hidden; display:block;}
	#press-mod img {margin: 10px 10px 10px 0px; padding: 0px 0px 0px 0px; float: left; display:inline;}
	#byline {display:block; margin-top: 6px; font-size:90%; font-weight:bold; color:#666666 }
	
	#test-mod {width: 800px; margin: 10px 0px 30px 0px; padding: 10px; float: left; overflow: hidden; display:block; border: 1px solid #444; border-style: none none dotted;padding-Bottom: 10px}
		
		
	/* Awards */	
	#award-mod {width: 250px; margin: 10px 30px 10px 0px; padding: 0px 0px 0px 0px; float: left; overflow: auto;}
	#award-mod img {margin: 0px 20px 30px 0px; padding: 0px 0px 0px 0px; overflow: auto; float: left; border: 1px solid #ccc; text-align:center}

	/* Services */
	#service-detail-con {width: 100%; margin: 20px 0px 10px 0px; padding: 0px 0px 0px 0px; float: left; overflow: hidden; display:block; border: 1px solid #444; border-style: none none dotted;padding-Bottom: 30px; color:#ccc}

	#service-detail-con  ul {width: 40%; padding: 0px 0px 0px 50px; display:inline-block; float:left }
	#service-detail-con  li {color:#fff; list-style-type: circle; list-style-position: inside;}
	#service-detail-con  H2 {color:#66CC00}
	
	


	

/* =================================== */
/*  IMAGE Classes                      */
/* =================================== */
	
	/* Con for page header imgs */
	#header-img-con {width:960px; margin: 0 auto; padding: 0px 0px 0px 0px; display:block; overflow:hidden;}
	
	/* Image embeded in paragraph */
	.img-full {margin: 20px 0px 20px 0px; padding: 0px 0px 0px 0px; overflow: hidden; border: 1px solid #222;}
	.img-r {margin: 0px 0px 20px 20px; padding: 0px 0px 0px 0px; overflow: hidden; float: right; border: 1px solid #222;}
	.img-l {margin: 0px 20px 20px 0px; padding: 0px 0px 0px 0px; overflow: hidden; float: left; border: 1px solid #222;}
	.img-l-1 {margin: 15px 20px 20px 0px; padding: 15px 0px 0px 0px; overflow: hidden; float: left; border: 1px solid #222;}
	
	.icon { margin: 16px 0px 0px 0px; padding: 0px 0px 0px 0px; float: right; overflow: hidden; display:inline}
	
	.img {border:none; margin: 0 auto; padding: 0px 0px 0px 0px; float: left; overflow: hidden; } 
	.sb-img {border:none; margin: 0 auto; padding: 0px 0px 20px 0px; float: left; overflow: hidden; display:block }
	.right {border:none; margin: 0 auto; padding: 0px 0px 0px 0px; float: right; overflow: hidden;}
	.left {border:none; margin: 0 auto; padding: 0px 0px 0px 0px; float: left; overflow: hidden;} 
	



/* =================================== */
/*  TYPOGRAPHY                         */
/* =================================== */

/* TYPOGRAPHY - general */
	p {color:#ccc;}
	ol {list-style-type: decimal;padding-left: 24px;}


/* TYPOGRAPHY - headlines */
	h1, h2, h3 {letter-spacing: .5px; }
	
	/* h1,h2 Main header page titles and detail item titles/headlines */
	h1 {color: #66cc00; font-size: 160%; font-weight:bold; margin: 0px 0px 10px 0px; padding: 0px 20px 0px 0px; line-height: 40px; min-height:42px;height:auto !important;height:42px;}
	
	/* h2, Used as secondary paragraph lead in */
	h2 {color: #ccc; font-size: 110%; font-weight:bold; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 0px; line-height: 18px; min-height:18px;height:auto !important;height:18px; display:block;}
	
	/* h3, used as paragraph title or bold statment, */
	h3 {color: #66cc00; font-size: 110%; font-weight:bold; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; border: 1px solid #444; border-style: none none dotted;padding-Bottom: 10px}
	
	/* h4, awards */
	h4 {color: #66cc00; font-size: 100%; font-weight:bold; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 0px; display:block; border: 1px dotted #444; border-style: none none dotted;padding-Bottom: 6px}
	
	/* h5, */
	h5 {color: #66cc00; font-size: 90%; font-weight:bold; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
	
	/* h6,  */
	h6 {color: #ccc; font-size: 90%; font-weight:bold; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 0px; }
	

	
/* =================================== */
/*  TEXT STYLING                       */
/* =================================== */
	
	/* Standard  */
	.lrg-tx {font-size: 160%; font-weight:bold; letter-spacing:0px;}
	
	.small-tx {font-size: 90%; font-weight:normal;}
	.smalltx-subtle {font-size: 80%; font-weight:normal; color:#999}
	
	.italic {font-style: italic}
	.bold {font-weight:bold; font-size: 110%; letter-spacing:0px;}
	
	.alert {color:#ff0000;font-weight:bold;font-size: 100%}
	.error {color:#ff0000;font-weight:bold;font-size: 100%}
	.correct {color:#33cc00;font-weight:bold;font-size: 100%}
	
	/* Site Specific  */
	.highlight {color:#66cc00;}
	.highlightbold {color:#66cc00;font-weight:bold;font-size: 100%;}
	.highlightsm {color:#66cc00;font-weight:bold;font-size: 90%}





/* =================================== */
/*  LINKS STYLING                      */
/* =================================== */

	/* LINKS - general*/	
	a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:none;cursor:pointer} 
	a:link {color:#66cc00;font-weight:bold;} 
	a:visited {color:#999;font-weight:bold;} 
	a:hover,a:active {color:#99ff33;font-weight:bold} 
	

/* =================================== */
/*  FORM STYLING                       */
/* =================================== */

	/* Multipurpose form - Contact, signup, testimoials*/	
	#form-con {width:530px; margin: 0px 0px 30px 0px; padding: 30px 30px 60px 30px; float:left; display:block; line-height: 16px; background-color:#111; border:3px solid #010101; background-image: url('../img/backgrounds/faq-con-bg.jpg');background-repeat: no-repeat; background-position: top;}
	#form-con br {clear: left;}
	
	label,input, select {display: block;width: 280px;float: left;margin-bottom: 10px;}
	label {text-align: right; width: 140px;padding-right: 20px; font-weight: bold; font-size:80%;} 
	.submit {display: block; width: 290px; float: left; margin: 0px 0px 10px 0px; padding: 6px; font-weight: bold; font-size:110%; }

	.browse-button {display: block; width: 50px; margin: 0px 0px 0px 10px; font-size:9px}
	.browse-input {display: block; width: 220px;}
	
	/* Sidebar Form */
	.sm-button {display: block; width: 40px;float: right;margin: 0px 0px 0px 0px; font-size:9px}
	.sm-input {display: block; width: 176px;float: left;margin-bottom: 10px;}
		
	/* Validation - ALERT */
	.alert-message {width: 90%; height: auto; margin: 0px 0px 10px 0px; padding: 6px 6px 6px 30px;  float:left; display:block; line-height: 12px; border:1px solid #cc0000; color:#fff;font-weight: bold; font-size:80%; background-image: url('../img/alert-icon.gif');background-repeat: no-repeat; background-position: top-left;}
	.input-alert { background-color:#ffcccc; border:3px solid #ff0000; color:#fff;font-weight: bold; font-size:80%; padding: 6px; }
	
	/* Validation - Positive GOOD/APPROVED */
	.positive-message {width: 90%; height: auto; margin: 0px 0px 10px 0px; padding: 6px 6px 6px 30px;  float:left; display:block; line-height: 12px; border:1px solid #66cc33; color:#fff;font-weight: bold; font-size:80%; background-image: url('../img/positive-icon.gif');background-repeat: no-repeat; background-position: top-left;}
	.input-positive { background-color:#ccffcc; border:3px solid #66cc33; color:#fff;font-weight: bold; font-size:80%; padding: 6px; }
	
	.hidden{visibility: hidden;}
	
/* ========================= */
/*  CLEAR FIXES              */
/* ========================= */

	.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px} 
	.fix{clear: both;height: 1px;margin: 0 0 -1px;overflow: hidden;}
 
	.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 */

	.b-zero {border: 0px!important; }



