/* 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: 760px;
    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;
   float: left;
   margin: 30px 0 0 200px;
}

#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: 260px;
    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;
}

#teaserGraph {
    margin: 0px auto;
    height: 350px;
}

#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 fieldset {
    width: 570px;
    float: right;
    border: none;
}

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

#teaserForm input[type=text] {
   height: 25px;
   font-size: 14pt;
   border: solid 1px #286a6e;
   width: 400px;
   padding: 3px 0 3px 5px;
   margin-bottom: 10px;
}

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

#Top3 {
   margin: 0px auto;
   text-align: center;
   padding-top:10px;
   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;
    height: 820px;
}

#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;
    width: 160px;
    height: 23px;
}

.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: 430px;
    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;
}

.ch1_upload_wrapper {

    height: 330px;
}

.ch1_upload_container {
    position: relative;

    width: 960px;
    height: 220px;
    float: left;

    margin: 30px 0 0 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;      /* This scales the uploaded image to fit the contents of the container */
}

#chapter1form fieldset, #passwordreset fieldset, 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;
}

#uploadresponse {

    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 1px dashed #a8a8a8;

    padding: 5px;
    float: right;
    width: 300px;
    height: 220px;
}

#uploadresponse p {
    text-align: center;
}

#upload_control_div {

    height: 50px;

    width: 330px;
    float: left;
    margin: 50px 0 0 120px;
}

.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: 30px 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;
}
/* Removing the delete event button in favor of the fly-out menu */
/*
.deleteEvent {
    position: absolute;

    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;
}

*/

#ch2_flyout_menu {
    display: none;
    position: absolute;
    -webkit-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.75);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 2px solid white;
    padding: 0;
    color: #ffffff;
    background-color: #325973;
    width: 140px;
    height: 102px;
}

#ch2_flyout_menu a {
    color: white;
}

#ch2_flyout_menu a:hover, #ch2_flyout_menu a:visited, #ch2_flyout_menu a:link, #ch2_flyout_menu a:active {
    text-decoration: none;
    color: white;
}

#ch2_flyout_menu img {
    width: 24px;
    height: 24px;
    padding-right: 10px;
    float: left;
}

#ch2_flyout_menu ul {
    font-size: 12pt;
    padding: 0;
    list-style: none;
}

#ch2_flyout_menu li {
    padding: 5px;


    height: 24px;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#ch2_flyout_menu li:hover {
    padding: 5px;
    background-color: #79a6c4;
}

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

.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: 0 0 20px 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: 0 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;
}

/* 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;
}

.ch2_chain_icon {
    width: 17px;
    height: 7px;
    float: right;
    padding: 4px 5px 0 0;
    display: none;
}

.ch2_pos_icon {   /* Little icon in botton of event boxes that indicate a positive experience */
    width: 13px;
    height: 13px;
    float: right;
    padding: 1px 5px 0 0;
    display: none;
}

.ch2_neg_icon {   /* Little icon in botton of event boxes that indicate a positive experience */
    width: 13px;
    height: 13px;
    float: right;
    padding: 2px 5px 0 0;
    display: none;
}

#powerusers_ul {
    list-style-type: disc;
    list-style-position: inside;
}

#powerusers_ul li {
    margin: 0 0 10px 30px;
}

#powerusers_buynow {
    border: 2px solid #325973;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 40px;
}

#historian_table {
    width: 958px;
    height: 220px;
    margin: 20px 0 40px 2px;
    border-collapse: collapse;
}

#historian_table th {
    border: 1px solid black;
}

#historian_table td {
    border: 1px solid black;
    padding-left: 5px;
}

#historian_table #ht_buynow {
    border: none;
}

#historian_table .ht_cost {
    border: none;
    text-align: center;
    cursor: pointer;
    color: #325973;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

#notification {
    display: none;
    font-size: 14pt;
    padding: 20px;
    position: absolute;
    right: auto; left: 5px;
    top: 50%;
    text-align: left;
    width: 200px;
    height: 80px;
    color: #ffffff;
    background-color: #325973;
    border: 4px solid #79a6c4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}

#notification p {     /* Vertically center content in notification box */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}