/********
Author: Justin Hubbard
Copyright eLIONweb 2011
Website: http://www.elionweb.com
envato profile: http://www.codecanyon.com/user/eLION
*************/
/****** IMPORTANT! Please review ie.css and compare to this stylesheet before making changes that will effect IE ********/

/******  This imports other stylesheets so you don't have to call them in an html file *****/
@import url('../../reset.css');

body {
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	color:#E7E7E7;
}

.tab-content p, .tab-content li,  h2, h3{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px; float:left; width:584px;overflow: hidden;white-space: nowrap;font-size:20px; line-height:20px;
}

a{
	text-decoration:none; 
	color:#fff;
}

a:hover{text-decoration:none;
	color:#009395;
}
.tab-container h2{ /* Effects only the h3 headings inside the tabs */
	margin-bottom: 10px; float:left; width:584px;overflow: hidden;white-space: nowrap;font-size:20px; line-height:16px;
}
.tab-container h3{ /* Effects only the h3 headings inside the tabs */
	font-size:20px; line-height:20px;
	color:#95E7A5; width:74px; float:left;overflow: hidden;white-space: nowrap;
}
.tab-container h4{ /* Effects only the h3 headings inside the tabs */
	color:#fff; width:118px; float:left;overflow: hidden;white-space: nowrap; line-height:20px; font-size:16px;
}
/* `Containers
----------------------------------------------------------------------------------------------------*/

#container{ /* Use this to position the entire tab module */
	margin:0 auto; 
	width:836px; 
}

.tab-container {
	position: relative; 
	width: 100%; 
	z-index:0;
}

/* `Common Styles
----------------------------------------------------------------------------------------------------*/

/* Tabs */

.tab-container > div { 
	display: inline; 
}

.tab-container > div > a {  
	position: relative !important; /* Keeps the tabs in line with each other */
	text-decoration: none; 
	color: #009395; 
	display: inline-block;
	padding: 4px 14px; 
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	margin:2px; 
	padding: 4px 14px; margin-left:150px;
}

.tab-container > div:not(:target) > a { font-size:20px;
}	

.tab-container > div:target > a { color:#fff;border-bottom: solid 3px #95E7A5; font-size:20px;

}	

.tab-container-on > a { color:#fff;border-bottom: solid 3px #95E7A5; font-size:20px;}
.tab-container-on{ color:#fff !important;}
.tab-container-on > div:target > a { color:#fff;border-bottom: solid 3px #95E7A5; font-size:20px;

}


.tab-container > div > div { /* This is the container which holds the tab content */
	background: #14212C; /* old browsers */
	z-index: -2;
	top: 50px;
	padding: 20px;
	outline-offset: -8px; /*Delete if you don't want an offset*/
	min-height:550px; /* Change this value if you need more or less content space */
	position:absolute; /* Fixes IE 7 & 8 */
}	
.tab-container > div:not(:target) > div { 
	position: absolute; /* This keeps the tab module contained */
}

.tab-container > div:target > div { 
	position: absolute; 
	z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */ 
}

div.tab-content{ /* Styles the inner content of the tabs */
	padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
	
.tab-content img{ 
	margin:0 auto; 
	display:block; 
	padding-bottom: 20px;
    padding-top: 10px;
}

.ds{ float:left; height:80px; border-bottom:1px #009395 solid; padding-top:30px; padding-left:20px;}
.ds:hover{ float:left; height:80px; border-bottom:1px #009395 solid; padding-top:30px; background-color:#11353F}