body {
    margin: 0;
    padding: 0;
    background: url(../img/DiamondWhite.png) repeat scroll left -35px transparent;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
}

/*****/
/*  ~HEADER/*****/
/*****/
.header{
	width:90%;
	min-width:500px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
	height:100px;

}
.headerBG{
    background: url(../img/BatthernWhite.png) repeat scroll left -35px transparent;
	position:absolute;
	width:100%;
	height:100px;
	z-index:-1;
	margin: 0px;
    padding: 0px;
	border-bottom:1px solid black;
	opacity:0.8;	
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0 -2px 10px -2px rgba(0,0,0,.8);
}

.title{
	position:absolute;
	top:50%;
	margin-top: -20px;
	margin-left: 20px;
	font-family: 'Arial Black', sans-serif;
	line-height: 1em;
	color: #00aeff;
	font-weight:bold;
	text-transform:uppercase;
	font-size: 25px;
	text-shadow:0px 0px 0 rgb(-38,136,217),1px 1px 0 rgb(-76,98,179),2px 2px 0 rgb(-115,59,140),3px 3px 0 rgb(-153,21,102), 4px 4px 0 rgb(-191,-17,64),5px 5px 4px rgba(0,0,0,0.4),5px 5px 1px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,.2);
	cursor:default;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.title:first-letter
{
	font-size: 30px;
} 
.userdiv{
	padding:0px;
	margin:0px;
	margin-top:15px;
	margin-right:15px;
	float:right;
	height:100%;
	border:0px solid red;
}
.userdiv .SButton{
	margin-top:5px;
	margin-left:20px;
}

.SButton {
	-moz-box-shadow:inset 0px 0px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 0px 0px 0px #97c4fe;
	box-shadow:inset 0px 0px 0px 0px #97c4fe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background-color:#3d94f6;
	-webkit-border-top-left-radius:13px;
	-moz-border-radius-topleft:13px;
	border-top-left-radius:13px;
	-webkit-border-top-right-radius:13px;
	-moz-border-radius-topright:13px;
	border-top-right-radius:13px;
	-webkit-border-bottom-right-radius:13px;
	-moz-border-radius-bottomright:13px;
	border-bottom-right-radius:13px;
	-webkit-border-bottom-left-radius:13px;
	-moz-border-radius-bottomleft:13px;
	border-bottom-left-radius:13px;
	text-indent:0;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:25px;
	line-height:25px;
	width:90px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #1570cd;
}
.SButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background-color:#1e62d0;
}.SButton:active {
	position:relative;
	top:1px;
}

/*****/
/*  ~TABS DESIGN/*****/
/*****/

.contentHolder {
	border:0px solid red;
    margin-top: 30px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#tabs {
    overflow: hidden;
    width: 100%;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#tabs li {
    float: left;
    margin: 0 .5em 0 0;
}

#tabs a:first-letter{
	font-size:20px;
}
#tabs a {
    position: relative;
    background: #ddd;
    padding: 10px 30px;
    float: left;
    text-decoration: none;
    color: #fff;
	font-size:16px;
	font-weight:bold;
    text-shadow: 2px 2px 1px rgba(0,0,0,1);
    border-radius: 10px 0 0 0;
    box-shadow: 0 2px 2px rgba(0,0,0,.4);
	text-transform:uppercase;
    background-image: linear-gradient(to bottom,#fff,#ddd);
	
	 -webkit-transition: all 0.5s ease;
	 -moz-transition: all 0.5s ease;
	 -o-transition: all 0.5s ease;
	 -ms-transition: all 0.5s ease;
	 transition: all 0.5s ease;
}

#tabs a:hover,#tabs a:hover::after,#tabs a:focus,#tabs a:focus::after {
    background: #76B3BE;
    background-image: linear-gradient(to bottom,#76C3CE,#2d5a62);
}

#tabs a:focus {
    outline: 0;
}

#tabs a::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: -15px;
    bottom: 0px;
    width: 35px;
    background: #ddd;
    background-image: linear-gradient(to bottom,#fff,#ddd);
    box-shadow: 2px 2px 2px rgba(0,0,0,.4);
    transform: skew(20deg);
    border-radius: 0 10px 0 0;
	
	 -webkit-transition: background-color 0.5s ease;
	 -moz-transition: background-color 0.5s ease;
	 -o-transition: background-color 0.5s ease;
	 -ms-transition: background-color 0.5s ease;
	 transition: background-color 0.5s ease;
}

#tabs #current a,#tabs #current a::after{	   
	background:rgba(0,150,200,1);
}
#tabs #current a,#tabs #current a::after {
    z-index: 3;
}

.contentBG{
    background: url(../img/BatthernWhite.png) repeat scroll left -35px transparent;
	position:absolute;
	width:100%;
	height:100%;
	z-index:-1;
	margin: 0px;
    padding: 0px;
	border:0px solid green;
	opacity:0.4;	
    border-radius: 0px 10px 10px 10px;
    box-shadow: 0 -2px 10px -2px rgba(0,0,0,.8);
}

#content{	
	position:relative;
    z-index: 2;
    min-height: 300px;
    border-radius: 0px 10px 10px 10px;
    background-color: rgba(0,150,200,0.8);
	
	
	 -webkit-transition: all 0.5s ease;
	 -moz-transition: all 0.5s ease;
	 -o-transition: all 0.5s ease;
	 -ms-transition: all 0.5s ease;
	 transition: all 0.5s ease;
}

.contentData{

    padding: 2em;
    height: 100%;
}

#content[class="contentShow"]{
	background:rgba(0,150,200,1);
	background:black;
}

#content[class="contentHide"]{
	background:rgba(50,50,50,1);
}


/*****/
/*  ~FOOTER/*****/
/*****/

	.createdby{
		color: white;
		font-family:"Trebuchet MS", Helvetica, sans-serif;
		font-weight: bold;
		float: right;
		margin-top:15px;
		font-size: 15px;	
	}
	.footer{
		position:relative;
		border: 0px solid green;	
		width:90%;
		min-width:350px;
		margin-top:30px;
		margin-left:auto;
		margin-right:auto;
		text-align: center;
	}
	.footer .inner{
		border-top:2px solid #222;
		width:100%;
		height:120px;
		text-align: center;
	}

	

/*****/
/*  ~SPINNER/*****/
/*****/

.spinner {
	height:20px;
	width:20px;
	top:45%;
	left:45%;
	position:absolute;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:6px solid rgba(0,174,239,.15);
	border-right:6px solid rgba(0,174,239,.15);
	border-bottom:6px solid rgba(0,174,239,.15);
	border-top:6px solid rgba(0,174,239,.8);
	border-radius:100%; 
}


@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}



/*****/
/*  ~TEXT BOXES/*****/
/*****/

.textInfo{
	color: white; 
	font-weight:bold;
}
.textInput{
	width: 170px; 
	height: 22px; 
	background:rgba(150,150,150,0.5);
	border: 2px solid black; 
	color: white; 
	font-weight:bold;
    border-radius: 1px 5px 5px 5px;
}
/*****/
/*  ~CHECKBOXES/*****/
/*****/

input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label {
    background-image: url("../img/lite-x-blue.png")
}


/*****/
/*  ~FORM DISPLAY/*****/
/*****/

.registerForm{
	margin-left: 10px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-left:3px solid rgba(250,250,250,0.5);
}


/*****/
/*  ~COURSE LIST/*****/
/*****/

.courselist{
	border-bottom: 2px solid red; 
}

.courseitem{
	position:relative;
    overflow: hidden;
    width: 100%;
    margin: 0px;
    margin-left: -30px; 
    padding: 0px;
    padding-left: 10px;
	height:30px;
	line-height:30px;
    list-style: none;
	background:rgba(150,150,150,0.5);
	border-bottom: 2px solid black; 
	color: white; 
	font-weight:bold;
    border-radius: 5px 5px 5px 5px;
	
}
.coursetext{
	
	border-bottom: 2px solid red; 
}
.courseplus{
	position:absolute;
	float:right;
	border-bottom: 2px solid red; 
}




/*****/
/*  ~DROPDOWN LIST FIXES/*****/
/*****/

.ui-widget {
	font-family:"Trebuchet MS", Helvetica, sans-serif;
    font-size: 17px;
}

.ui-corner-all.ui-state-focus {
	border: 1px solid rgba(0,0,0,0.5);
	background: #e4f1fb 50% 50% repeat-x;
	font-weight: bold;
	color: #0070a3;
}