/*-----------------------------------------------------------------------------
relate2you.com Style Sheet

version:   1.0
author:    Jason Luther
email:     jluther@bluefilamentdesign.com
website:   http://www.bluefilamentdesign.com/
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  	margin: 0;
	padding: 0;
}
/* Center document */
body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}
#wrapper, #wrapper-faq, #wrapper-dyk, #wrapper-consider, #wrapper-comic, #wrapper-test, #wrapper-assert, #wrapper-beholder, #wrapper-comm, #wrapper-decisions, #wrapper-hp, #wrapper-remember, #wrapper-rights, #wrapper-resources, #wrapper-signs {
	margin: 0 auto;
	text-align: left;
	width: 960px;
}
#wrapper { background: url(images/r2y_background.jpg) top left no-repeat; }
#wrapper-faq { background: url(images/faq_background.jpg) top left no-repeat; }
#wrapper-dyk { background: url(images/dyk_background.jpg) top left no-repeat; }
#wrapper-consider { background: url(images/consider_background.jpg) top left no-repeat; }
#wrapper-comic { background: url(images/comic_background.jpg) top left no-repeat; }
#wrapper-test { background: url(images/test_background_top.jpg) top left no-repeat; }
#wrapper-assert { background: url(images/assert_background.jpg) top left no-repeat; }
#wrapper-beholder { background: url(images/beholder_background.jpg) top left no-repeat; }
#wrapper-comm { background: url(images/comm_background.jpg) top left no-repeat; }
#wrapper-decisions { background: url(images/decisions_background.jpg) top left no-repeat; }
#wrapper-hp { background: url(images/hp_background.jpg) top left no-repeat; }
#wrapper-remember { background: url(images/remember_background.jpg) top left no-repeat; }
#wrapper-resources { background: url(images/resources_background.jpg) top left no-repeat; }
#wrapper-rights { background: url(images/rights_background.jpg) top left no-repeat; }
#wrapper-signs { background: url(images/signs_background.jpg) top left no-repeat; }

/* Branding ---------------------------------------------------------------*/
#branding {
	float: left;
	width: 400px;
	height: 210px;
}
h1 {
	text-indent: -5000px;
	background:  url(images/logo2.gif) top left no-repeat;
	width: 350px;
	height: 200px;
	margin: 15px 0 0 70px;
}

#dyk {
	float: right;
	width: 400px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 18px 50px 0 0;
}
#dyk h3, #dyk p {
	margin-left: 30px;
}
#dyk h3 {
	margin-bottom: 5px;
}
#dykfact {
	height: 75px;
}
#dyk p {
	line-height: 2em;
	color: #004080;
}
#dyk a {
	color: #393;
	text-decoration: none;
	font-weight: bold;
}

/* Content ----------------------------------------------------------------*/
#content {
	clear: both;
	height: 515px;
	width: 958px;
	margin: -30px 2px 0 0;
	*margin: 0 2px 0 0;
}
#content-long {
	clear: both;
	height: auto;
	width: 958px;
	margin: -30px 2px 0 0;
	*margin: 0 2px 0 0;
	padding-bottom: 67px;
}

#test-subcontent {
	background: url(images/test_background_bottom.jpg) top left no-repeat;
	height: 425px;
	padding: 65px 0 0 0;
}
#test-subcontent #sub-content {
	/* margin-top: 100px; */
}

/* Navigation -------------------------------------------------------------*/
#nav {
	clear: both;
}
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 50px;
}
#nav ul {
	margin-left: 40px;
}
#nav {
	z-index: 100;
	font-family: Serifa BT, Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
}
#nav a {
	display: block;
	color: #000;
	text-decoration: none;
	height: 50px;
}
#nav a:hover {
	color: #808040;
}
#nav li {
	float: left;
	padding-top: 5px;
	padding-bottom: 4px;
}
#nav li.home {
	width: 90px;
	padding-left: 10px;
}
#nav li.test {
	width: 230px;
}
#nav li.signs {
	width: 175px;
}
#nav li.relationships {
	width: 155px;
}
#nav li.resources {
	width: 130px;
}
#nav li.faq {
	width: 75px;
}
#nav li.home a, #nav li.test a, #nav li.signs a, #nav li.resources a, #nav li.faq a {
	padding-top: 20px;
	height: 30px;
}
#nav li ul {
	position: absolute;
	left: -999em;
	font-size: 14px;
	width: 220px;
	padding-top: 2px;
	margin-left: 0px;
	z-index: 150;
}
/* #nav li.turn ul {
	margin-left: -47px;
} */
#nav li:hover ul {
	left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
#nav li.signs li, #nav li.relationships li {
	padding: 6px;
	background: #FFC;
	border-bottom: 1px solid #000;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	height: auto;
	width: 250px;
}
#nav li.signs li.top, #nav li.relationships li.top {
	border-top: 1px solid #000;
}
#nav li.signs li a {
	padding-top: 0px;
}
/* #nav li.signs li {
	width: 250px;
}
#nav li.relationships li {
	width: 250px;
} */
#nav li.signs li a, #nav li.relationships li a {
	height: auto;
}

.column1, .column2, #content .columna, #content .columnb, #content .columnc, .previousscene, .nextscene, #help, #media, #orgcredit {
	display: inline;
}
h2 {
	margin: 40px 0 20px 100px;
}
h2.remember {
	width: 330px;
}
#content-long h3 {
	font-size: 16px;
	margin: 40px 0 5px 100px;
}
#content p.subhead {
	position: relative;
	z-index: 50;
	width: 440px;
	font-size: 18px;
	margin: -45px 0 20px 410px;
}
.column1, .column2 {
	width: 350px;
	font: 13px Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.column1 {
	float: left;
	margin: 0 0 10px 100px;
}
.column1 a, .column1 a:visited {
	text-decoration: none;
	color:#900;
}
.column1 a:hover {
	background: #900;
	color: #FFF;
}
.column2 {
	float: right;
	margin: 0 100px 10px 0;
}
.column1 li, .column2 li {
	list-style-type: none;
	margin: 0 0 10px 0;
}
#content p.column_head {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 15px;
}
#content p, #content-long p {
	margin: 0 100px 20px 100px;
	font-size: 13px;
	font-weight: bold;
}
blockquote {
	font-size: 13px;
	font-weight: bold;
	margin: 15px 0 10px 120px;
}
.underline {
	border-bottom: 1px solid #000;
	color: #C00;
}
#content p.escape-tech {
	float: left;
	width: 300px;
	height: 130px;
	margin-right: 50px; 
}
.escape-example {
	width: 350px;
}
#content .column1 p, #content .column2 p {
	margin: 0 0 10px 0;
} 
.redflag {
	color: #F00;
}
#content .columna, #content .columnb, #content .columnc {
	width: 240px;
	float: left;
	margin: 0 0 10px 20px;
	font-size: 13px;
	font-weight: bold;
} 
#content .columna {
	margin-left: 100px;
}
#content .columna p, #content .columnb p, #content .columnc p {
	margin: 0 0 15px 0;
}
#content .columna li, #content .columnb li, #content .columnc li {
	list-style-type: none;
}
#content p.beholder {
	margin: 0 270px 20px 100px;
	font-size: 20px;
	font-weight: bold;
}
.receiver {
	color: #F00;
	font-size: 30px;
	font-family: Serifa BT, Georgia, "Times New Roman", Times, serif;
}
#content #scenario1 .versusquiz, #content #scenario3 .versusquiz, #content #scenario6 .versusquiz {
	margin-top: 26px;
}
#content #scenario4 .versusquiz {
	margin-top: 42px;
}
#content #scenariotest {
	height: 250px;
}
#technique3 p.tech3-examples {
	float: left;
	margin: 0;
}
.previousscene {
	clear: both;
	float: left;
	margin: 10px 0 0 100px;
}
.previousscene img {
	float: left;
	margin: 0 5px 0 0;
}
#content .previousscene p {
	padding: 11px 0;
	margin: 0;
	font-size: 16px;
	font-family: Serifa BT, Georgia, "Times New Roman", Times, serif;
}
.previousscene a, .nextscene a, .previousscene a:visited, .nextscene a:visited {
	color: #C00;
}
.previousscene a:hover, .nextscene a:hover {
	color: #000;
}
.nextscene {
	float: right;
	margin: 10px 110px 0 0;
}
.nextscene img {
	float: right;
	margin: 0 0 0 5px;
}
#content .nextscene p {
	float: left;
	padding: 11px 0;
	margin: 0;
	font-size: 16px;
	font-family: Serifa BT, Georgia, "Times New Roman", Times, serif;
	text-align: right;
}

ul.quizchoices {
	list-style-type: none;
	margin: 0 0 0 100px;
	font-size: 13px;
	font-weight: bold;
}
ul.quizchoices li {
	clear: both;
	margin: 0 0 15px 0;
	height: 40px;
}
.flirtanswer, .harrassanswer {
	margin: 10px 0 0 20px;
	color: #C00;
	/* float: right; 
	width: 300px;
	left: 400px;
	margin-top: -20px; */
}
#comic {
	width: 880px;
	height: 2195px;
	margin: 0 0 29px 40px;
}
#comic img {
	*margin-top: -3px;
	padding: 0;
}

/* Sub-content -----------------------------------------------------------*/
#sub-content {
	clear: both;
	width: 960px;
	margin-top: 55px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
}
h4 {
	font-family: Serifa BT, Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 18px;
	margin: 5px 0 15px 0;
}
#sub-content a {
	text-decoration: none;
	color: #fff;
}
#help ul, #media ul {
	list-style-type: none;
}
#help {
	float: left;
	width: 360px;
	margin-left:90px;
	background-color: #CEB768;
}
#help li img {
	float: left;
	border: none;
	margin: 0 30px 10px 0;
}
#help li, #linkup li, #wallpaper li {
	clear: left;
	margin-bottom: 10px;
}
#help li {
	width: 330px;
}
#media {
	float: right;
	width: 420px;
	margin-right: 35px;
}
#media p {
	margin: 0 0 10px 0;
}
#linkup {
	float: left;
	width: 270px;
}
#linkup li, #wallpaper li {
	vertical-align: top;
}
.media-img {
	margin: 0;
}
#linkup textarea {
	height: 56px;
	margin: 0 0 0 10px;
	padding: 0px;
	font-size: 11px;
	vertical-align: top;
}
#wallpaper {
	float: right;
	width: 135px;
}

/* Footer ----------------------------------------------------------------*/
#footer {
	clear: both;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 43px 0 15px 0;
	height: 30px;
}
#footer a {
	color: #393;
	text-decoration: none;
	font-weight: bold;
}
#orgcredit {
	float: left;
	width: 500px;
	margin: 0 0 0 60px;
}
#orgcredit p {
	margin-bottom: 10px;
}
.sitecredit {
	float: right;
	width: 300px;
	text-align: right;
	padding-right: 60px;
}
.clear {
	clear: both;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash #dyk h3, .sIFR-hasFlash .demo-show2 h4 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 28px;
}
.sIFR-hasFlash #content h2, .sIFR-hasFlash #content-long h2 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 34px;
}
.sIFR-hasFlash #help h3, .sIFR-hasFlash #media h3 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 30px;
}