/*
background color:   #310863
inner color:        #a1cf14

*/

/************************* text styles *********************/

a,li,p,h1,h2,h3,h4,h5, td , th {
    font-family: arial;
}

a:hover {
    text-decoration: underline;
}
h1, h2 {
    font-size: 19px;
    color: #310863; /* bg */
    border-bottom: 1px solid #939598;
    padding: 0 0 3px 0;
}

h1 {
    margin: 0 0 2px 0;
}

h2 {
    margin: 0 0 15px 0;
}

h2#eventTitle {
    border: none;
    margin: 0 0 2px 0;
}

h3 {
    font-size: 16px;
    margin: 0 0 15px 0;
}

h3 a {
    color: #310863; /* bg */
    
}

p {
    font-size: 12px;
    color: #1c1c1c;
    margin: 0 0 20px 0;
}

p a {
    font-weight: bold;
    color: #310863; /* bg */
    
}
p img {
    float: left;
    margin: 0 10px 10px 0;
}

.rightLink {
    text-align: right;
}

.rightLink a {
    color: #310863; /* bg */
    font-size: 12px;
}

#main img.floatRight {
    float: right;
    margin: 0 0px 10px 10px;
    
}

#main .noBg {
    background: none;
}

/************************* layout *********************/
/* TIM: - I've marked each instance of either 'background color' or 'inner color' with either a 'bg' or an 'inner' comment next to the line

#main has a background image that needs to be created with dynamic image. Its a single color, and the color is 'inner color' (will be obvious when you see it)
*/


body {
    background: #310863 url('/assets/scouts/images/core/bodyBg.gif') center top repeat-y; /* bg */
}

#wrap {
    width: 912px;
    margin: 0px auto;
    padding: 9px;
}

#main {
    background: url('/assets/scouts/images/core/innerBg.gif') right top repeat-y;
    margin: 0 0 9px 0;
}

#nav {
    background: #a1cf14; /* inner */
    margin: 9px 0 9px 0;
}

#nav ul {
    float: left;
}

#nav p {
    width: 218px;
    float: right;
    text-align: right;
    padding: 11px 9px;
    font-size: 14px;
    font-size: 14px;
    color: #310863; /* bg */
    margin: 0;
}

#nav li {
    display: block;
    float: left;
}

#nav li.on a {
    background: #310863; /* bg */
    color: #fff;
}

#nav li a {
    display: block;
    padding: 11px 9px;
    font-size: 14px;
    color: #310863; /* bg */
}

#left {
    width: 660px;
    float: left;
}

#right {
    width: 241px;
    float: right;
}

#right ul {
    
}

#right ul li {
    display: block;
}

#right ul li a {
    display: block;
    padding: 9px 7px;
    color: #310863; /* bg */
    font-size: 14px;
}

#right ul li.on a {
    background: #310863; /* bg */
    color: #fff;
}

/**************** crumbs *************/

#crumbs {
    margin: 0 0 30px 0;
}

#crumbs li {
    display: inline;
    color: #414042;
    font-size: 12px;
}

#crumbs li a {
    color: #414042;

}

#crumbs #crumbLast {
    color: #310863; /* bg */
    font-weight: bold;
}

/************************* footer *********************/

#footer {
    clear: both;
    background: #310863; /* bg */
    padding: 10px;
}

#footer li, #footer li a {
    color: #fff;
    font-size: 12px;
}

#footer ul li {
    margin: 0 13px 0 0;
}

#footer ul {
    width: 648px;
    float: left;
}

#backTo {
    width: 205px;
    float: right;
    text-align: right;
    margin: 0;
}

#backTo a {
    color: #fff;
    font-weight: normal;
}

#footer li {
    display: inline;
}

/************************* event box *********************/

.eventBox {
    margin: 0 0 15px 0;
    border-bottom: 1px solid #939598;
    padding: 0 0 10px 0;
}

.eventBox .evDate {
    font-size: 13px;
    color: #a7a9ac;
    margin: 0 0 2px 0;
}

.evPic {
    float: left;
    width: 127px;
    height: 75px;
    padding: 8px 0 0 7px;
    background: url('/assets/images/core/shadow.gif') left top no-repeat;
}

.evDetails {
    width: 459px;
    float: left;
    padding: 0 0 0 20px;
}


.eventBox h3 {
    margin: 0 0 4px 0;
}

.eventBox p {
    font-size: 12px;
    color: #a7a9ac;
}

/**************** event stats *************/

#eventStats {
    border-top: 1px solid #939598;
    background-color: #f1f2f2;
    font-size: 12px;
    padding: 2px 5px 2px;
    width: 100%;
    margin: 0 0 10px 0;
}

#main .statsLeft {
    width: 323px;
    float: left;
}

#eventStats tr {
    background: url('/assets/images/core/greyDotHoriz.gif') left bottom repeat-x;
}


#eventStats .evLabel {
    color: #310863; /* bg */
    margin: 0 0 0px 0;
    padding: 5px 6px;    
}

#eventStats .evDesc {
    padding: 5px 0;
    color: #a7a9ac;
}

#eventStats br {
    clear: both;
}

/**************** bottom nav *************/

#bottomNav {
    background: #f1f2f2 url('/assets/images/core/greyDotHoriz.gif') left top repeat-x;
    padding: 7px 3px;
    margin: 0 2px 0 0;
}

#bottomNav a {
    display: block;
    font-size: 14px;
    color: #310863; /* bg */
    font-weight: bold;
    padding-bottom: 2px;
}

#bnLeft {
    float: left;
    width: 125px;
    background: url('/assets/images/core/roundLeft.gif') left top no-repeat;
    padding: 0 0 0 30px;
}

#bnRight {
    float: right;
    width: 165px;
    padding: 0 30px 0 0;
    text-align: right;
    background: url('/assets/images/core/roundRight.gif') right top no-repeat;
}

#bnMiddle {
    float: left;
    width: 155px;
    background: url('/assets/images/core/roundLeft.gif') left top no-repeat;
    padding: 0 0 0 30px;
    margin: 0 0 0 80px;
}


#flashPhoto, #flashVideo {
    margin: 0 0 20px 0;
}