/*
http://capitalismis.com
October 2012
Design and Development by Andy Rutledge, R.A. Ray, and Angela Conlon
Unit Interactive http://unitinteractive.com/

This site uses Utopia Std. and Veer Annabelle served up by Typekit http://typekit.com/

*/

/* RESET STYLES ------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin:0;  padding:0;  border:0;  outline:0;  font-size:100%;  vertical-align:baseline;  background:transparent}
body{line-height:1; background:#333 url(../capImgs/bg_base.png) repeat; font-family: "utopia-std", Georgia, Times, serif; color:#fff; text-align:center;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
h1, h2, h3, h4, h5, h6 {text-align:center; font-weight:normal;}
p, ul, ol, dl, blockquote {text-align:center; color:#fff;}
ul, ol{ list-style:none}
a:link, a:visited {text-decoration: none;}
a:hover {text-decoration: none; cursor:pointer;}
li a:link, li a:visited, p a:link, p a:visited {color:#fff;}
li a:hover, p a:hover {color: #000;}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:'';  content:none}
del{text-decoration:line-through}
abbr[title], dfn[title], acronym {border-bottom:1px dotted #999; cursor:help}
table{border-collapse: collapse; border-spacing:0}
input, select{vertical-align:middle}
.clear{clear:both; display:block; height:1px}

/* BASIC PAGE STYLES ---------------------------------------------- */

img.logo {position: absolute; top: 40px; left: 50%; margin-left: -39px; width: 78px; height: 75px; z-index:500;}

article {clear: both; position: relative; overflow: hidden; z-index: 1;}
article {height: 800px;}
.about article {height: 800px;}
article#invite {height: auto; overflow: visible;}

.facts {margin: 0 auto; padding: 0 30px; clear: both; position: relative; z-index: 5;}
article h1 {margin: 0 auto; font-size: 40px; line-height: 1.3em; display: inline-block; font-weight: normal;}
article#intro h1 {margin: 25% auto 0;}
article#intro h1 a:link, article#intro h1 a:visited {color: #ddd; text-decoration: none; border-bottom: 2px dotted #ddd;}
article#intro h1 a:hover {color: #333; text-decoration: none; border: none;}
article#invite h1 {font-size: 46px; filter: alpha(opacity=50); opacity: 0.5;}
.facts h1 em {font-family: "jbt-annabelle", georgia, Times, serif; font-style: normal;}
article h2 {margin: 20px auto 0; font-size: 40px; line-height: 1.3em; color: #000; filter: alpha(opacity=50); opacity: 0.5}
#intro h2 {font-family: "jbt-annabelle", Georgia, Times, serif;}
article h3 {margin: 40px auto 0; padding-bottom: 50px; font-size: 30px; line-height: 1.3em; color: #fff; background: url(../capImgs/lines.png) no-repeat center bottom;}
#invite h3 {font-size: 40px;}

img.arrow {margin: 10px auto 0; width: 48px; height: 148px; clear: both; display: block;}

p.introInfo {margin: 20px auto 0; max-width: 600px; font-size: 20px; zoom: 1; filter: alpha(opacity=60); opacity: 0.6; line-height: 1.4em; font-style: italic; position: relative; z-index: 1000;}

p.introInfo a:link, p.introInfo a:visited {color: #fff; text-decoration: none; border-bottom: 2px dotted #fff;}
p.introInfo a:hover {color: #333; text-decoration: none; border: none;}

p.toggle {margin: 40px auto; clear: both; width: 44px; height: 44px; display: block; text-indent: -99999px; background: url(../capImgs/togglei.png) no-repeat 0 0; position: relative; z-index: 1000;}
p.toggle:hover {cursor: pointer; background: url(../capImgs/togglei.png) no-repeat 0 -44px;}

p.moreInfo {display: none; margin: 0 auto; max-width: 600px; font-size: 20px; zoom: 1; filter: alpha(opacity=50); opacity: 0.5; line-height: 1.4em; font-style: italic; text-shadow: -1px -1px 0 #000;}
#poverty p.moreInfo {filter: alpha(opacity=70); opacity: 0.7;}
p.moreInfo span.contrast {color: #000; text-shadow: none; filter: alpha(opacity=100); opacity: 1;}

.smWrap {margin: 0 auto; clear: both; width: 187px; text-align: center;}
p.btn1 {margin: 50px auto 0; text-indent: -9999px;}
p.btn1 a:link, p.btn1 a:visited {width: 187px; height: 49px; display: block; background: url(../capImgs/btn_getstarted.png) no-repeat 0 0;}
p.btn1 a:hover { background: url(../capImgs/btn_getstarted.png) no-repeat 0 -49px;}
p.btn1 a:active { background: url(../capImgs/btn_getstarted.png) no-repeat 0 -98px;}

#quiz {clear: both; width: 100%; position: relative; /*overflow: visible;*/} /* changed by R.A. on 11/20 */
.poser {clear: both; margin: 0 auto; padding: 0 30px 40px; max-width: 600px; background: url(../capImgs/lines.png) no-repeat center bottom; display: block;}
.poser h1 {clear: both; font-family: "jbt-annabelle", georgia, Times, serif;}
.poser p, .response p {margin-top: 40px; font-size: 20px; line-height: 1.4em; text-align: left;}
.result p {zoom: 1; filter: alpha(opacity=50) !important; opacity: 0.5 !important;}
.response, .resources {clear: both; margin: 40px auto 0;}
.response li {margin: 0 20px; font-family: "jbt-annabelle", georgia, Times, serif; font-size: 40px; text-align: center; line-height: 80px;}
li#yes {float: left;}
li#yes span {margin: 0 auto; width: 90px; height: 80px; padding-bottom: 10px; display: block; background: url(../capImgs/yes.png) no-repeat center 0;}
li#no {float: right;}
li#no span {margin: 0 auto; width: 90px; height: 80px; padding-bottom: 10px; display: block; background: url(../capImgs/no.png) no-repeat center 0;}
li#yes span:hover {background: url(../capImgs/yes.png) no-repeat center -90px; cursor: pointer;}
li#no span:hover {background: url(../capImgs/no.png) no-repeat center -90px; cursor: pointer;}
li.choice-no, li.choice-yes {margin: 0 auto; width: 90px; height: 80px; padding-bottom: 10px; background: url(../capImgs/yesno_bg.png) no-repeat center 0;}
.no p {color: #b5dfdf;}
.yes p {color: #ffcaca;}
.response p strong {font-style: italic; color: #fff !important;}
.resources h2 {color: #fff; margin-bottom: 30px; filter: alpha(opacity=100); opacity: 1;}
.resources li {float: left; margin: 0 30px; padding: 15px 0; width: 260px; font-size: 18px;} /*added 10px side margin */
.resources li a:link, .resources li a:visited, .resources p a:link, .resources p a:visited {color: #b5dfdf; text-decoration: underline;}
.resources li a:hover, .resources p a:hover {color: #fff; text-decoration: none;}
.resources p {margin-top: 40px; font-size: 20px; line-height: 1.4em; text-align: center !important;}
.resources p a {margin: 0 15px;}

p.btn2,
p.btn3 {margin: 40px auto; text-indent: -9999px;}
p.btn2 a:link, p.btn2 a:visited,
p.btn3 a:link, p.btn3 a:visited {margin: 0 auto; width: 187px; height: 49px; display: block; background: url(../capImgs/btn_continue.png) no-repeat center 0;}
p.btn2 a:hover { background: url(../capImgs/btn_continue.png) no-repeat center -49px;}
p.btn2 a:active { background: url(../capImgs/btn_continue.png) no-repeat center -98px;}
p.btn3 a:link, p.btn3 a:visited {background: url(../capImgs/btn_finish.png) no-repeat center 0;}
p.btn3 a:hover { background: url(../capImgs/btn_finish.png) no-repeat center -49px;}
p.btn3 a:active { background: url(../capImgs/btn_finish.png) no-repeat center -98px;}

/* BACKGROUND COLORS ---------------------------------------------- */

article#intro {background-color: #999;}
article#liberty, article#life {background-color: #2d6c6c;}
article#force {background-color: #8c360d;}
article#slavery {background-color: #4e306b;}
article#wealth {background-color: #375c12;}
article#poverty {background-color: #ea8c00;}
article#rights {background-color: #2c4883;}
article#rational {background-color: #732b2b;}
article#invite/*, #quiz*/ {background-color: #333;} /* changed by R.A. on 11/20 */

/* For modern browsers */
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}



/* added by R.A. on 11/20 */
.content {
	overflow: hidden;
}

.content * {
	position: relative;
	left: 100%;
}

#invite .facts * {
	left: 0;
}