@charset "UTF-8";
* {
	margin: 0;
}
html, body {
	height: 100%;
}
body {
	background: #3F9C35 url(/module/III/images/bg.jpg) repeat-y center;
	color: #666;
	font-family: 'Helvetica Neue', Helvetica,  Arial, Tahoma, HelveticaNeue, 'DejaVu Sans Condensed', sans-serif;
	font-size:12px;
	font-weight:lighter;
	line-height: 16px;
	margin: 0;
	padding: 0;
	text-align:center;
}
p, a, input {
	font-size: 1em;
	line-height: 1.3em;
}
p{
	margin: 0 0 10px;
}
a {
	color: #3F9C35;
	outline:none;
}
a:hover {
	color: #007934;
}
a img{border:none;}
h1 {
	color: #3F9C35;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size:2em;
	font-weight:lighter;
	letter-spacing:-.06em;
	line-height: 0.9em;
	text-transform:uppercase;
}
h1#title a, h1#logo a, h1#dwLogo a{
	margin:0;
	padding:0;
}
h1#title{	
	height:30px;
	left:0;
	position:relative;
	top:55px;
	width:580px;
}
h1#title a{
	background: url(/module/III/images/moduleTitle.jpg) no-repeat;
	display:block;
	height:30px;
	width:580px;
}
h1#logo{
	height:40px;
	position:absolute;
	right:0;
	top:50px;
	width:97px;
}
h1#logo a{
	background: url(/module/III/images/gpsLogo.jpg) no-repeat;
	display:block;
	height:41px;
	width:97px;
}
h1#dwLogo{
	height:35px;
	float:right;
	position:relative;
	right:0;
	top:-26px;
	width:90px;
}
h1#dwLogo a{
	background: url(/module/III/images/dwLogo.jpg) no-repeat;
	display:block;
	height:31px;
	width:98px;
}
h1#title a span, h1#logo a span, h1#dwLogo a span, a.more span, a.takeQuiz, a.topPicks, a.moreInfo{
	display:block;
	height:100%;
	text-indent:-9999px;
	width:100%;
}
h2 {
	color: #3F9C35;
	font-family:Futura, 'Century Gothic', AppleGothic, sans-serif;
	font-size:18px;
	font-weight:normal;
	line-height: 18px;
	text-align:left;
	text-transform: uppercase;
}
#leftCol h2, #rightCol h2{
	border-top: 1px #666 solid;
	margin:10px 0 5px;
	padding-top: 10px;
}
#leftCol h2.first, #rightCol h2.first{
	border-top:none;
	margin-top:0;
	padding-top:0;
}
#sidebar h2 img{margin-bottom:5px;}
#videopg #mainContent h2{margin: 5px 0;}
h3 {
	color:#3F9C35;
	font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size:1.4em;
	font-weight:lighter;
	line-height: 1.3em;
	text-transform:uppercase;
}
h4{
	color: #666;
	font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
	font-size: 14px;
	font-weight:lighter;
}
h5{
	color:#3F9C35;
	font-family:'Helvetica Neue', Helvetica,  Arial, Tahoma, HelveticaNeue, 'DejaVu Sans Condensed', sans-serif;
	font-size:14px;
	font-weight:200;
	line-height:1.5em;
}
#sidebar h3{	
	padding: 0 10px;
}
input {
	padding: .1em;
}
ul, ol{padding:0;margin:0 0 0 15px;}
#contentpg ol li{margin:5px 5px 10px;}
#sidebar ul{margin-bottom:20px;}
#sidebar p, #tipjar p, #tipjar ul, #tipjar ol{font-size:.9em;}
li{padding:0;margin:3px 0;}

/* NAV */
ul#nav {
	font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
	font-size:.9em;
	font-weight:lighter;
	text-transform:uppercase;
}
#footer h1{
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

#container {
	background: #FFF;
	height: auto !important;
	height: 100%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	min-height: 100%;
	position:relative;
	text-align: left; /* this overrides the text-align: center on the body element. */
	width:900px;
}
#header { 
	background: #FFF;
	height:200px;
	position:relative;
} 
a#backLink{bottom:60px;position:absolute;text-decoration:none;}
ul#nav{
	border-top:1px #3F9C35 solid;
	bottom:30px;
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	position:absolute;
	width:100%;
}
ul#nav, ul#nav li {
	list-style:none;
	margin:0;
	padding:0
}
ul#nav li {
	float:left;
	text-align: center;
	padding:10px 3px 0;
}
ul#nav a {
	padding: 2px;
	color:#666;
	text-decoration:none;
}
ul#nav a:hover {
	background: #007934;
	color: #FFF
}
ul#nav li span{margin: 0 0 0 6px;}
#sidebar {
	background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
	float: right; /* since this element is floated, a width must be given */
	padding: 0 0 15px;
	position:relative;
	width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
}
#sidebar h3{color:#333;font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;font-size:16px;margin:0 0 10px 0;padding:0;}
#bonusBox{
	position:relative;
	top:0;
}
#bonusBox ul, #bonusBox ol{width:220px;}
#bonusBox img.center{position:relative;left:100px;margin-top:15px;}
img#twitterBird{position:absolute;right:-5px;top:-87px;}
.topBg, .leftBg, .rightBg, .bottomBg{margin:0;padding:0;}
.topBg{
	background:url(/module/III/images/images/top.png) no-repeat;
	height:70px;
	position:relative;
	width:269px;
}
.leftBg, .rightBg{
	height:200px;
	position:absolute;
}
#videopg .leftBg, #videopg .rightBg{
	height:1440px;
}
#homepg.phase1 .leftBg, #homepg.phase1 .rightBg{height:320px;}
.Phase5 .leftBg, .Phase5 .rightBg{height:280px;}
.Phase6 .leftBg{height:180px;}
.Phase6 .rightBg{height:110px;}
.Phase7 .leftBg{height:360px;}
.Phase7 .rightBg{height:390px;}
.leftBg{
	background:url(/module/III/images/images/left.png) repeat-y;
	left:0;
	top:70px;
	width:3px;
	z-index:900;
}
.rightBg{
	background:url(/module/III/images/images/right.png) repeat-y;
	right:0;
	top:36px;
	width:9px;
	z-index:900;
}
.bottomBg{
	background:url(/module/III/images/images/bottom.png) no-repeat;
	bottom:165px;
	height:152px;
	position:relative;
	width:271px;
	z-index:700;
}
#funBox{
	position:relative;
	top:-150px;
}

	/* OLD tip jar */
	#tipjar{
		height:400px;
		margin-bottom:-150px;
		position:relative;
		top:-150px;
	}
	#tipjar .oddBox{
		top:40px;
		
	}
	#tipjar ol{margin-top:-5px;}
	#tipjar ol li{margin:0;}
	#tipBg{
		background: url(/module/III/P2/images/tipjar.png) no-repeat;
		height:288px;
		left:0;
		position:absolute;
		top:0;
		width:271px;
	}
	#homepg.phase1 #tipBg{background-image:url(/module/III/P1/images/tipjar.png);height:390px;}
	#tipBtn{top:-5px;z-index:2000;}
	
#aboutBox{
		height:160px;
		position:relative;
		top:0;
}
#aboutBox .oddBox{
		top:40px;
	}
#aboutBox ol{margin-top:-5px;}
#aboutBox ol li{margin:0;}
#aboutBg{
	background: url(/module/III/images/aboutBg.png) no-repeat;
	height:147px;
	left:0;
	position:absolute;
	top:0;
	width:271px;
}
.oddBox, .evenBox{
	display:block;
	padding: 5px 10px 0;
	position:relative;
	top:-16px;
}
.evenBox{
	background:#ECECED;
}
.zLift{display:block;position:relative;z-index:1000;width:265px;}
.zLift p{margin-right:15px;}
a.more, a.sideButton{
	display:block;
	float:right;
	position:relative;
	right:15px;
	top:-5px;
	
}
a.more{
	background:url(/module/III/images/moreBtn.png) no-repeat;
	height:22px;
	width:50px;
}
#mainContent { 
	margin: 0 300px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
#mainVideo{
	background:#666;
	height:380px;
	position:relative;
	width:600px;
}
#mainColumns{
	width:100%;
	margin-top:25px;
}
#leftCol, #rightCol{width:50%;float:left;}
#leftPad{
	clear:left;
	padding-right:10px;
}
#rightPad{	
	clear:left;
	border-left:.1em #666 solid;
	padding-left:10px;
}
#mainColumns #rightCol h2.first{margin-top:0;}
#homepg.phase1 #mainColumns #rightCol h2.first{margin-top:13px;}
.prevLinks{position:relative;padding-top:10px;}
.prevLinks a{display:block;}
a.takeQuiz{
	background: url(/module/III/P1/images/takequizButton.jpg) no-repeat;
	margin-bottom:10px;
	width:147px;
}
a.topPicks{
	background:url(/module/III/images/toppickButton.jpg) no-repeat;
	width:133px;
}
a.moreInfo{
	background:url(/module/III/images/moreinfoButton.jpg) no-repeat;
	display:block;
	height:26px;
	width:119px;
}
a.rightButton{
	display:block;
	float:right;
	height:25px;
	right:0;
	position:relative;
	top: 0;
	z-index:999;
}
#footer { 
	background:#FFF;
	border-top:1px #3F9C35 solid;
	height:30px;
	position:relative;
	margin-top:30px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* wrapper divs */
form.contactForm{position:relative;}
.custom-checkbox{position: relative;width:330px; display:block;}

/* input, label positioning */
form.contactForm input{
	display: block;
	background: url(http://dwgreen.com/calendar/images/input.gif) no-repeat;
	cursor: pointer;
	height:32px;
	left:-10px;
	margin:0;
	padding: .5em;
	position:relative;
	width:180px;
}
form.contactForm input:focus{
	background-position: 0px -52px;
}
form.contactForm label{
	position: relative;
	width:130px;
	z-index: 1;
}
textarea{
	background: #FFF url(http://dwgreen.com/calendar/images/textarea.gif) no-repeat;
	border:none;	
	padding: .5em;
	height:70px;
	left:-10px;
	position:relative;
	width:170px;
}
textarea:focus{background-position:0px -85px;}
label a{text-decoration:none;}

fieldset.checkList label{background-position: -10px -14px;}
fieldset.checkList label.hover, label.focus{background-position: -10px -114px;}
fieldset.checkList label.checked{background-position: -10px -214px;}
fieldset.checkList label.checkedHover, label.checkedFocus {background-position: -10px -314px;}

input, label, textarea, button{display:block;border:none;outline:none;}
button{
	clear:both;
	margin: 10px 0;
	padding:.5em;
	border:1px #acacac solid;
	background-color:#e7e8e8;
}


/* Previous Features */
.archiveRow{clear:both;margin-bottom:40px;}
.archiveBox{display:block;float:left;padding:10px;position:relative;width:31%;}
#featurespg #mainContent h2{margin-bottom:10px;}
h2#prevWeek{clear:both;}
.archiveBox h2{margin-bottom:5px;}
.videoBox, .readBox{}
.videoBox, .tipBox{padding-left:0;}
.tipBox, .bonusBox{padding:10px;width:47%;}
.tipBox{clear:left;}
.bonusBox{float:left;}

/* Workbook */
.workRow{float:left;padding:15px 13px;position:relative;width:30%;}
.workRow.first{padding-left:0;}
.workRow.last{border:none;}
.workRow img{display:block;position:relative;margin:0 auto;}
.workRow p{clear:left;padding:10px 10px 0 40px;}
#workbookpg #mainContent h2, #workbookpg #mainContent h3{margin:10px 0;}

p.right{text-align:right;}
p.left{text-align:left;}
.block{display:block;}
.bold{font-weight:bold;}
.center{text-align:center;}
img.right, a.right{display:block;float:right;margin-left:10px;}
img.left, a.left{display:block;float:left;margin-right:10px;}
span.highlight, p.highlight{color:#3F9C35;font-weight:normal;}
.hidden{display:none;}
.italic{font-style:italic;}

#archpg #mainContent, #quizpg #mainContent, #resultpg #mainContent, #aboutpg #mainContent, #featurespg #mainContent, #fullpg #mainContent, #workbookpg #mainContent{width:95%;}
#archpg h5{border-top:1px #3F9C35 solid;padding-top:10px;}
#archpg h5.first{border-top:none;padding-top:0;}
#quizpg h3, #resultpg h3{font-family:'Helvetica Neue', Helvetica,  Arial, Tahoma, HelveticaNeue, 'DejaVu Sans Condensed', sans-serif;font-weight:normal;}
#featurespg h3{border-bottom:1px #3f9C35 solid;}
#quizpg #headline, #quizpg .columnText, #resultpg #headline{position:relative;left:40px;padding-right:110px;}
#workpg #mainContent{width:600px;margin:0 auto;}
#contactpg #mainContent{width:400px;margin:0 auto;}
#glutenpg .leftBg, #glutenpg .rightBg{height:800px;}
#changepg .leftBg, #changepg .rightBg{height:160px;}
#aboutpg h2, #contactpg h2, #halfpg h2{margin-bottom:5px;}
#halfpg #mainContent{width:600px;}