/* Style Begins */

body {
	background-image: url(bkg_new.jpg);
	background-repeat: repeat-x;
	background-color: #293B91;
		margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:16px;
	text-align:center
}
a:link, a:active, a:visited{
color:#339ED2;
text-decoration:none
}
a:hover{
color:#FFFFFF;
background-color:#339ED2;
}
#infobox .copyright a:link, a:active, a:visited{
color:#339ED2;
text-decoration:none
}
#infobox .copyright a:hover{
color:#FFFFFF;
background-color:#339ED2;
}
#infobox .copyright2 a:link, a:active, a:visited{
color:#7EABFE;
text-decoration:none
}
#infobox .copyright2 a:hover{
color:#FFFFFF;
background-color:#7EABFE;
}
.style139 {font-size: 12px}
.style142 {font-weight: bold}
.clear{
	clear:both;
}
.style3 {color: #999999;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
a:visited {
	color: #7EABFE;
	text-decoration: none;
}
a:active {
	color: #7EABFE;
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:hover {
color:#FFFFFF;
	text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:#FFFFFF;
font-size: 90%;
font-family:Arial, Helvetica, sans-serif;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
font-family:Arial, Helvetica, sans-serif;
}

#example3 a{ /*CSS specific to demo 3*/
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:0;
}

#example3 p{ /*CSS specific to demo 3*/
font-family:Arial, Helvetica, sans-serif;
margin-bottom:2px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 260px; /*Width of Carousel Viewer itself*/
height: 130px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 260px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.style12 {color: #FFFFFF}

.style13 {color: #000000}
.style15 {font-weight: bold}
.grey {
	color: #999;
}

h1{
font-family: "Cooper Black", Georgia, "Times New Roman", Times, serif;
font-size:32pt;
color: #FF6A2B;
padding:2px;
margin:0;
}
h2{
	color:#202020;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin:0;
}
h3{
color:#7EABFE;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin:0;
margin-bottom:10px;
}
h4{
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.item {
	width:250px;
	height:170px;	
	border:4px solid #7EABFE;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item .caption {
	width:250px;
	height:175px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#339ED2;
	font-size:16px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

.item .caption p {
	padding:5px;	
	margin:0;
	font-size:12px;
}

.right{
	float:right;
}
.shadow{
	text-shadow: #000 1px 1px 3px;
}
.submit{
	background-color:#7EABFE;
	border:#7EABFE 1px solid;
	color:#FFF;
	font-weight:bold;
}

/* Style Ends */

/* Structure Begins */
#container{
padding:15px;
width: 797px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
#top{
width:797px;
height:220px;
}
#top a:active, a:visited, a:link, a:hover{
background-color:transparent;
}
#logo{
float:left;
width: 210px;
height:180px;
}
#navigation{
padding-top:8px;
float:left;
}
#portfolio{
width:300px;
margin-top:20px;
float:right;
color:#FFFFFF;
}
#main{
width:797px;
margin-bottom:50px;
}
#main a:link, a:active, a:visited{
color: #7EABFE;
text-decoration:none
}
#main a:hover{
	color:#FFF;
	background-color:#7EABFE;
}
#content{
min-height:330px;
}
#email{
width: 400px;
text-shadow: #000 1px 1px 3px;
}
#email_side{
width: 190px;
padding:5px;
height:580px;
float:right;
margin-left:190px;
margin-top:20px;
margin-bottom:20px;
}
#information{
padding:8px;
width:250px;
min-height:360px;
float:left;
margin-top:20px;
text-shadow: #000 1px 1px 3px;
color: #fff;

}
#information span{
color:#FFFFFF;
font-family: "Cooper Black", Georgia, "Times New Roman", Times, serif;
font-size:20pt;
color: #FF6A2B;
padding:2px;
margin:0;
}
#playlist{
padding:8px;
height:420px;
width:200px;
margin-left:20px;
float:left;
margin-top:20px;
color:#FFFFFF;
}
#playlist h1{
color:#FFFFFF;
font-family: "Cooper Black", Georgia, "Times New Roman", Times, serif;
font-size:20pt;
color: #FF6A2B;
padding:2px;
margin:0;
}
#connect{
padding:8px;
width:250px;
margin-left:20pt;
float:left;
margin-top:20px;
color:#FFFFFF;
}
#connect h1{
color:#FFFFFF;
font-family: "Cooper Black", Georgia, "Times New Roman", Times, serif;
font-size:26px;
color: #FF6A2B;
padding:2px;
margin:0;
}
#head{
	width:500px;
	height:516px;
	position:absolute;
	z-index:0;
	clear:both;
	left: 720px;
	top: 540px;
}
#twitter{
height:50px;
width:500px;
clear:both;
text-shadow: #000 1px 1px 3px;
color: #fff;
}
#twitter .img{
float:left;
margin-right:10px;
}
.right{
float:right;
}
#contact_header{
background-repeat:no-repeat; 
background-image: url(contact_170x35_new.png); 
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#contact_span{
display:none;
}
#portfolio_header{
background-repeat:no-repeat; 
background-image: url(portfolio_193x35_new.png); 
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#portfolio_span{
display:none;
}
#about_header{
background-repeat:no-repeat; 
background-image: url(about_241x35_new.png); 
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#about_span{
display:none;
}
#bio_header{
background-repeat:no-repeat; 
background-image: url(bio_77x35_new.png); 
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#bio_span{
display:none;
}
#welcome_header{
background-repeat:no-repeat; 
background-image: url(welcome_135x26_new.png); 
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#welcome_span{
display:none;
}
#connect_header{
background-repeat:no-repeat; 
background-image: url(connect_243x26_new.png);
height:35px;
margin-top:10px;
margin-bottom:10px;
}
#connect_span{
display:none;
}
#playlist_header{
background-repeat:no-repeat; 
background-image: url(playlist_168x28_new.png); 
height:35px;
text-shadow: #000 1px 1px 3px;
margin-top:10px;
padding:10px;
}
#playlist_span{
display:none;
}
#random_header{
background-repeat:no-repeat; 
background-image: url(random_173x20.png); 
height:20px;
padding-bottom:5px;
}
#random_span{
display:none;
}
#footer{
width:auto;
clear:both;
padding-top:10px;
background-color: #202020;
}
#infobox{
width:800px;
margin-left:auto;
margin-right:auto;
padding:5px;
position:relative;
z-index:5;
text-align: left;
}
#infobox ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#infobox ul li{
position: relative;
border-bottom:solid #333333 1px;
}
#infobox ul li a{
display: block;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#infobox ul li a:link, #sec2 li a:visited{
color: #FFFFFF;
}
#infobox ul li a:hover{
color: white;
background-color:#333333;
}

#sec1{
width:120px;
float:left;
padding:10px;
text-align:left;
}
#sec5{
width:120px;
float:left;
padding:10px;
text-align:left;
margin-left:110px;
}
#sec2{
width:160px;
float:left;
padding:10px;
margin-left:20px;
text-align:left;
}
#sec2 img{
vertical-align: middle;
margin-right: 0.5em;
padding: 0.2em 0;
}
#sec3{
width:160px;
float:left;
padding:10px;
margin-left:20px;
text-align:left;
}
#sec3 img{
vertical-align: middle;
margin-right: 0.5em;
padding: 0.2em 0;
}
#sec4{
width:220px;
float:left;
padding:10px;
margin-left:20px;
}
#sec4 a:hover{
background-color:#666666;
}
#infobox .copyright{
clear:both;
text-align:left;
padding-top:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#infobox .copyright2{
clear:both;
text-align:center;
padding-top:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/*Structure Ends */

/* Navigation Begins */


.myformsubmit{
font: bold 11px Verdana;
color:#FFFFFF;
height: 22px;
background-color: #666666;
border:#666666;
}
.myformreset{
font: bold 11px Verdana;
color:#FFFFFF;
height: 22px;
background-color: #666666;
border:#666666;
}


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#thicktabs{
margin: 0;
padding: 0;
font: bold 13px Tahoma;
}

#thicktabs li{
width:100%;
display:block;
list-style: none;
}

#thicktabs li a{
float: left;
color: #ffffff;
padding: 8px 14px; /*padding of tabs*/
text-decoration: none;
}

#thicktabs li a:visited{
color: #ffffff;
}

#thicktabs li a:hover{
background-color:transparent;
border-right:#FFF solid 3px;
}

#thicktabs .current a {
border-right:#FFFFFF 3px solid;
margin-left:10px;
}

/* Navigation Ends */