/***************************
 * reset styles
 ***************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0;}
/*:focus {outline: none; margin:0; padding:0; } remember to define focus styles! */
ol, ul, dl {list-style: none;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
a {text-decoration:none; color:#3366FF;}
a:hover {text-decoration: underline;}
table {border-collapse: separate; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */
caption, th, td {text-align: left; font-weight: normal;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
body {padding:0; margin: 0px; font-size: 10px; color: #464646; line-height: 15px; font-family: verdana, arial, helvetica, sans-serif; background: #fff url(../images/shared/bg.jpg);}


#container {width: 755px; margin: 13px auto; -moz-box-sizing: padding-box;}
#middleContainer {width: 100%; margin-top: 8px; margin-bottom: 8px; table-layout:fixed;}

/*******************************************************************
 * Common
 *******************************************************************/
.floatR {float:right;}
.floatL {float:left;}
img.floatR {margin:0 0 10px 10px;}
img.floatL {margin:0 10px 10px 0;}
.clear {clear:both;}
.centerTxt {text-align: center;}
hr {height: 2px; color: #ad16a4; margin-top: 2em; margin-bottom: 0.5em;}

/***************************
 * Text
 ***************************/
h1 {font-weight: bold; font-size: 1.3em; color: #e30c58; line-height: 17px; margin-top: 0.2em; margin-bottom: 1em;}
h2 {font-weight: bold; font-size: 1.1em; color: #e30c58; line-height: 15px; margin-top: 0.2em; margin-bottom: 0.5em;}
h3 {font-weight: bold; font-size: 1em; color: #e30c58; margin-bottom: 0.3em;}
h4 {font-size: 11px;}
p {margin-bottom: 1em;}
strong, b {font-weight: bold; color: #666;}
em {font-style: italic;}
.subtitle {font-size: 1em; color: #e30c58; margin: -15px 0px 15px 0px; display: block;}
/* p {margin:0; font-size: 1em; line-height:170%; padding: 0;} */
.red {color: #e30c58;}
.purple {color: #AF0086;} /*color: #560a56; */

/***************************
 * Events
 ***************************/
#container .event {margin: 12px 0 0; min-height: 80px;}
    #container .event div {height: 90px; width: 85px; text-align: center;}
    #container .event p {margin: 0 0 5px;}
    #container .event h3 {color: #666;}
    
#eventsHeader {margin: -4px 5px 5px -6px; width: 163px; height: 19px; padding: 3px 0px 0px 5px; background: #fff url(../images/shared/rightDivHeadingBg.jpg); color: #fff; font-size: 1.2em; font-weight: bold;}
.diaryEvent {margin-bottom: 1em;}
.diaryEvent p {margin-bottom: 0px;}
.diaryEvent h3 {color: #AF0086;}
 
/***************************
 * Content
 ***************************/
#innerContentContainer ul {list-style:circle; margin:0 0 13px 15px;}
    #innerContentContainer ul li {font-size: 1.0em; line-height:1.5; margin-left: 5px;}
                #innerContentContainer ul li ul {list-style: disc;}
                        #innerContentContainer ul li ul li {font-size:0.9em; line-height:1.5;}
                        #innerContentContainer ul li ul li a:hover {background:#666; color:#fff;}
                        #innerContentContainer ul li ul li a {color:#000;border-bottom:1px #000 solid;}

#innerContentContainer ol {list-style:decimal; margin:0 0 13px 15px;}
    #innerContentContainer ol li {font-size: 1.0em; line-height:1.5; margin-left: 5px;}

/***************************
 * Header stuff
 ***************************/
#topHeader {margin-bottom: 7px; padding: 0px; height: 51px; background: #fff url(../images/shared/jf_logo.gif) no-repeat left center; position: relative; text-decoration: none;}
    #topRightNav .divider {font-size: 8pt; margin: 0; padding: 0;}
    #topRightNav {margin: 0px 10px 9px 0px; position:absolute; bottom: 0; right: 0;}
    #topRightNav a {font-size: 8pt; color: #6e595a; text-decoration: none;}
    #topRightNav a:hover {text-decoration: underline;}

    #sloganHeader {height: 153px; width: 192px; background: #fff url(../images/shared/mid_left_img.jpg) no-repeat center center; background-position: 8px 8px; float: left;}
    #sectionHeader {height: 153px; width: 563px; background-color: white; float: right; position: relative;}
        #sectionHeader img {margin-top: 8px;}
        #sectionHeader div h1 {font-weight: normal; font-size: 14pt; color: #ffffff; position: absolute; left: 16px; bottom: 0px; z-index: 10; line-height: 24px; margin-bottom: 10px;}
        #sectionHeader div h2 {font-weight: bold; font-size: 14px; text-transform: uppercase; color: #ffffff; position: absolute; left: 16px; top: 100px; z-index: 10; line-height: 24px; font-family: arial, helvetica, sans-serif; letter-spacing: 0.039cm;}


/***************************
 * Three column middle
 ***************************/
#middleContainer td {vertical-align: top; background: #fff url(../images/shared/bg.jpg); background-color: white; font-size: 8pt; color: #464646; line-height: 15px; font-family: verdana, arial, helvetica, sans-serif;}
    #leftColumn {width: 184px; border: white 8px solid; padding: 0px 5px 5px 5px; -moz-box-sizing: border-box;}
        #rightColumnText {width: 156px; border: white 8px solid; padding: 4px 6px 182px 6px;}
        #rightColumnText p {font-size: 10px; color: #560a56; line-height: 15px;}
        #rightColumnText p.red {color: #e30c58;}
        #rightColumnImage {height: 161px; background-color:white; text-align: center; padding: 80px 0px 0px 0px; vertical-align: bottom;}
            #rightColumnImageDiv {height: 161px; background-color:white;}
    #contentContainer {padding: 0px 8px 8px 8px; overflow: hidden;}
        #innerContentContainer {padding: 8px; background-color: #fff; padding-bottom: 20010px; margin-bottom: -20000px;}

#tableWrapper {width: 755px; float: left; position: relative; margin: 0px; padding: 0px;}
#bottomRightImageDiv {background: #fff url(../images/shared/bg.jpg); border-top: white 8px solid; padding-top: 8px; position: absolute; right: 0px; bottom: 8px;}
#bottomRightImageDiv div {height: 152px; width: 168px; border: white 8px solid; background-color: white; text-align: center;}


/***************************
 * Footer stuff
 ***************************/
#topFooter {width: 100%; border-top: #938a90 1px solid; background-color: #e3c8d9; position: relative; float: left;}
    #topFooter p {margin: 0px; padding-top: 5px; float: left; border-right: #938a90 1px solid; line-height: 12px; height: 32px; font-size: 9px; color: #464646; padding-right: 56px;}
    #topFooter img {margin-top: 14px; margin-right: 14px;}

#footer {padding-top: 2px; width: 100%; border-right: #938a90 0px solid; border-top: #938a90 1px solid; height: 20px; background-color: #d3b8c9; position: relative; float: left;}
    #bottomLeftNav {margin-left: 10px;}
    #copyright, #bottomLeftNav a, #copyright a {font-size: 8pt; color: #000000; text-decoration: none;}
    #bottomLeftNav a:hover, #copyright a:hover {text-decoration: underline;}
    #copyright {padding-top: 2px; margin-right: 10px; position:absolute; top: 0; right: 0;}


/***************************
 * Menu styling   
 ***************************/
.menuLevel1 li {padding-top: 7px; padding-bottom: 7px; padding-left: 22px; border-bottom: 1px solid #999999; vertical-align: middle; background-image: url(../images/shared/arrow_right.gif); background-repeat: no-repeat; background-position: 5px 11px; }
    .menuLevel1 li.selected {background-image: url(../images/shared/arrow_down_red.gif);}
    .menuLevel1 li a {font-size: 8pt; color: #5c575a; text-decoration: none; vertical-align: middle;}
    .menuLevel1 li a:hover {text-decoration: underline;}

.menuLevel2 {display: none;}
li.selected .menuLevel2 {display: block;}
.menuLevel2 li {margin-left: -22px; padding-left: 32px; padding-top: 1px; border: none; padding-bottom: 3px; margin-top: 2px; margin-bottom: 2px; vertical-align: middle; background-image: url(../images/shared/arrow_blue.gif); background-repeat: no-repeat; background-position: 10px 3px;}
    .menuLevel2 li.selected {background-image: url(../images/shared/arrow_red4.gif); background-color: #e3c7d9;}
    .menuLevel2 li a {font-size: 8pt; color: #b0427a; text-decoration: none; vertical-align: middle; }


/***************************
 * Forms
 ***************************/
.textBoxMedium {border: #949494 1px solid;}
label {font-size: 1em; width: 10em; float: left; margin-right: 0.5em; display: block; line-height: 20px;}
#registrationForm label {text-align: right; white-space: nowrap;}
#registrationForm .checkboxLabel {text-align: left; font-size: 1em; width: 15em;}
#registrationForm input[type="text"]  {width: 220px; vertical-align: middle;}
#registrationForm input[type="checkbox"], #registrationForm input[type="radio"] {vertical-align: middle;}
#registrationForm input[type="checkbox"] {clear: right; float: left;}
#registrationForm span {line-height: 16px; vertical-align: middle;}
#registrationForm select {width: 220px; border: #949494 1px solid;}
#registrationForm textArea {width: 320px;}
p.checkboxLabelPair {
clear: both;
float: none;
}

.dataProtectionAct{background-color: #ECF2BD; padding: 2px 10px 0px 5px; margin: 5px 0 5px 0;}

/***************************
 * Workarounds
 ***************************/
/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}