/*  
Theme Name: halfStepup Theme
Theme URI: http://www.halfstepup.com
Description: The official theme for halfStepup.com.
Author: Daniel Jayo and Kristian H
Version: 2.0
*/

/* CSS Document */
*{
margin: 0;
padding: 0;
}
img{
border: none;
}
/***************************************

Fonts and Tags

****************************************/
#main{
font-family: Trebuchet MS, Georgia, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
text-align: left;
}
h1{
font-size: 24px;
padding: 25px 0px 6px 0;
font-weight: normal;
line-height: 1.2em;
}
h2{
color: #66cc00;
margin: 0 0 7px 0;
font-size: 14px;
line-height: 1.2em;
}
h5{
margin: 10px 0 0 0;
font-size: 10px;
}
h6{
margin: 0;
font-size: 9px;
}
p{
margin: 7px 0 7px 0;
line-height: 1.5em;
}
a{
color: #333333;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
ul{
padding: 5px 10px;
margin: 5px 10px;
line-height: 1.5em;
}
.dropcap{
float:left;
background-image:url(images/dropcap.png);
background-repeat:no-repeat;
font-size:80px;
line-height:60px;
padding-top:10px;
padding-left:10px;
font-family: Trebuchet MS, Georgia, Arial, Helvetica, sans-serif;
color:#fff;
height:80px;
width:80px;
}

.article{
float: left;
font-size: 32px;
padding: 22px 0px 6px 0;
font-weight: normal;
line-height:32px;
}

.postfoot{
font-size: 8pt;
line-height:12px;
border-top: 1px dotted #bdc1a3;
border-bottom: 1px dotted #bdc1a3;
padding:5px 0px 5px 0px;
color: #444;
font-style:italic;
width:auto;
}

.auth{
padding-bottom:5px;
}

.aLesson ol{
margin-left:20px;
}

/************************/
#latest .infoBoxContent h3, .secondary .infoBoxContent h3{
color: #66cc00;
margin: 0 0 7px 0;
font-size: 13px;
}
#latest .infoBoxContent p, .secondary .infoBoxContent p{
font-size: 11px;
margin: 0;
}
#latest .infoBoxContent .uniform, .secondary .infoBoxContent .uniform{
font-size: 11px;
min-height: 75px;
height: auto !important;
height: 75px;
}
.uniform ul, #devNews ul{
padding:0;
margin:0;
list-style: none;
}
#devNews{
height:204px;	
}
#devNews ul{
list-style: none;
line-height: 1.1em;
font-size: 11px;
}
#devNews ul li{
padding-bottom: 5px;
}
.uniform li{
list-style-type:none;
}

.aLesson ul{
list-style-type:none;
}

.aLesson table{
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
padding:5px;
}


/******************************

Article Utilities

*******************************/

span.pullqr {
	display: block;
	float: right;
	padding:10px;
	margin: 10px 0 10px 10px;
	width: 170px;
	font-size: 1.5em;
	line-height: 1.4em;
	text-align: right;
	color: #000;
        background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
}

span.pullql {
	display: block;
	float: left;
	padding:10px;
	margin: 10px 10px 10px 0px;
	width: 170px;
	font-size: 1.5em;
	line-height: 1.4em;
	text-align: right;
	color: #000;
        background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
}

.pullqr:first-letter{
text-transform:uppercase;
}

.pullql:first-letter{
text-transform:uppercase;
}

span.rightpic {
	display: block;
	float: right;
	padding:5px;
	margin: 10px 0 10px 10px;
	width: auto;
	color: #000;
        background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
}

span.leftpic {
	display: block;
	float: left;
	padding:5px;
	margin: 10px 10px 10px 0px;
	width: auto;
	color: #000;
        background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
}

small.imagecredit{
line-height:1.1em;
margin: 6px 0 5px 8px;
display:block;
}

blockquote{
width:400px;
font-variant:small-caps;
margin:6px auto 0 auto;
font-size:1.1em;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
padding:5px 12px;
}

/**************************************

Layout

***************************************/
body{
background-color: black;
padding-bottom: 10px;
}
#container{
width: 100%;
text-align:center;
background-color: #d6dabf;
background-image:url(images/green_back.jpg);
background-repeat: repeat-x;
}
#main{
background: url(images/headerBack.png) no-repeat center top;
width: 100%;
overflow: hidden;
margin: 0 auto;
/*background-image: url(images/headerBack.png);
background-repeat: no-repeat;
background-position: center top;*/
}
#header{
width: 969px;
height: 153px;
overflow: hidden;
text-align:left;
position: relative;
margin: 0 auto;
}

#name{
background-image: url(images/halfstepup.png);
height: 75px;
width: 380px;
overflow: hidden;
position: absolute;
top: 16px;
left: 71px;
cursor:pointer;
}
#headerAd{
border: 1px solid white;
float: right;
margin: 36px 20px 0 0;
}
#contentContainer{
background-image: url(images/contentBack.png);
background-repeat: no-repeat;
background-position: center top;
width: 100%;
}
#content{
background-image: url(images/contentBack_bottom.png);
background-repeat: no-repeat;
background-position: center bottom;
width: 100%;
}
#content .centerContent{
margin: 0 auto;
width: 952px;
padding: 23px 10px 96px 10px;
height: 100%;
}
#latest{
margin: -83px 0 -25px 0;
position: relative;
}
#latest .infobox{
margin-bottom: 10px;
}
#latest .centerContent{
margin: 0 auto;
width: 952px;
padding: 0px 10px 0px 10px;
height: 100%;
}
.aLesson{
clear: left;
padding: 16px 0 8px 0;
border-top: 1px dotted #8fe92d;
}
.archivePages{
background-color:#E1E5CA;
background-image:url(images/contentLeftBack.jpg);
background-repeat:repeat-x;	
height: 135px;
padding: 12px 10px 10px 10px;
border:1px solid #BDC1A3;
margin-top: 5px;
clear: left;
}
.archiveSearch{
background-color:#E1E5CA;
background-image:url(images/contentLeftBack.jpg);
background-repeat:repeat-x;	
height: auto;
padding: 12px 10px 10px 10px;
border:1px solid #BDC1A3;
margin-top: 5px;
clear: left;
}
.archivePages img{
border:1px solid #BDC1A3;
}
.archivePages h2{
line-height:1.2em;	
}
#breadcrumb{
float:left;
padding-top:5px;
width: 100%;
}
.full{
	width: 500px;	
}
#extraPro img{
	width: 300px;
}
/**************************************

Info Boxes

***************************************/
.infoBox{
background-color: #E1E5CA;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
}
.infoBox .infoBoxTop{
background-image: url(images/leftColTop_splatter.png);
background-repeat: no-repeat;
background-position: top left;
}
.infoBox .infoBoxContent{
background-image: url(images/bottom_corner.png);
background-repeat: no-repeat;
background-position: bottom right;
height: 100%;
}
#content .centerContent .leftCol{
width: 617px;
float: left;
overflow: hidden;
z-index: 5;
}
#content .centerContent .rightCol, #latest .centerContent .rightCol{
width: 316px;
float: right;
border: 1px solid #bdc1a3;
overflow: hidden;
}
#content .centerContent .rightCol .infoBoxContent, #latest .infoBox .infoBoxContent{
padding: 8px;
}
#content .centerContent .leftCol .infoBoxContent{
height:268px;
padding: 0px 15px;
}
#content .centerContent .leftCol .homeflash {
height:250px;
padding: 9px;
}
#content .centerContent .leftCol .secondary{
min-height: 757px;
height: auto !important;
height: 757px;
padding-bottom: 15px;
}
#latest .centerContent .leftCol {
width: 302px;
border: 1px solid #bdc1a3;
margin-right: 10px;
}
#latest .centerContent .leftCol.last{


margin: 0;
}
.infoBoxContent .featurePic{
float: left;
margin: 0 10px 5px 0;
height: 53px;
width: 70px;
overflow: hidden;
}
.infoBoxContent .aLesson .featurePic{
height: auto;
width: auto;
}

.featurePicTeachers{
float: left;
margin: 0 10px 5px 0;
min-width:200px;
overflow: hidden;
}

#content .centerContent .rightCol.secondary{
margin-bottom: 16px;
clear: right;
}
#content .centerContent .secondary.last{
margin-bottom: 0;
}

.authorbox{
padding:8px;
border: 1px solid #bdc1a3;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
}

.authboxpic{
float: left;
margin: 5px 10px 5px 0;
width: 70px;
overflow: hidden;
}
.authboxpic img{
width: 70px;	
}

.feedbox{
background:url(images/feedicon.png) no-repeat;
}

.feedtext{
padding-left:75px;
width:182px;
display:block;
}

.feedtext h2 a{
color: #66cc00;
font-size:18px;
line-height:18px;
}


/**************************************

Nav

***************************************/

#navContainer{
height: 28px;
width: 100%;
background-image: url(images/nav.png);
background-repeat: no-repeat;
background-position: center top;
}
#nav{
margin: 0 auto;
width: 969px;
position: relative;
z-index: 100;
}
#nav a{
display: block;
height: 28px;
overflow: hidden;
background-image: url(images/nav.png);
background-repeat: no-repeat; 
float: left;
}
#nav a#home{
background-position: -194px 0px;
width: 79px;
}
#nav a#home:hover, #nav a#home.active{
background-position: -194px -28px;
}
#nav a#about{
background-position: -273px 0px;
width: 118px;
}
#nav a#about:hover, #nav a#about.active{
background-position: -273px -28px;
}
#nav a#curriculum{
background-position: -391px 0px;
width: 114px;
}
#nav a#curriculum:hover, #nav a#curriculum.active{
background-position: -391px -28px;
}
#nav a#conversations{
background-position: -505px 0px;
width: 152px;
}
#nav a#conversations:hover, #nav a#conversations.active{
background-position: -505px -28px;
}
#nav a#forums{
background-position: -657px 0px;
width: 91px;
}
#nav a#forums:hover, #nav a#forums.active{
background-position: -657px -28px;
}
#nav a#teachers{
background-position: -748px 0px;
width: 149px;
}
#nav a#teachers:hover, #nav a#teachers.active{
background-position: -748px -28px;
}
.users{
padding: 3px 10px 0 0px;
float: right;
color: white;
}
.users ul{
list-style: none;
}
.users ul li{
float: left;
padding: 3px;
margin: 0 5px;
background-color: black;
}
.dropDownMenu{
width: 675px; 
background-color: black; 
position: absolute; 
top: 28px; 
left: 100px;
color: white;
display: none;
padding-bottom: 32px;
}
#articlesDD{
top: 28px; 
left: 214px;
overflow: hidden;
}
.dropDownMenu h4{
padding: 5px 7px;
background-color: #333333;
margin: 7px 0 10px 0;
color: white;
font-size: 12px;
}
.menuList ul{
list-style: none;
margin: 0;
padding: 0;
float: left;
line-height: 1.1em;
}
.menuList ul li{
padding: 0;
float: left;
clear: left;
}
#lessonsDD .menuList ul li a,

#articlesDD .menuList ul li a {
background-image: none;
display: block;
padding: 5px 8px;
margin: 0px 3px 0 0px;
color: white;
height: auto;
width: 80px;
text-decoration: none;
}
#lessonsDD .menuList ul li a:hover,
#articlesDD .menuList ul li a:hover{
background-color: #b6f82b;
color: black;
}
.menuList{
float: left;
padding: 10px 0px 0 20px;
}
.allLink{
cursor: hand;
cursor: pointer;
padding: 4px 7px;
background-color: #b6f82b;
color: black;
font-weight: bold;
position: absolute;
bottom: 8px;
right: 8px;
}
/*
min-height: 438px;
height: auto !important;
height: 438px;


azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
*/
/**************************************

Footer

***************************************/
#footer{
background: none;
background-image: url(images/footer.png);
background-repeat: no-repeat;
background-position: center top;
width: 100%;
height: 181px;
text-align: center;
font-size: 11px;
}
#footer .centerContainer{
text-align: left;
margin: 0 auto;
width: 952px;
padding: 105px 10px 0px 10px;
height: 100%;
color: #d6dabf;
}
#footer ul{
list-style: none;
margin: 0;
padding: 48px 0 0 0;
line-height: 1em;
}
#footer li{
display: inline;


padding: 5px 20px;
}
#footer li a{
color: black;
text-decoration: none;;
}
#footer li a.noDec{
text-decoration: none;
}

/**************************************

Comments
Note: These styles below are what is necessary for the YATCP threaded comments plugin to work, hence the crazy class names.

***************************************/
select#comment_parent{
width: auto;
}
.authorline {
font-size: 0.8em;
font-style: italic;
}
ol.yatcp_commentlist {
margin: 0;		
padding: 0;		
list-style-type: none;
}
ol.yatcp_commentlist li {
border: 1px dotted #bdc1a3;
border-left-style: solid;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
color:#000;
margin:3px 0 3px 0; 
padding:5px;
}
ol.yatcp_commentlist li a{
color:#666;
} 
ol.yatcp_commentlist li.alt {
border: 1px dotted #bdc1a3;
border-left-style: solid;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
color:#000;
margin:3px 0 3px 0; 
padding:5px;
}
ol.yatcp_commentlist li.alt a{
color:#666;
}
ol.yatcp_commentlist li ol {
margin: 5px;
list-style-type: none;
}
.commentgrav{
padding:4px;
}
.avatar{
width:40px;
height:40px;
}
#commentform textarea{
width: 565px;	
}
/**************************************

Teacher Profiles

***************************************/

#authwrap{
margin:0;
padding:0;
}

#authleft{
float:left;
width:215px;
padding-top:10px;
}

#authleft li{
list-style-type:none;
}

#authright{
float:right;
width:372px;
padding-top:10px;
}

#listphoto{
background:#000 url(images/auth_photo_back.jpg) repeat-x;
border-top: 1px solid #66CC00;
padding-left:7px;
padding-top:7px;
padding-bottom:7px;
width:207px;
}

#topalbums{
margin-top:10px;
}

#favsongs{

}

.songname{
line-height:normal;
font-style:italic;
}

.artname{
font-weight:bold;
line-height:normal;
margin-bottom:4px;
}

#topartists{

}

#authname{
width:100%;
height:24px;
border-bottom:1px solid #66CC00;
padding-left:10px;
padding-top:3px;
}

#authname h2{
font-size:24px;
color:#000;
padding:0;
margin:0;
line-height:24px;
}

#authfrom{
padding-left:10px;
}


#authinfo{

}

#authinfo li{
list-style-type:none;
font-size:14px;
}

#authbio{
padding-left:10px;

}

.authheading{
color:#000;
font-size:12px;
}

.authheading2{
color:#000;
font-size:14px;
border-bottom:1px solid #66CC00;
width:100%;
}

.authcontent{
width:100%;
}

.authcontent h2{
color:#000;
font-size:14px;
}

#authpromo{
background:#000 url(images/authpromo_top.png) no-repeat bottom;
width:200px;
padding:7px;
}

#authpromobg{
background:url(images/authpromo_bottom.png) no-repeat top center;
width:214px;
height:29px;
}

.promoheading{
color:#fff;
}

#authpromo p{
color:#fff;
}

#authlessons{
margin-top:12px;
padding-left:10px;
}

.aLesson2{
clear: left;
padding: 16px 0 8px 0;
border-bottom: 1px dotted #8fe92d;
}

/**************************************

Album Reviews

***************************************/

#reviewbox{
padding:5px;
margin: 0px 10px 10px 0px;
width: 175px;
color: #000;
background-image: url(images/contentLeftBack.jpg);
background-repeat:repeat-x;
border: 1px solid #bdc1a3;
float:left;
}

#reviewcover{
height:175px;
width:175px;
background:#000;
margin-bottom:6px;
}

#reviewtracks{
width:175px;
margin-bottom:10px;
}

#reviewmeta{
width:175px;
margin-bottom:10px;
}

#reviewrating{
width:175px;
}

#reviewtracks ol{
margin-left:26px;
}

#reviewtracks li{
padding-bottom:3px;
padding-top:3px;
font-size:1.1em;
border-bottom:1px dotted #666;
}

#reviewmeta ul{
margin:0;
padding:0;
}

#reviewmeta li{
padding-bottom:3px;
font-size:1.1em;
}

#reviewrating ul{
margin:0;
padding:0;
}





/**************************************

Links Page Styling

***************************************/

#linkslist{

}

#linkslist li{
list-style-type:none;
}

/**************************************

Search Box

***************************************/
.search{
height: 18px;
width: 200px;
font-family:Trebuchet MS,Georgia,Arial,Helvetica,sans-serif;
vertical-align:middle;
font-size: 12px;
}
.searchContainer{
position: absolute;
left: 0px;
top: 0px;
height: 35px;
background-color: black;
width: 617px;
-moz-opacity: 0.85;
opacity:.85;
filter: alpha(opacity=85);
}
.upperTab{
position: relative;
height: 35px;
z-index: 50;
}
.searchContent{
padding: 5px 15px 5px 8px;

color: white;
position: absolute;
top: 0;
left: 0;
z-index:50;
width: 594px;
}
.searchContent a{
color: white;
text-decoration: none;
font-weight: bold;
}
.loginBox{
padding: 5px;
float: right;
}

.searchContent input{
vertical-align:middle;
}
/**************************************

Lesson Player

***************************************/
#content .centerContent .lessonSectionTitle{
width: 952px; 
padding: 0; 
clear: left;	
}
#content .centerContent .lessonSectionTitle .infoBoxContent a{
color: #BDC1A3;
}
#content .centerContent .lessonSectionTitle .infoBoxContent{
height: auto;
background: none;
background-color: black;
color: white;
}
#content .centerContent .lessonSectionTitle .aLesson{
padding:4px 0 0;	
}
.lessonHead{
padding: 5px 0 0;		
}
.relative{
position: relative;	
}
.lessonContent{
background-color: black;
height: 606px;
margin-bottom: 60px;
background-image: url(images/sampleslide.gif);
background-position:8px 384px;
background-repeat: no-repeat;		
}
.lessonContent p{
margin: 0;
}
.lessonCorner{
background-image: url(images/contentBack_bottom_clean.png);
background-repeat: no-repeat;
background-position: bottom left;	
height:290px;
left:-203px;
position:absolute;
top:411px;
width:555px;
z-index:200;
}
/**************************************

Forum Changes

***************************************/
#content .centerContent .fullForum{
width: 952px;	
}
#content .centerContent .fullForum .infoBoxContent{
min-height: 385px;
height: auto !important;
height: 385px;
padding-top: 20px;	
} 
/**************************************

JQuery Step Carousel

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

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

.stepcarousel .panel{
float: left; /*leave this value alone*/
width: 587px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height: 164px;
}
.black{
	background-color: black;	
	
}
#mygallery{
clear: right;
}


/**************************************

Utility

***************************************/
.left{
float: left;
}
.right{
float: right;
}
.clr{
clear: both;
}
.marLeft{
margin-left: 10px;
}
.indentPara{
padding-left: 25px;
}

.picture{
margin-bottom: 10px;
}
.classMargin{
margin-right: 12px;
}

.marginTop{
margin-top: 18px;
}
.clearfix:after {
content: ".";

display: block;
height: 0;
clear: both;
visibility: hidden;
}
.vMid{
vertical-align:middle;
}
.noBorder{
border: none;
margin-top: 10px;	
}
.small{
margin: 0;
padding: 3px 0;
font-size: 11px;	
font-style: italic;
clear:none;
float: left;
}
.dottedDivide{
height: 2px; 
overflow: hidden; 
padding: 0;	
border-top: 1px dotted #8fe92d;
clear: left;
}
/**********************************

Pagination

**********************************/
.pagination{
float: right;
width: 400px;
padding: 5px 0 0;
}
.pagination a{
color:white;
display:block;
float: right;
line-height: 19px;
margin-left:3px;
}
.pagination a.pageLinks{
text-align:center;
width:20px;
border: 1px solid black;
height:20px;
background-color:black;
}
.pagination a.limits{
text-align:center;
width:20px;
height:20px;
color: black;
}
.pagination a:hover,.pagination a.active{
background-color:#B6F82B;
color: black;
text-decoration: none;
}
.pagination a.limits:hover{
background-color: transparent;
text-decoration: underline;		
}
.pagination a.subdue{
-moz-opacity: 0.4;
opacity:.4;
filter: alpha(opacity=40);
}
.donate{
background-color:black;
float:right;
height:21px;
padding:7px;
text-align:right;
width:302px;
color: white;
}
.donate div.left{
padding: 3px 0 0 13px;
}
.authorDonate{
padding: 10px 0 0 80px;
}

.authorDonate a{
font-weight:bold;
color:#66cc00;
}

.authorDonate a:hover{
font-weight:bold;
color:#333333;
}