/* Global Resets */

dl,ul,ol,li,h1,h2,h3,h4,h5,h6,html,body,pre,p,blockquote,form,fieldset,input,label
{ margin:0; padding:0 }

abbr, img, object,a img,:link img,:visited img,a object,:link object,:visited object
{ border:0 }

textarea {
    resize:none; /* Fixes the problem in Firefox where the user could drag the textarea around and break the page. */
}
/* End of Global Resets */

/* Using the "stickyfooter" method from http://www.cssstickyfooter.com.  Slams the footer to the bottom of the page. */
/* Be careful with margins or the footer will be forced down and the scrollbar will appear.  Use padding instead.    */

html, body {
	background: #ffffff;
    font-family: Helvetica, MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;
	font-size: 14pt;
	color: #000000;
	margin: 0px auto;
	padding: 0px;
    height: 100%;
}

#preload { display: none; }

@font-face {  /* This css generated from FontSquirrel's @font-face generator tool.  This font (journal) is used for the Parallel Event notes.
                 If the user does not have this font installed locally, it will be downloaded from the server.  (located in the /fonts directory).  */
    font-family: 'journalregular';
    src: url('../fonts/journal-webfont.eot');
    src: url('../fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/journal-webfont.woff') format('woff'),
         url('../fonts/journal-webfont.ttf') format('truetype'),
         url('../fonts/journal-webfont.svg#journalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

img {
    border: 0px;
}

.horizontal_divider {
    clear: both;
    width: 960px;
    height: 2px;
    background: url(../graphics/line.png) repeat-x;
    margin: 0 0 20px 0;
}

#main_wrapper {
    width: 960px;
    margin: 0px auto;
    padding: 0px;
    /* text-align: center; */
    position: relative; /* Allows content to move in front of gradient background */
    min-height: 100%;
}

#main {
    overflow: auto;
	padding-bottom: 110px;  /* must be same height as the footer */

    width: 960px;
}

#mainbody {
    width: 960px;
    color: #000000;
}

#gradient_background img {     /* gradient full-width background on home page */
    position: absolute;
    height: 400px;
    width: 100%;
    left: 0px;
    top: 120px;
}

#fullwidth_header {            /* full-width header section on rest of pages */
    position: absolute;
    height: 120px;
    width: 100%;
    left: 0px;
    top: 0px;
    background: url(../graphics/bg_header.gif) repeat-x;
}

#fullwidth_divider {   /* used at top of page (under navigation) on all but home page. */
    position: absolute;
    height: 5px;
    width: 100%;
    left: 0px;
    top: 120px;
    background: url(../graphics/horizontal_divider.gif) repeat-x;
}

#header {
    width: 960px;
    height: 120px;
    /* background: url(../graphics/bg_header.gif) repeat-x; */
}

#header_leftside {
    width: 720px;
    height: 120px;
    float: left;
}

#header_logo {
    height: 80px;
    width: 720px;
}

#header_logo img {
    width: 212px;
    height: 34px;
    float: left;
    margin: 30px 0 0 20px;
}

#header_login {
    width: 240px;
    height: 120px;
    float: right;
}

.login_user, .login_pass {
    font-family:arial;
    font-size: 10pt;
    color: #404040;
    border: 1px solid #c4c4c4;
    height: 19px;
    padding: 1px 4px 3px 6px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
    float: right;
}

input:focus {    /* was using *:focus, but it does weird things in EI */
    outline: none;
    border: 1px solid #79a6c4;
    box-shadow: 0px 0px 8px #79a6c4;
    -moz-box-shadow: 0px 0px 8px #79a6c4;
    -webkit-box-shadow: 0px 0px 8px #79a6c4;
}

.login_user {
    width: 200px;
    margin: 10px 0 0 0;
}

.login_pass {
    width: 140px;
    margin: 5px 0 0 0;
}

.login_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #404040;
	-webkit-box-shadow:inset 0px 1px 0px 0px #404040;
	box-shadow:inset 0px 1px 0px 0px #404040;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c363a), color-stop(1, #79a6c4) );
	background:-moz-linear-gradient( center top, #1c363a 5%, #79a6c4 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c363a', endColorstr='#79a6c4');
	background-color:#1c363a;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#eeeeee;
	font-family:arial;
	font-size:12px;
	font-weight:normal;
	width: 54px;
	text-decoration:none;
	text-shadow:1px 1px 0px #606060;
    margin: 6px 0 0 6px;
    float: right;
    height: 24px;
}

.login_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79a6c4), color-stop(1, #1c363a) );
	background:-moz-linear-gradient( center top, #79a6c4 5%, #1c363a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79a6c4', endColorstr='#1c363a');
	background-color:#79a6c4;
}

.login_button:active {
	position:relative;
	top:1px;
}

#navigation {
    width: 720px;
    height: 40px;
    padding: 13px 0 0 20px;
}

#navigation ul {
    list-style-type: none;
    overflow: hidden;
}

#navigation ul li {
    float: left;
    height: 27px;
    margin-right: 1px;
    background-color: #325973;
}

#navigation ul li a{
    color: #ffffff;
    font-size: 12pt;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 3px 15px 3px 15px;
}

#navigation a {
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

#navigation a:hover{
    background-color: #79a6c4;
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

#btn_home, #btn_home a {
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    border-radius: 10px 0px 0px 0px;
}

#btn_contact, #btn_contact a {
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    border-radius: 0px 10px 0px 0px;
}

#pageheading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 40px;
    width: 960px;
    height: 41px;
    background: url(../graphics/bookmarkbar2.png) no-repeat;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
    border-radius: 8px 8px 0px 0px;
}

#pageheading .heading {        /* Titles in the left-hand side of the grey bar */
    padding: 4px 0 0 15px;
    color: #733238;
    font-size: 16pt;
    font-weight: bold;
    text-align: left;
    float: left;
}

#pageheading ul {
    list-style-type: none;
    overflow: hidden;
    height: 41px;
    margin-right: 60px;
    float: right;
}

#pageheading li {
    float: left;
    font-size: 12pt;
    text-shadow:-1px 1px 0px #333333;
    height: 41px;
    margin-left: 1px;

}

#pageheading ul li a {
    text-decoration: none;
    color: #fbfbfb;
    display: block;
    height: 100%;
    padding: 5px 10px 0 10px;
}

#pageheading a:hover {
    color: #ffffff;
    background: url(../graphics/bookmark_highlight2.png) repeat-x;
}

#pageheading a.bookmark_highlight {
    color: #ffffff;
    background: url(../graphics/bookmark_highlight2.png) repeat-x;
}

#subtitle {
    margin: 50px 0 30px 0;
    text-align: center;
}

#content p {
    text-align: left;
    font-size: 14pt;
    padding: 0 0 20px 0;
    color: #000000;
    line-height: 1.25;
}

#content a {
    text-decoration: none;
    color: #325973;
}

#content a:hover {
    text-decoration: underline;
    color: #325973;
}

.morebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#733238;
	padding:6px 24px 6px 24px;
    margin: 0 10px 0 10px;
}

#content p .morebutton {
   color:#733238;
   font-size:14pt;
   font-weight:bold;
   text-decoration:none;
   text-shadow:1px 1px 0px #ffffff;
}

.morebutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

.morebutton:active {
	position:relative;
	top:1px;
}

.morebutton:hover {
    text-decoration: none;
}

.morebutton img {
    margin: 0 0 -2px 4px;
}

.submitbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color: #325973;
	font-family:arial;
	font-size:13pt;
	font-weight:bold;
	padding:3px 22px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}

.submitbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

.submitbutton:active {
	position:relative;
	top:1px;
}

#teaserSubmit {
   color:#733238;
   font-size:14pt;
   font-weight:bold;
   text-decoration:none;
   text-shadow:1px 1px 0px #ffffff;
   clear: both;
   margin: 15px 150px 5px 0;
   float: right;
}

#home_greensquare {
    width: 960px;
    height: 400px;
    background-color: #1c363a;
    border-radius: 10px;
    -moz-border-radius: 10px;
}

#welcome {      /* Welcome to Parallel Me on the home page */
    width: 500px;
    height: 80px;
    margin: 40px 0 0 30px;
    background: url(../graphics/welcome.png) no-repeat;
}

#discover {   /* Discover... text on the home page */
    width: 500px;
    height: 140px;
    margin: 40px 0 0 30px;
    background: url(../graphics/discover.png) no-repeat;
}

#getstarted {
    width: 300px;
    height: 35px;
    margin: 20px 0 0 230px;
}

#getstarted a, #getstarted a:visited {
    text-decoration: none !important;
}

.gs_mainbutton {
    width: 250px;
    height: 35px;
    background: url(../graphics/btn_getstarted.png) no-repeat;
    background-color: #325973;
    background-position: 30px 6px;
    border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    float: left;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.gs_mainbutton:hover {
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
    background-color: #79a6c4;
}

#getstarted:hover .gs_waitingfor {
    visibility:visible;
    opacity:1;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    display: inline;
}

.gs_waitingfor {
    opacity: 0;
    color: #79a6c4;
    font-size: 13px;
    font-style: italic;
    font-family: arial;
    visibility: hidden;
    position: absolute;
    top: 480px;
    left: 340px;
    opacity:0;
    transition:visibility 0s linear 0.8s,opacity 0.8s linear;
    -webkit-transition: visibility 0s linear 0.8s, opacity 0.8s linear;
    -moz-transition: visibility 0s linear 0.8s, opacity 0.8s linear;
}

.gs_arrows {
    width: 41px;
    height: 36px;
    float: right;
    position: relative;
    left: -20px;
    background: url(../graphics/getstarted_arrows.png) no-repeat;
}

#icon_row {
    width: 960px;
    height: 240px;
    margin-top: 40px;
}

.icon {
    width: 238px;
    height: 240px;
    float: left;
    text-align: center;
}

.icon a {
    color: #1c363a;
    text-decoration: none;
    letter-spacing: -0.5pt;
    font-size: 13pt;
    font-weight: bold;
    text-align: center;
}

.icon p {
    font-size: 11pt;
    padding: 10px 20px 0 20px;
    height: 80px;
}

.icon_square {
    width: 160px;
    height: 112px;
    display: block;
    margin: 0px auto;
    margin-bottom: 10px;
}

.icon_square a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    background: url(../graphics/bigicon_bg_off.png);
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.icon_square a:hover {
    background: url(../graphics/bigicon_bg_on.png);
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.icon_redpart {
    width: 71px;
    height: 60px;
    padding-top: 20px;
}

.divider_vertical {
    width: 2px;
    height: 220px;
    background: url(../graphics/vertical_divider.jpg) repeat-y;
    float: left;
}

.more {
    width: 220px;
    height: 30px;
    text-align: right;
    padding-right: 20px;
}

.more img {
    width: 16px;
    height: 16px;
    float: right;
    display: inline;
}

.more p, .more a {
    padding: 0 2px 2px 0;
    font-size: 10pt;
    height: 30px;
}

#divider_horizontal {
    background: url(../graphics/horizontal_divider.gif) repeat-x;
    width: 960px;
    height: 5px;
    clear: both;
    margin: 30px 0 10px 0;
}

h1 {
   font-size: 48pt;
}

#graph {
    margin: 0px auto;
    padding-top: 40px;
}

#my_canvas {
    float: left;
    margin-left: 20px;
}

#Person_A {
    width: 150px;
    height: 100px;
    font-size: 15pt;
    font-weight: bold;
    text-align: right;
    padding: 85px 0 0 30px;
}

#Person_B {
    width: 150px;
    height: 100px;
    font-size: 15pt;
    font-weight: bold;
    text-align: right;
    padding: 50px 0 0 30px;
}

#Person_A p, #Person_B p {
    color: #325973;
}

#teaserForm {
    
}

#teaserForm fieldset {
    width: 610px;
    float: right;
    border: none;
}

#teaserForm label {
   display: block;
   float: left;
   width: 200px;
   height: 25px;
   text-align: right;
   font-size: 14pt;
   padding: 3px 0 3px 0;
   margin-bottom: 10px;
}

#teaserForm input[type=text] {
   height: 25px;
   font-size: 12pt;
   border: solid 1px #286a6e;
   width: 390px;
   padding: 3px 0 3px 5px;

   margin: 0 0 10px 10px;
}

#teaser_results {
    display: none;
    width: 940px;
    height: 680px;
    clear: both;
}

#Top3 {
   margin: 0px auto;
   text-align: center;
   padding-top:50px;
   clear: both;
}

#Top3 p {
   font-size: 12pt;
}

#Top3_Form input[type=radio] {
   margin: 5px 10px 5px 0px;
}

#Top3_Form label {
    display:inline-block;

    padding: 5px 10px 5px 10px;
    margin: 0 5px 0 5px;
    font-size:16px;
    color: #ffffff;
    border:double 2px #b7c6d5;
    background-color:#325973;
    -moz-border-radius: 8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

.top3_selected {
    background-color: #733238 !important;
}

#Top3_Form label:hover {
    background-color: #733238;
    transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
}

#sortedlist {
    display: none;
}

#results-table {
	font-family: "Century Gothic", Arial;
	font-size: 9pt;
	margin: 0 45px 45px 45px;
	width: 860px;
	border-collapse: collapse;
	text-align: left;
    clear: both;
}

#results-table th {
	font-size: 14px;
	font-weight: normal;
	color: #666666;
	padding: 10px 8px;
	border-bottom: 2px solid #336666;
}

#results-table td {
	border-bottom: 1px solid #336666;
	color: #666666;
	padding: 6px 8px;
}

#results-table tbody tr:hover td {
	color: #663333;
    background-color: #cfccbb;
}

#results-table span {
    font-weight: bold;
    color: #286a6e;
    margin-left: 10px;
}

#intro-parallelevents, #parallelevents {     /* Table listing all parallel events in the introduction section */
    width: 960px;
    border-collapse: collapse;
}

#intro-parallelevents th, #parallelevents th {
    width: 160px;
    height: 38px;
    font-size: 14pt;
    color: #325973;
    border: 1px solid #325973;
    background: url(../graphics/th_bg.gif) repeat-x;
}

#intro-parallelevents td, #parallelevents td {
    border: 1px solid #325973;
    text-align: left;
    padding: 3px 0 3px 8px;
    color: #202020;
}

.rowhighlight {
    background-color: #cfccbb;
}


#footer_stickybottom {
    clear: both;
    height: 110px;
    width: 100%;            /* if footer height is changed, make sure the margin-top is set as well.   */
    background: url(../graphics/horizontal_divider2.gif) repeat-x 0 0 #1c363a;
    position: relative;
	margin-top: -110px;     /* negative value of footer height */
}

#footer {
    width: 960px;
    height:  px;
    margin: 0px auto;
}

#footerlinks {
    width: 960px;
    height: 40px;
}

#footerlinks ul {
    list-style-type: none;
    overflow: hidden;
    padding-top: 10px;
    text-align: center;
}

#footerlinks ul li {
    display: inline;
}

#footerlinks a {
    color: #ffffff;
    font-size: 11pt;
    text-decoration: none;
    padding-bottom: 4px;
}

#footerlinks a.home {   /* home footer links are a different color since there's no background */
   color: #733238;
   font-size: 11pt;
}

#footerlinks a:hover {
    text-decoration: underline;
}

.linkdivider {          /* vertical lines between footer links */
    width: 15px;
    height: 14px;
    background: url(../graphics/vertical_divider.jpg) repeat-y center;
    display: inline-block;
}

#copyright {    /* small print - copyright stuff  */
    font-size: 7pt;
    color: #747474;
    text-align: center;
    padding-top: 50px;
    margin: 0px auto;
    clear: both;
}
/*
a { color: #666666; text-decoration: none; padding-right: 10px;}
a:hover { color: #336666; text-decoration: underline;}
*/
a:visited { color: #666666; text-decoration: none;}

.bold_blue_i {
   color: #325973;
   font-weight: bold;
   font-style: italic;
}

.blue_text {
  color: #325973;
}

.validate {
    display: none;
}

.validate_left {
    background: url(../graphics/validate2_left.png) no-repeat;
    float: left;
    width: 9px;
    height: 26px;
    display: inline;
}

.validate_mid {
    background: url(../graphics/validate2_mid.png) repeat-x;
    float: left;
    height: 26px;
    display: inline;
}

#content .validate_mid p {
    font-size: 11pt;
    margin-top: 1px;
    color: #ffffff;
}

.validate_right {
    background: url(../graphics/validate2_right.png) no-repeat;
    float: left;
    width: 9px;
    height: 26px;
    display: inline;
}

.validate_arrow {
    width: 18px;
    height: 17px;
    clear: both;
    background: url(../graphics/validate2_arrow.png) no-repeat;
    position: relative;
    top: -7px;
    left: 13px;
}

#contactform table {
    margin: 0px auto;
    text-align: center;
}

#contactform input[type="text"], #contactform textarea {
	color: #202020;
	border: 1px solid #404040;
	margin: 2px;
	padding: 3px 3px 3px 5px;
	font-size: 12pt;
    background: url(../graphics/bg_header.gif) repeat-x;
    font-family: Helvetica, MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;
	overflow: auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#contactform textarea {
    height: 180px;
    width: 420px;
    background-color: white;
}

#contactform input {
    font-size: 12pt;
}

#contactform input[type="text"] {
    width: 200px;
    height: 30px;
}

#contactform label {
    float: right;
    padding-right: 5px;
}

#contactform {
    float: right;
    clear: both;
    color: #79a6c4;
    background-color: #1c363a;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin: 20px 0 20px 0;
    width: 500px;
    height: 460px;
    padding-top: 20px;
}

#products {
    border-collapse: collapse;
    margin: 40px auto 20px auto;
}

#products td {
    border: 1px solid #808080;
    text-align: left;
    padding: 10px;
}

#products ul {
    margin-left: 20px;
}

.required_input {
    color: #efefef;
    font-size: 14pt;
}

#chapter1form fieldset, #passwordreset fieldset {
    background: url(../graphics/noise_bg.png) repeat;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    margin: 0 0 20px 0;
    padding: 20px 10px 10px 10px;
    border: 1px solid #808080;
}

#chapter1form legend {

    margin-left: 20px;
    font-size: 11pt;
    font-weight: bold;
    border: 1px solid #808080;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #325973;
    padding: 2px 8px 2px 8px;
    color: #ffffff;
}

#chapter1form input[type="text"], #passwordreset input[type="password"] {
    font-size: 14pt;
    height: 25px;
    padding: 0 3px 3px 5px;
    float: left;
    margin: 0 0 15px 10px;
    border: 1px solid #a8a8a8;
}

#chapter1form label, #passwordreset label {
    float: left;
    margin: 5px 0 15px 10px;
    display: inline-block;
    text-align: left;
    height: 26px;
}

#chapter1form input[type="radio"] {
    float: left;
}

#chapter1form select {
    float: left;
    font-size: 13pt;
    height: 25px;
    padding: 0 3px 3px 5px;
    text-align: left;
}

.chapter1_optiongroup {
    float: left;
    border: 1px solid #b2b2b2;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}

#save_feedback, #save_feedback_pos, #save_feedback_neg {
    height: 45px;
    width: 958px;
    margin: 10px 0 20px 0;

}

#save_feedback p, #save_feedback_pos p, #save_feedback_neg p {
    text-align: center;
    color: #325973;
    display: none;
}

#save_feedback img, #save_feedback_pos img, #save_feedback_neg img {
    vertical-align: middle;
    margin-right: 10px;
    
}

#passwordreset .error {
    color: #733238;
    padding: 0;
    margin: 5px 0 15px 15px;
}

.yearrow {    /* Years above age circles in Chapter 2 */
    width: 960px;
    height: 25px;
    float: left;
    font-size: 12pt;
    color: #325973;
}

.yearrow div {
    float: left;
    width: 192px;
    text-align: center;
}

.agerow {     /* Contains the circular ages in Chapter 2 */
    width: 960px;
    margin-bottom: 15px;
    float: left;
    background: url(../graphics/chapter2_bg2.png) 0px 9px no-repeat;
}

.agecolumn {
    float: left;
    width: 192px;
}

.agesquare {
    width: 50px;
    height: 50px;
    background: url(../graphics/noise_bg.png) repeat;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    margin: 0px auto;
    border: 1px solid #808080;
}

#parallelevent_ages .agerow .agecolumn .agesquare p {
    margin: 0px auto;
    padding-top: 12px;
    text-align: center;
    height: 20px;
}

.agediv { /* The age boxes for the parallel events on chapter2.php */
    width: 192px;
    text-align: center;
    float: left;
}

/* 4.12.15 - Moving style from fieldset to mainevent div */
/*
#parallelevent_ages .agediv fieldset {
    background: url(../graphics/noise_bg.png) repeat;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #808080;
    padding: 5px 5px 5px 5px;
    border: 1px solid #808080;
    margin: 0px auto;
    width: 165px;
}
*/

#parallelevent_ages .agediv .mainEvent {
    background: url(../graphics/noise_bg.png) repeat;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #808080;
    padding: 5px 5px 5px 5px;
    border: 1px solid #808080;
    margin: 0px 0px 10px 0px;
    width: 165px;
    height: 154px; /* added 4/12/15 */
}

.mainEvent label {   /* Contains the chapter2 "Event" text and event numbers.  */
    display: inline-block;
    width: 122px;
}

.mainEvent span {  /* Determines size of event number (n) */
    color: #808080;
    font-size: 10pt;
    vertical-align: top;
}

.emptyPlaceholder {    /* This is an invisible placeholder so we can drag to another column (age) and automatically create a new entry   */
    width: 165px;
    /* height: 154px; */
    height: 0px;      /* jQuery will set the proper height when the user starts dragging an event.   */
    visibility: hidden;

}

.placeholderStyle {    /* This div shows up when you try to drag to another column (age)  */

    background: url(../graphics/noise_bg.png) repeat;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #808080;
    padding: 5px 5px 5px 5px;
    border: 1px solid #808080;
    margin: 0px 0px 10px 0px;
    width: 165px;
    height: 154px; /* added 4/12/15 */

    /* background-color: #733238;
    color: #fbfbfb !important;  */
    box-shadow: inset 0px 0px 10px #325973;
    -moz-box-shadow: inset 0px 0px 10px #325973;
    -webkit-box-shadow: inset 0px 0px 10px #325973;

}

.ch1_add {  /* This is the "add additional school" button. */

    height: 20px;
    margin: 0 10px 5px 0;
    background: url(../graphics/greybox_plus.png) right bottom no-repeat;
    font-size: 10pt;
    float: right;
    text-align: right;
    padding-right: 30px;
    width: 500px;
}

.ch1_add:hover {
    background: url(../graphics/greybox_plus_on.png) right bottom no-repeat;
}

.ch1_delete {  /* This is the "delete school" button in Chapter 1 */
    height: 20px;
    margin: 0 10px 5px 0;
    background: url("../graphics/greybox_x.png") right bottom no-repeat;

    float: right;

    width: 20px;
}

.ch1_delete:hover {
    background: url("../graphics/greybox_x_on.png") right bottom no-repeat;
}


.addevent {
    width: 1725x;
    margin: 0 0 5px 20px;
    height: 20px;
}

.addevent_showhide {
    background: url(../graphics/greybox_plus.png) 10px bottom no-repeat;
    display: none; /* jQuery shows this after an event has been entered */
    width: 175px;
    height: 20px;
}

.addevent_showhide:hover {
    background: url(../graphics/greybox_plus_on.png) 10px bottom no-repeat;
}

.addevent a {
    font-size: 10pt;
    display: block;
    width: 100%;
    height: 100%;
}

 .addevent a:focus {    /* Override global focus styles for this link.  Looks ugly with highlight. */
    outline: none;
    border-style: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.deleteEvent {
    position: absolute;
    /* margin-left: 30px; */
    background: url(../graphics/greybox_x.png) no-repeat;
    width: 20px;
    height: 20px;
    display: none;
}

.deleteEvent:hover {
    background: url(../graphics/greybox_x_on.png) no-repeat;
}

.chapter2_events, .chapter2_notes {
    width: 165px;
    text-align:center;
    margin: 0 0 10px 0;
    color: #606060;
}

.chapter2_events {
    height: 60px;
}

.chapter2_notes {
    display: none;   /* jQuery will show this once event has been dragged and dropped. */
}

.chapter2_eventdivider {
    background: url(../graphics/horizontal_divider.gif) left 3px repeat-x;
    width: 100%;
    height: 15px;
}

.agediv textarea {   /* Notes for event in Chapter 2 */
    width: 155px;
    height: 40px;
    font-size: 12pt;
    border: 1px solid #bbbbbb;
    margin: 5px 0 0 0;
    padding: 2px;
    background-color: ffffff;
    font-family: Helvetica, MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Arial, sans-serif;
}

div.draggable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

div.canDrag, .mainEvent label {    /* added to mainevent div in CH2.  Didn't want to add draggable class above */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}



div.canDrag:hover {

    /* background: url(../graphics/draggable_item.png) 5% 5% #eeeeee no-repeat !important; */
    background: url(../graphics/mono-move_small.png) 5% 5% #eeeeee no-repeat !important;
}

.custom_cursor {   /* IE doesn't support the grab cursor.  Javascript in Chapter2.php uses this instead. */
  cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

.ui-draggable-dragging {   /* while being dragged */
    background-color: #733238;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    text-align: center;
    border: 1px solid #808080;
    padding: 2px 10px 2px 10px;
    color: #ffffff;
}

input[type=text].droppable {  /* These are the Chapter 2 "Event" text inputs */
    border: 1px dashed #cccccc;
    background-color: #fbfbfb;
    color: #ffffff;
    width: 155px;
    height: 25px;
    font-size: 14pt;
    margin: 5px 0 0 0;
    padding: 2px;
    background-color: fbfbfb;
    text-align: center;
}

input[type=text].drop-here {   /* jQuery ui drag/drop - this class activates when user starts dragging something.  Indicates where to drop. */
    background-color: #733238;
    color: #fbfbfb !important;
    box-shadow: 0px 0px 10px #733238;
    -moz-box-shadow: 0px 0px 10px #733238;
    -webkit-box-shadow: 0px 0px 10px #733238;
    font-size: 12pt;
}

input::-webkit-input-placeholder.drop-here {
    color: #fbfbfb !important;
}

input[type=text].hover-here {  /* jQuery ui drag/drop - if you are dragging something, this class fires when you hover over the destination (droppable) */
    background-color: #1c363a; /* footer green */
    color: #ffffff;
}

#parallelevent_ages {
    width: 960px;
    float:left;

}

#parallelevents td:hover {
    outline: none;
    border: 1px solid #79a6c4;
    box-shadow: 0px 0px 8px #79a6c4;
    -moz-box-shadow: 0px 0px 8px #79a6c4;
    -webkit-box-shadow: 0px 0px 8px #79a6c4;
    color: #733238;
    /* background: url(../graphics/draggable_item.png) right center #eeeeee no-repeat; */
    background: url(../graphics/mono-move_small.png) 98% center #eeeeee no-repeat;
}

#parallelevent_ages input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  font-style: normal;
  font-family: arial;
  font-size: 11pt;
  color: #cdcdcd;  /* Chrome apparently doesn't allow manipulation of placeholders via jQuery (?) so I changed the color to something more neutral */
}
#parallelevent_ages input:-moz-placeholder, textarea:-moz-placeholder {
   font-style: normal;
  font-family: arial;
  font-size: 12pt;
  color: #404040;
}

#parallelevent_ages .placeholder {
  font-style: normal;
  font-family: arial;
  font-size: 11pt;
  color: #404040;
}

#slide_main {
  min-height: 290px;
  margin-left: 5px;
  width: 960px;
}

.slideblock {
  clear: both;
  float: left;
  display: none;

}

#savebuttons {  /* Div that contains the "Save" and "Save and Continue" buttons in Chapter 2.  */
    display: none;
    clear: both;
    margin: 25px 0 15px 0;
    float: left;
}

#agenav_prev, #agenav_next {  /* Chapter 2 Previous and Next age buttons. */
    font-size: 14pt;
    margin-left: 5px;
}

#agenav_prev_span, #agenav_next_span {
    color: #606060;
    font-size: 11pt !important;
    margin-left: 5px;
}

/* ######################################### CHAPTER 3 ############################################# */

#text_intro p, #text_decision p, #text_east p, #text_trees p {
    font-size: 13pt;
}

#decision_plusminus {  /* Contains decision for positive or negative experience */
    width: 960px;
    height: 350px;
}

#choose_positive, #choose_negative { /* These divs contain the square icons with pos or neg choices */
    width: 480px;
    height: 190px;
    float:left;
    margin-top: 20px;
}

#dt_pos_arrowright .chapter3_event, #dt_neg_arrowright .chapter3_event {
    font-size: 17pt;
    font-weight: bold;
    color: #325973;
    padding: 12px 0 0 0;
    /* margin: 0 0 30px 10px; */
    text-align: center;
    width: 420px;
}

#dt_pos_arrowright .chapter3_tip_event, #dt_neg_arrowright .chapter3_tip_event {  /* Text underneath the parallel event */
    font-size: 14pt;
    color: #606060;
    padding: 0;
    margin: 40px 0 0 10px;
    text-align: center;
    width: 420px;
    font-style: italic;
}

#positive_tree .chapter3_tip_influence {
    font-size: 14pt;
    margin: 10px 0 0 0;
    color: #606060;
    padding: 0;
    text-align: center;
    font-style: italic; 
}

/*
.chapter3_eventnotes { /* Handwritten notes for Parallel Events. */
/*
    font-size: 15pt;
    /* font-family: journal, journalregular; */ /* The first (journal) may or may not be installed locally.  If not, fallback to journalregular located in /fonts folder on server */
    /* letter-spacing: 1px; */
/*
    font-weight: normal;
    color: #404040;
    margin-left: 8px;
}
*/

#form_pos_tree, #form_neg_tree {
    height: 450px;
}

#positive_tree, #negative_tree {   /* Decision tree tables - Chapter 3 */
    /* border-collapse: collapse;     This causes "Focus" styles not to work in IE.  Had to add cellspacing="0" directly to tables instaed. */
}

#positive_tree tr, #negative_tree tr {   /* Decision tree tables - Chapter 3 */
    width: 800px;
}

#positive_tree td, #negative_tree td {
    padding: 0px;
    vertical-align: bottom;
}

#positive_tree input, #negative_tree input {
    float: right;
    text-align: right;
    margin: 0 30px 5px 0;
    padding: 3px;
    width: 263px;
    /* font-family: journal, journalregular; */
    font-size: 15pt;
    color: #325973;
    border: none;
    height: 40px;
}

#negative_tree input {
    margin: 0 30px 8px 0;
    padding-bottom: 0px;
}

#positive_tree #dt_pos_arrowleft {   /* Bottom of positive decision tree.  Includes Main Influence Factor */
    width: 374px;
    height: 169px;
    background: url(../graphics/bg_tree_plus_bot.gif) no-repeat;
}

#positive_tree #dt_pos_arrowleft input { /* Bottom row input in positive decision tree */
    margin: 0 30px 15px 0;
    width: 335px;
}

#positive_tree #dt_pos_top {   /* top td of positive decision tree */
    width: 374px;
    height: 77px;
}

#positive_tree .dt_pos_clone {  /* The cloned (repeatable) td of the positive decision tree */
    width: 374px;
    height: 77px;
    background: url(../graphics/bg_tree_plus_clone.gif) no-repeat;
}

#positive_tree #dt_pos_arrowright {
    width: 426px;
    height: 169px;
    background: url(../graphics/bg_tree_plus_arrow.gif) no-repeat;

    vertical-align: top;
}

#positive_info, #negative_info { /* Container for grey boxes outside of decision trees showing age and experience information */
    width: 320px;
    height: 130px;
    position: absolute;
}

#positive_info {
    right: 0px; top: 60px;
}

#negative_info {
    right: 0px; top: 275px;
}

#negative_info .morebutton, #positive_info .morebutton {
    width: 150px;
    padding: 2px;
    font-size: 13pt;
    margin: 10px 0 0 0;
}

#negative_info #nexttree, #positive_info #nexttree, #negative_info #prevtree, #positive_info #prevtree {  /* Links in the prev & next tree buttons */
    color: #325973;
}

.infosquare { /* Grey box where decision tree information is shown */
    margin: 0px auto;
    border: 1px dashed #808080;
    height: 80px;
    width: 190px;
    padding: 5px 5px 0px 5px;
    background-image: url(../graphics/noise_bg.png);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

#positive_info p, #negative_info p {
    padding: 0 0 5px 0;
    font-size: 12pt;
    color: #404040;
}

#positive_info a {
    font-size: 10pt;
    color: #733238;
}

#negative_info a {
    font-size: 10pt;
}

#negative_tree #dt_neg_top {   /* table cell just above red line */
    width: 374px;
    height: 77px;
}

#negative_tree #dt_neg_top input {
    margin-bottom: 0px; /* Was sitting a little too high off top line graphic */
    width: 335px;
}

#negative_tree #dt_neg_arrowleft {
    width: 374px;
    height: 169px;
    background: url(../graphics/bg_tree_neg_top.gif) right bottom no-repeat;
}

#negative_tree #dt_neg_arrowright {
    width: 426px;
    height: 169px;
    background: url(../graphics/bg_tree_neg_arrow.gif) left bottom no-repeat;  /* there's a small space between legs unless position is specified */
    vertical-align: top;
}

#negative_tree .dt_neg_clone {
    width: 374px;
    height: 77px;
    background: url(../graphics/bg_tree_neg_clone.gif) no-repeat
}

#dt_neg_arrowleft .chapter3_tip_influence {
    font-size: 14pt;
    margin: 0 0 73px; 0;
    color: #404040;
    padding: 0;
    text-align: center;
}

#positive_tree input::-webkit-input-placeholder, #negative_tree input::-webkit-input-placeholder {
    /* font-family: journal, journalregular; */
    font-size: 14pt;
    font-weight: normal;
    /* letter-spacing: 2px; */
    color: #808080;    /* Chrome apparently doesn't allow manipulation of placeholders via jQuery (?) so I changed the color to something more neutral */
    line-height: 22pt; /* Chrome will cutoff half of the font without line-height set. */
}

#positive_tree input:-moz-placeholder, #negative_tree input:-moz-placeholder {
    /* font-family: journal, journalregular; */
    font-size: 14pt;
    font-weight: normal;
    /* letter-spacing: 2px; */
    color: #808080;
    font-size-adjust: 0;
}

#positive_tree .placeholder, #negative_tree .placeholder {  /* I think this is used by javascript for IE... check it!  */
    /* font-family: journal, journalregular; */
    font-size: 14pt;
    font-weight: normal;
    /* letter-spacing: 2px; */
    color: #808080;
}

/* The following 2 items style the placeholder text in the input forms.  Note: Mozilla font size
   doesn't appear to work. I used font-size-adjust instead.  There's some weird shifting of the
   form now.  Look into this later... */

input::-webkit-input-placeholder {
   color: #c1c1c1;
   font-size: 10pt;
   font-style: italic;
   font-family: "Century Gothic", Arial;
}

:-moz-placeholder {
    color: #c1c1c1;
    font-family: "Century Gothic", Arial;
    font-style: italic;
    font-size-adjust: 0.42;
}

.grey_gradient_title {   /* These styles taken from CKeditor. Title backgrounds in Chapter 4 */
    border-bottom:1px solid #b6b6b6;
    padding:9px 0 8px 10px;
    white-space:normal;
    -moz-box-shadow:0 1px 0 #fff inset;
    -webkit-box-shadow:0 1px 0 #fff inset;
    box-shadow:0 1px 0 #fff inset;
    background:#cfd1cf;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#cfd1cf));
    background-image:-moz-linear-gradient(top,#f5f5f5,#cfd1cf);
    background-image:-webkit-linear-gradient(top,#f5f5f5,#cfd1cf);
    background-image:-o-linear-gradient(top,#f5f5f5,#cfd1cf);
    background-image:-ms-linear-gradient(top,#f5f5f5,#cfd1cf);
    background-image:linear-gradient(top,#f5f5f5,#cfd1cf);
    filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#fff5f5f5',endColorstr='#ffcfd1cf');
    display: block;
    overflow: hidden;

}

.grey_gradient_box { /* Here's the box that goes with the grey gradient title above */



    border: 1px solid #B6B6B6;
    -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    display: block;
    padding: 0
}

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;