/*

Title: 		CSS
Author: 	Sandor Weisz, methodtree.com
Updated: 	

*/

/* @group Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background-repeat: no-repeat;
	background-position: 0 0;
}

/* remember to define focus styles! */

:focus, :active {
	outline: 0;
}

body {
	background: white;
	text-align: center;
	color: #000;
	font-size: 14px;
	line-height: 18px;
	font-family: Helvetica, Arial, sans-serif;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

.cf:after, .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.c\learfix:after, .c\f:after { line-height: 0; }
.clearfix, .cf { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix, * html .cf { height: 1%; }
.clearfix, .cf { display: block; }

/* @end */

/* @group Tags */

a {
	color: #f43100;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p, ul {
	margin-bottom: 1.2em;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

h2 {
	font-weight: bold;
	margin-bottom: 1em;
}

/* End hide from IE-mac */

/* @end */

/* @group Layout */

#header, #content, #footer {
	width: 940px;
	margin: 0 auto;
	text-align: left;
}

/* @end */

/* @group Header */

#header {
	height: 60px;
	position: relative;
}

#title {
	display: block;
	overflow: hidden;
	text-indent: -9999em;
	width: 408px;
	height: 37px;
	background-image: url(/i/title.gif);
	position: absolute;
	left: 0;
	bottom: -8px;
}

h1 {
	position: absolute;
	overflow: hidden;
	text-indent: -9999em;
	right: 0;
	bottom: 0;
	height: 34px;
	padding-left: 15px;
	width: 134px;
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* @end */

/* @group Content */

#content {
	width: 938px;
	background: #e7e7e7;
	border: 1px solid #c7c7c7;
	padding: 10px 0 10px 0;
	margin-bottom: 20px;
}

/* @group Nav */

#nav {
	width: 227px;
	float: left;
	margin: 0 20px 0 -9px;
	font-size: 14px;
	font-weight: bold;
}

#nav li {
	line-height: 1.3;
}

#nav li a {
	background: url(/i/arrow_black.gif) no-repeat 0 17px;
	padding: 14px 0 14px 24px;
	margin-left: 8px;
	display: block;
	color: #333;
	border-top: 1px solid #c7c7c7;
}

#nav #howitworks a {
	padding-top: 10px;
	background-position: 0 13px;
	border: none;
	margin-top: 0;
}

#nav li ul {
	margin-bottom: 1em;
	margin-left: 12px;
}

#nav li li {
	font-weight: normal;
	font-size: 12px;
	margin-left: 32px;
}

#nav li li.subhead {
	color: #858585;
	padding: 2px 0;
}

#nav li li a {
	border: none;
	color: #333;
	padding: 2px 0;
	background: none;
	margin: 0;
}

.howitworks #howitworks a, .theme #theme a.l1, .lesson #lesson a, .resources #resources a, .about #about a, .credits #credits a {
	border-top: none;
	background: none;
	text-shadow: #d02a18 1px 1px 0;
	color: #fff;
	margin-left: 0;
	padding-left: 32px;
	padding-top: 11px !important;
	background: url(/i/redstripe.gif) no-repeat 0 0 !important;
}

.howitworks #theme a, .lesson #resources a, .resources #about a, .about #signup a, .credits #nav #credits a  {
	border: none;
}

#nav #signup {
	background: url(/i/newwindow.gif) no-repeat right 50%;
}

#nav #credits a {
	border-bottom: 1px solid #c7c7c7;
}


/* @end */

/* @group Main */

#main {
	width: 640px;
	float: left;
	padding: 25px;
	background: white;
}

.pic {
	margin-bottom: 24px;
}

/* @end */

/* @end */

/* @group Specific */

/* @group How it works */

.howitworks h1 {
	background-image: url(/i/how_it_works.gif);
	width: 154px;
}

.howitworks .module {
	margin-bottom: 2.5em;
}

.howitworks .module img {
	float: left;
	margin-right: 22px;
	width: 300px;
	border: 3px solid #c7c7c7;
}

.howitworks h2 {
	color: #7f7f7f;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.2;
	margin-bottom: 0;
}

.howitworks h2 strong {
	text-transform: none;
	font-size: 27px;
	letter-spacing: 0;
	color: black;
	display: block;
	margin-top: 2px;
	margin-bottom: 6px;
}

.howitworks .module p {
	margin-bottom: 0;
}

.howitworks .learnmore {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 10px;
	margin-top: 10px;
	font-weight: normal;
}

.howitworks .learnmore a {
	line-height: 1;
	background: url(/i/double_arrow.gif) no-repeat right 50%;
	padding: 3px 18px 3px 0;
}

/* @end */

/* @group Themes */

.theme h1 {
	background-image: url(/i/themes.gif);
	width: 95px;
}

.theme h2 {
	font-size: 12px;
	margin-bottom: 1em;
	clear: both;
	font-weight: normal;
}

.theme h2 em {
	font-weight: bold;
	font-style: normal;
	font-size: 18px;
	margin-right: 10px;
}

#natemorgan {
	float: right;
	width: 256px;
	height: 192px;
	margin-left: 25px;
	margin-bottom: 25px;
	overflow: hidden;
}

.massivelyindented {
	text-indent: 300px;
}

/* @group Thumbs */

.theme .thumbs li {
	float: left;
	padding: 0 5px 5px 0;
	height: 100px;
	position: relative;
}

.theme .thumbs li a {
	display: block;
	width: 155px;
	height: 100px;
	position: relative;
}

.thumbs b {
	display: block;
	position: absolute;
	top: 75px;
	left: 0;
	width: 155px;
	font-size: 10px;
	line-height: 1;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: white;
	background: black;
	padding: 3px 0 4px 0;
}

.thumbs .nonhover a {
	background: url(/i/nonhover.png) repeat 0 0;
}

.thumbs .hover b {
	background: #f43100;
	font-weight: bold;
}


/* @end */

/* @group Modals */

.modal {
	text-align: left;
	padding-top: 8px;
	padding-left: 8px;
}

.modal .left {
	width: 375px;
	float: left;
}

.modal h3 {
	color: #666;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 4px;
	letter-spacing: normal;
	text-transform: uppercase;
}

.modal h2 {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 16px;
	padding-top: 4px;
}

.modal .left p {
	clear: both;
}

.modal .left p strong {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.modal .other {
	font-size: 10px;
	color: #444;
	line-height: 1.2;
}

.modal .other img {
	margin-bottom: 6px;
}

.modal .right {
	width: 200px;
	float: right;
	font-size: 12px;
	line-height: 1.2;
	padding-top: 5px;
	margin-right: 12px;
}

.modal .right img {
	margin-bottom: 6px;
}

.modal .right h5 {
	font-size: 10px;
	margin-bottom: 1em;
}

.modal .right h4 {
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 3px;
}

/* @end */

/* @end */

/* @group About the Lesson */

.lesson h1 {
	background-image: url(/i/about_the_lesson.gif);
	width: 205px;
}

.lesson h2 {
	font-weight: bold;
	font-size: 18px;
	line-height: 1.1;
	margin-bottom: .5em;
}

.lesson .module {
	width: 195px;
	margin-right: 25px;
	float: left;
	font-size: 13px;
	line-height: 1.3;
}

.lesson .last {
	margin-right: 0;
}

/* @end */

/* @group Resources */

.resources h1 {
	background-image: url(/i/resources.gif);
	width: 124px;
}

.resources .module {
	clear: both;
	margin-bottom: 22px;
	overflow: auto;
	border-bottom: 1px solid #f3f3f3;
}

.resources h2 {
	font-weight: bold;
	font-size: 22px;
	line-height: 1.1;
	width: 190px;
	float: left;
	margin-right: 20px;
	margin-bottom: 0;
}

.resources .module ul {
	float: left;
	width: 430px;
	margin-bottom: 0;
}

.resources .module li {
	margin-bottom: 22px;
	font-size: 12px;
	line-height: 1.4;
}

.resources .module li .linktitle {
	display: block;
	font-weight: bold;
	font-size: 15px;
	padding-bottom: 2px;
	color: black;
}

.resources .module li ul {
	float: none;
}

.resources .module li li {
	margin: 0;
}

.download {
	line-height: 2;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 0 4px 24px;
	background-position: 0px 1px;
	position: relative;
	top: 3px;
}

.pdf .download {
	background-image: url(/i/pdf.gif);
}

.link .download {
	background: url(/i/link.gif) no-repeat 0px 6px;
	padding-bottom: 0px;
}

/* @end */

/* @group About Us */

.about h1 {
	background-image: url(/i/about_us.gif);
	width: 106px;
}

.about .map {
	width: 305px;
	float: left;
	margin-bottom: 25px;
}

.about .map iframe {
	border: 1px solid black;
}

.about #manhattan {
	margin-right: 29px;
}

.about .map a {
	margin-top: 6px;
	display: block;
	font-weight: normal;
	color: black;
}

.about #staff {
	clear: both;
	border-top: 1px solid #f3f3f3;
	padding-top: 20px;
}

dl.staff {
	clear: both;
	margin-bottom: 10px;
}

.staff dt {
	float: left;
	width: 152px;
	margin-right: 20px;
}

.staff dd {
	float: left;
	font-size: 13px;
	line-height: 16px;
	width: 465px;
	margin-bottom: 20px;
}

.staff dd h2 {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 4px;
}

.staff dt img {
	border: 1px solid black;
	margin-bottom: 5px;
}

/* @end */

/* @group Credits */

.credits h1 {
	background-image: url(/i/credits.gif);
}

/* @end */

/* @end */

/* @group Footer */

#footer {
	clear: both;
	padding-bottom: 20px;
	font-size: 11px;
	line-height: 16px;
	color: #999;
}

#footer a {
	color: #333;
	margin-right: 6px;
}

#footer #contactemail {
	color: #999;
	padding-left: 6px;
	margin: 0;
}

.copyright {
	float: right;
}

/* @end */





/* @group Colorbox */

/* @group Custom styles */

/*#cboxContent.open {
	background: url(/i/colorbox/modal_bg.gif) repeat-y center 0;
}

#colorbox #cboxClose {left:0;}
#colorbox #cboxPrevious {left:27px;}
#colorbox #cboxNext {left:54px;}
#colorbox #cboxCurrent {left: 85px;}*/
/* @end */

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(/i/colorbox/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(/i/colorbox/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(/i/colorbox/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/i/colorbox/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(/i/colorbox/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(/i/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/i/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/i/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/i/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:3px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/i/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/i/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(/i/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(/i/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/i/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/i/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}

/* @end */