body {
	margin:10px;
	padding:0;
	color:#333333;
	background-color:#102F3F;
	font: normal 14px Arial;
	text-align:center;
}
h1 {
	color: #102F3F;
	margin: 0px;
	padding: 0 0 5px 0;
	font: normal 24px Arial, Verdana, Helvetica, sans-serif;
}
h2 {
	color: #333333;
	margin: 0px;
	padding: 0 0 5px 0;
	font: normal 20px Arial, Verdana, Helvetica, sans-serif;
}
a {
	color:#3399CC;
}
a:hover {
	color:#0099FF;
	text-decoration:none;
}
ul {
	margin:0;
	padding:8px 0 5px 20px;
	list-style-image: url("/photocourses/_sharedCode/img/bullet.png");
	list-style-type: circle;
}
/*- CONTAINER ////////////////////////////////////
/////////////////////////////////////////////// */

.containter {
	width:980px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background:url("/photocourses/_sharedCode/img/bgpix.png") repeat-y top left;
}

/*- MAIN BODY /////////////////////////////////////
/////////////////////////////////////////////// */

.mainbody {
	background:url("/photocourses/_sharedCode/img/headerbg.png") no-repeat top left;
}

/* BP Logo */
.bplogo img {
	padding:0 15px 0 0;
}

/*- Menu Tabs --------------------------- */

.tabs {
	float:left;
	width:745px;
	font-size:18px;
}
.tabs ul {
	margin:0;
	padding:0;
	list-style:none;
}
.tabs li {
	float:left;
	margin:0;
	padding:0;
}
.tabs a {
	float:left;
	display:block;
	background:url("/photocourses/_sharedCode/img/tableft.png") no-repeat top left;
	margin:0;
	padding:0 2px 0 20px;
	text-decoration:none;
}
.tabs a span {
	float:left;
	display:block;
	height:70px;
	background:url("/photocourses/_sharedCode/img/tabright.png") no-repeat top right;
	color:#FFFFFF;
}
.tabs a span span {
	height:50px;
	padding:20px 20px 0 0;
}

.tabs a:hover {
	background-position:0% -70px;
}
.tabs a:hover span {
	color:#0033CC;
	background-position:100% -70px;
}
/* adds arrow on hover */
.tabs a:hover span span { 
	background:url("/photocourses/_sharedCode/img/arrow_on.png") no-repeat;
	background-position:30% 0%;
}


.activeTab a span {
	color:#FFF;
}
.activeTab a {
	background-position:0% -70px;
}
.activeTab a span {
	color:#0033CC;
	background-position:100% -70px;
}
.activeTab a span span { 
	background:url("/photocourses/_sharedCode/img/arrow_on.png") no-repeat;
	background-position:30% 0%;
}




/*- global navigation --------------------------- */

.globalnav {
	float:left;
	width:215px;
	padding:0;
	font-size:11px;
}
.globalnav ul {
	margin:0;
	padding:0;
	list-style:none;
}
.globalnav li {
	float:left;
	margin:0;
	padding:0;
}
.globalnav a {
	float:left;
	display:block;
	color:#FFFFFF;
	height:44px;
	padding:10px 8px 0 8px;
	text-align:center;
	text-decoration:none;
}
.globalnav a:hover {
	color:#3399CC;
	background-color:#243E4C;
}


.globalnavActive a {
	color:#3399CC;
	background-color:#243E4C;
	height:44px;
	display:block;
	padding:10px 8px 0 8px;
	text-align:center;
	text-decoration:none;
}

/*- CONTENT //////////////////////////////////
/////////////////////////////////////////////// */

.content {
	clear:both;
	padding:0 10px;	
}

/*- maincontent --------------------------- */

.maincontent {
	float:left;
	width:755px;
	margin:0;
	padding:0;
}
.instructorpic {
	float:left;
	width:58px;
	margin:0;
	padding:0;
}
.courseinfoH { /* H = home page style*/
	float:left;
	margin:0;
	padding:0 0 0 10px;
	width:681px;
}
.courseinfoQ { /* Q = qna page style*/
	float:left;
	margin:0;
	padding:0 0 0 10px;
	width:856px;
}

.courseinfo {
	float:left;
	margin:0;
	padding:0 0 0 10px;
	width:500px;
}
.courseinfo h1, .courseinfoH H1 {
	color:#102F3F;
	font: bold 20px Arial;
	margin:0 0 1px 0;
}
/* large buttons on lessons page */
.buttons {
	float:left;
	margin:0;
	padding:0;
	width:181px;
}
.buttons ul {
	margin:0;
	padding:0;
	list-style:none;
}
.buttons li {
	float:left;
	display:inline;
	margin:0;
	padding:0;
}
.showhideoutline a {
	display:block;
	margin:0;
	padding:0;
	width:111px;
	height:74px;
	background: url("/photocourses/_sharedCode/img/b_showhideoutline.png") no-repeat top left;
}
.printoutline a {
	display:block;
	margin:0;
	padding:0;
	width:70px;
	height:74px;
	background: url("/photocourses/_sharedCode/img/b_printoutline.png") no-repeat top left;
}
.showhideoutline a:hover, .printoutline a:hover {
	background-position:100% -74px;
}
.showhideoutline span, .printoutline span {
	display:none;
}
	
/*- body content --------------------------- */
.contentbody, .contentbodyH {
	clear:both;
	margin:0;
	padding:0;
	width:755px;
	color:#63635D;
}

.contentbodyQ {
	clear:both;
	margin:0;
	padding:0;
	width:965px;
	color:#63635D;
}
.contentbody {
	background:#E8E8D1 url("/photocourses/_sharedCode/img/beigebttmcorners.png") no-repeat bottom left;
}
.title1 {
	padding:0 10px;
	color:#333333;
	font: bold 18px Arial;
	background:#E8E8D1 url("/photocourses/_sharedCode/img/beigetopcorners.png") no-repeat top left;
}
.hrl {
	margin:0;
	padding:5px 0 5px 0;
	height:4px;
	width:755px;
	background: url("/photocourses/_sharedCode/img/hrdotted.png") repeat-x top left;
}
.hrq {
	margin:0;
	padding:5px 0 5px 0;
	height:4px;
	width:965px;
	background: url("/photocourses/_sharedCode/img/hrdotted.png") repeat-x top left;
}
/* Home page section */
.currentcourse .photoofweek {
	float:left;
	margin:0;
	padding:0;
}
.currentcourse {
	float:left;
}
.photoofweek {
	float:right;
}
.hfbox {
	margin:0;
	padding:0;
	width:370px;
	min-height:330px;
	background:#E8E8D1 url("/photocourses/_sharedCode/img/cornerstop-s.png") no-repeat top left; /* top corners for home Current Course and Photo of the Week boxes */
}
.hfbox h2 {
	color:#CC6600;
	margin:0;
	padding:0 0 5px 0;
	font: normal 20px Arial, Verdana, Helvetica, sans-serif;
}
.hfbox img {padding:0 10px 5px 0;}/* add right and bottom padding to photos on Current Course and Photo of the Week boxes */
.hfboxc {padding:10px}
.bchall { /* bottom corners for Current Course and Photo of the Week boxes */
	clear:both;
	margin:0 0 10px 0;
	padding:0;
	width:370px;
	height:10px;
	background:#E8E8D1 url("/photocourses/_sharedCode/img/cornersbttm-s.png") no-repeat bottom left;
}
.box1, .box2 {
	width:350px;
	margin:0;
	padding:0 10px;
}
.pwbox1, .pwbox2 {
	margin:0;
	padding:0 10px 0 10px;
}
.pwbox1 {
	width:150px;
}
.pwbox2 {
	width:180px;
}
.box1, .pwbox1 {
	float:left;
}
.box2, .pwbox2 {
	float:right;
}

/* Lessons section */

.coursedetail {
	float:left;
	width:570px;
	padding:10px;
}
.coursepic {
	float:left;
	width:110px;
	padding:10px;
	text-align:center;
}
.coursecomplete a, .coursecurrent a, .coursepending a {
	font-weight:bold;
}
.coursecomplete, .coursecurrent, .coursepending {
	width:735px;
	margin:0 0 0 10px;
	padding:0;
	border-bottom:5px solid #E8E8D1;
	background: url("/photocourses/_sharedCode/img/cornerstop.png") no-repeat top left; /* top corners for Current and Complete Lesson boxes */
}
.coursecomplete { /* bg color for Completed Lessons box */
	background-color:#D0D0BC;
}
.coursepending { /* bg color for pending Lessons box */
	background-color:#DEDEC9;
}
.coursecurrent {/* bg color for Current Lessons box */
	background-color:#CCFF99;
}
.bcall { /* bottom corners for Current and Complete Lesson boxes */
	clear:both;
	width:735px;
	height:10px;
	background:url("/photocourses/_sharedCode/img/cornersbttm.png") no-repeat bottom left;
}
/*- right column --------------------------- */

.contentright {
	float:right;
	padding:5px;
	width:175px;
	background:#CCCCCC url("/photocourses/_sharedCode/img/graybttmcorners.png") no-repeat bottom left;
}
.contentright ul {
	margin:0;
	padding:8px 0 5px 20px;
	list-style-image: url("/photocourses/_sharedCode/img/bullet.png");
	list-style-type: circle;
}
.contentright p {
	margin:0;
	padding:0;
}
.crtitle {
	color:#333333;
	font: bold 14px Arial;
}
.smalltitle {
	color:#333333;
	font: bold 10px Arial;
}
.smalltitle1 {
	color:#333333;
	font: 10px Arial;
}
.smalltitle2 {
	color:#333333;
	font: 12px Arial;
}
.introtext1 {
	color:#333333;
	font: 11px Arial;
}

.graycorners {
	width:185px;
	background: url("/photocourses/_sharedCode/img/graybttmcorners.png") no-repeat top left;
}

/*- FOOTER /////////////////////////////////////
/////////////////////////////////////////////// */

.footer {
	clear:both;
	height:15px;
	padding:20px 0;
	color:#FFFFFF;
	font-size:12px;
	text-align:center;
	background:#102F3F url("/photocourses/_sharedCode/img/footerBG.png") no-repeat top left;
}
.footer a {
	color:#FFFFFF;
}
.footer a:hover {
	color:#3399CC;
}

/*- CLEAR FIX /////////////////////////////////////
/////////////////////////////////////////////// */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {display: inline-block;}  /* for IE/Mac */

/* if IE */
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
/* End IE */




input.text, textarea.text, select.text
{
    font-family: Arial, Tahoma, Verdana, Helvetica;
    font-size: 11px;
    border: 1px solid #666;
    padding: 3px;
    /*width: 125px;*/
    background: #ecebeb;
    margin: 1px 0 1px 0;
}


.button span {font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 13px; padding: 6px 0 13px 0; line-height: 32px}
.button.rightmost {margin-right: 0px}
.button.leftmost {margin-left: 0px}
span.button_l {background-image: url('http://www.betterphoto.com/photocourses/_sharedCode/img/btn_ends.gif'); background-repeat: no-repeat; background-position: top left; padding-left: 3px}
span.button_c {background-image: url('http://www.betterphoto.com/photocourses/_sharedCode/img/btn_c.gif'); background-repeat: repeat-x; background-position: top left; padding-left: 10px; padding-right: 10px; color: #333333}
span.button_r {background-image: url('http://www.betterphoto.com/photocourses/_sharedCode/img/btn_ends.gif'); background-repeat: no-repeat; background-position: top right; padding-right: 5px}
.button.hovered .button_l, .button.pulsate .button_l, .button.orange .button_l, .button.hovered .button_r, .button.pulsate .button_r, .button.orange .button_r {background-image: url('http://www.betterphoto.com/photocourses/_sharedCode/img/btn_orange_ends.gif')}
.button.hovered .button_c, .button.pulsate .button_c, .button.orange .button_c {background-image: url('http://www.betterphoto.com/photocourses/_sharedCode/img/btn_orange_c.gif')}
a.button_a, a.button_a:visited, a.button_a:hover, a.button_a:link, a.button_a:active {text-decoration: none; color: #6f6f6f}
.button.hovered span.button_c, .button.orange span.button_c, .button.pulsate span.button_c {color: #333333 }
.button.disabled .button_c {color: #ccc}
