/* New My WCC style sheet

Scott Higgins
February - March 2007

Major renovation of web page
- removed most layout tables
- improved CSS
- added CSS rollover menu sidebar
- simplified layout
- integrated static pages into My WCC CMS
WCC wep page color scheme
-------------------------
Main colors
yellow:      #f7e859
blue:        #0038a8
green:       #5bbf21

Minor accents (from 2005 color scheme)
red:         #cc0000
dark grey:   #333333

Other highlights (derivative of main colors)
lt blue:     #e0ebff
med lt blue: #406CBE
lt yellow:   #fffdd1

*/

body {
margin-top: 0;
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

/* layout */
#container {
width: 768px;
margin: 0px auto 2em auto;
padding: 0;
background-color: #fff;
color: #333;
text-align: left;
}
#header {
padding: 0;
border-bottom: 1px solid #666;
}
#top-menu {
text-align: center;
background-color: #242424;
}
#sidebar {
margin-top: 3px;
}
#main {
}
#footer {
border-top: 1px solid #333;
clear: both;
margin: 0;
padding: .5em;
text-align: center;
color: #666;
position:relative;
}

/* sidebar menus */
#mywcc-navcontainer a {
display: block;
padding: 3px 7px;
width: 160px;
background-color: #5bbf21; /* green */
border-bottom: 1px solid #eee;
}
#mywcc-navcontainer a:link, #mywcc-navcontainer a:visited {
color: #fff;
text-decoration: none;
}
#mywcc-navcontainer a:hover {
color: #0038a8;
background-color: #f7e859;
}
#navcontainer, #mywcc-navcontainer { width: 179px; }
#navcontainer ul, #mywcc-navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
#mywcc-navcontainer ul ul li a {
padding-left: 14px;
width: 153px;
font-style: italic;
}
#navcontainer a {
display: block;
padding: 3px 7px;
width: 160px;
background-color: #0038a8;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navcontainer a:visited {
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover {
background-color: #406CBE;
color: #fff;
}

/* fonts, colors, etc */
h1#pagetitle {
color: #0038a8;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
border-bottom: 3px solid #0038a8;
margin-top: 0;
margin-bottom: 0;
}
h1#main {
color: #0038a8;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
margin:0;
}

h1 {
color: #0038a8;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
}
h2 {
color: #0038a8;
margin: 0 0 .5em 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
font-style: italic;
}
h3 {
color: #0038a8;
margin: 0 0 .5em 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
}

p, ul, ol, blockquote, th, tr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p, ul {
margin-top: 0.2em;
margin-right: 0.7em;
margin-bottom: 0.8em;
}
a:link, a:visited {
color: #0038a8;
text-decoration: none;
}
a:hover {
color: #406CBE;
text-decoration: underline;
}

/* bike shops page */
table.info {
clear: both;
}
table.info td {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 3px 3px 3px 9px;
vertical-align: top;
border-bottom: 1px dotted #333333;
}

table.info td.head, table.info th {
background-color: #5bbf21;
color: #fffdd1;
font-weight: bold;
text-align: left;
padding-left: 7px;
border-left: 2px solid #0038a8;
border-bottom: 2px solid #0038a8;
}
table.info td.head a:link, table.info td.head a:link {
color:#fffdd1;
text-decoration:none;
}
table.info td.head a:link {
color:#ffffff;
text-decoration:underline;
}
table.info td.ride-cat {
color: #0038a8;
font-size: 1.8em;
font-weight: bold;
padding: 3px 3px 3px 27px;
}
/* mywcc */
div.messagebox {
border: 2px solid #5bbf21;
padding: 5px 7px;
margin: 24px 7px 7px 0;
background-color: #fffdd1;
color: #000000;
position:relative;
}
div.messagebox ul {
list-style-type: circle;
}
div.messagebox p strong, div.messagebox table.info tbody tr td strong {
color:#0038a8;
}
span.messagebox-title {
background-color: #5bbf21;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fffdd1;
padding:2px 7px 0 7px;
position:absolute;
height:15px;
top:-17px;
}

/* random image*/
div.one-image {
float: right;
margin: 0 0 5px 12px;
}

img.giThumbnail {
border: 1px solid #333;
}

/* merch page */
div.merch-thumb h3 {
margin-top:12px;
}
div.merch-thumb div.one-image {
clear:right;
float: right;
margin:0px 7px 5px 7px;
}
div.merch-thumb img.giThumbnail {
border: 1px solid #333;
}

div.merch-thumb h4.giDescription{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
text-align: center;
padding:0;
margin:2px 0 7px 0;
}


/* about us page styles */
div.short-bio {
        margin-bottom: 1em;
        clear: both;
}
div.short-bio dt {
        display:inline;
        margin:0;
}
div.short-bio dd {
        display: inline;
        margin:0;
        text-transform: uppercase;
        font-weight: bold;
}
div.short-bio p {
        font-style: italic;
        margin: 5px 9px 12px 22px;
        padding: 0;
        text-transform: none;
        font-weight: normal;
}
.headshot {
        border: 1px solid #000;
        margin-right: 9px;
        margin-bottom: 12px;
        display: block;
        float: left;
}
.name {
        font-weight: bold;
}

/* legacy markup*/
.wcc-tnb {
        vertical-align: top;
        margin: 0px;
        padding: 0px;
        font-size: 25px;
}
.wcc-tnb a:hover {
        margin: 0px;
        padding: 0px;
        background-color: #A40000;
}
/* cue sheet library */
.number {
background-color:#5bbf21;
font-weight: bold;
padding:1px 2px;
color:#FFF;
}

/* ride schedule */
h3.ride-schedule-date {
margin:0;
padding:0;
clear:left;
}
div.ride-post {
border: 2px solid #0038a8;
margin: 0 7px 7px 0;
background:url(bacos/ride-post-bg.gif) repeat-x;
position:relative;
}
div.ride-post ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div.ride-post ul li {
}
div.ride-post ul li.ride-start-time {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #0038a8;
background-color: #f7e859;
padding:0;
width:70px;
text-align:center;
position:absolute;
top:2px;
left:7px;
}
div.ride-post ul li.ride-pace {
font-size: 14px;
font-weight: bold;
color:#f7e859;
padding:0;
width:32px;
text-align:center;
position:absolute;
top:2px;
left:91px;
}
div.ride-post ul li.ride-mileage {
font-size:12px;
font-weight:normal;
background-color:#f7e859;
color:#0038a8;
padding:0;
position:absolute;
top:2px;
left:137px;
}
div.ride-post ul li.ride-leader-number {
font-size:12px;
font-weight:normal;
background-color:#f7e859;
color:#0038a8;
padding:0;
position:absolute;
top:2px;
right:10px;
}
div.ride-post ul li.ride-title {
font-size:12px;
font-weight:normal;
color:#f7e859;
background-color: #5bbf21;
padding:0;
position:absolute;
top:18px;
left:137px;
}
div.ride-post img.ride-web-only {
position:absolute;
top:18px;
right:12px;
}
div.ride-post div.ride-description {
font-size:12px;
font-weight:normal;
font-style:normal;
padding:3px 5px;
margin-top:37px;
}

.ride-cancelled {
font-size:16px;
font-weight:bold;
background-color:red;
color:white;
}

.ride-start-location {
font-size:12px;
font-weight:bold;
font-style:normal;
color:black;
padding:3px;
text-align:center;
}
div.ride-post ul li.ride-signup {
font-size:12px;
font-weight:normal;
font-style:normal;
background-color:#e0ebff;
padding:0px 4px 0 4px;
border:1px solid #0038a8;
margin-right:12px;
float:right;
position:relative;
top:-15px;
}
div.ride-post ul li.ride-cue-sheet {
font-size:12px;
font-weight:bold;
font-style:normal;
color:#f7e859;
background-color:#5bbf21;
padding:1px 3px 0 3px;
margin-right:12px;
float:right;
position:relative;
top:-15px;
}
div.ride-post ul li.ride-start-location a:link, div.ride-post ul li.ride-start-location a:visited {
color: #f7e859;
}
div.ride-post ul li.ride-cue-sheet a:link, div.ride-post ul li.ride-cue-sheet a:visited {
color: #ffffff;
}
div.ride-post ul li.ride-start-location a:hover, div.ride-post ul li.ride-cue-sheet a:hover {
color: #fffdd1;
text-decoration: underline;
}
div.ride-post ul li.ride-edit {
font-size:12px;
font-weight:normal;
font-style:normal;
background-color:#e0ebff;
padding:0px 4px 0 4px;
border:1px solid #0038a8;
margin-right:12px;
float:right;
position:relative;
top:-15px;
}
.print-only {
display:none;
}
.clear {
clear:both;
}
/* newsletter archive */
h3.ps-archive-year {
clear:left;
border-bottom:2px solid #5bbf21;
}
li.ps-archive-month {
background:url(bacos/ps-archive-bg.gif);
background-repeat:no-repeat;
list-style-type:none;
color:#0038a8;
margin: 3px;
width:78px;
height:33px;
padding-top:6px;
float:left;
text-align:center;
}
li.is-authorized {
padding-bottom:24px;
}
p.newsletter-notice {
text-align: center;
font-weight:bold;
}
p.newsletter-notice a {
padding:3px 9px;
border:1px solid #f7e859;
margin-bottom:2em;
}
p.newsletter-notice a:link, p.newsletter-notice a:visited {
background-color:#0038a8;
color:#f7e859;
text-decoration:none;
}
p.newsletter-notice a:hover {
background-color:#5bbf21;
color:#fffdd1;
text-decoration:underline;
}
/* member roster */
div.member-roster-entry {
border:1px solid #0038a8;
position:relative;
margin-right:7px;
margin-bottom:7px;
}
div.member-roster-entry ul {
list-style-type:none;
list-style-image:none;
padding:5px 7px;;
margin:0;
}
div.member-roster-entry ul {
}
div.member-roster-entry ul li.member-name {
font-weight:bold;
color:#0038a8;
}
div.member-roster-entry ul li.member-phone {
position:absolute;
top:18px;
right:12px;
}
div.member-roster-entry ul li.member-email {
position:absolute;
top:5px;
right:12px;
}
div.member-roster-alphabet {
background-image:url(bacos/roster-alphabet-bg.jpg);
text-align:center;
border:1px solid #0038a8;
margin-right:7px;
margin-bottom:7px;
}
div.member-roster-alphabet {
font-size:14px;
font-weight:bold;
}
div.member-roster-alphabet a {
padding:3px;
}
div.member-roster-alphabet a:hover {
text-decoration:none;
color:#f7e859;
background-color:#0038a8;
}
/* my wcc my rides */
td.myrides {
background-color: #fffdd1;
border-bottom: 1px dotted #5bbf21;
}
h1.myrides {
margin: 0;
}
p.myrides {
padding: 3px 5px;
border-top: 1px dotted #5bbf21;
background-color: #EEFFE4;
margin-top: 0.3em;
margin-bottom: 0.8em;
}
h1.events-page{
display:inline;
}
span.register-now {
padding: 2px 9px;
margin-left:7px;
background-color:#0038a8;
}
span.register-now a:link, span.register-now a:visited, span.register-now a:hover {
color:#f7e859;
}
/* contact page */
ul.contact-page {
list-style-type:none;
list-style-image:none;
padding:0;
margin:0;
}
ul.contact-page li {
padding:5px 0;
position:relative;
}
ul.contact-page li span.contact-page {
position:absolute;
left:88px;
}
a .smam-baco {
position:absolute;
right:71px;
top:11px;
border:0;
}
.green {
color:green;
}
w.error, .expired, .error {
color:red;
// new for errors and the like
}

.input {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        width: 80%;
        text-align: left;
}

.inputCheckbox {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
        text-align: left;
}


.inputText {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 10px;
        height: 500px;
        width: 95%;
}

input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
form p label {
  float: left;
  width: 30%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}
fieldset {
  border: 1px dotted #61B5CF;
  margin-top: 16px;
  padding: 10px;
}
legend {
  font: bold 1.2em Arial, Helvetica, sans-serif;
  color: #00008B;
  background-color: #FFFFFF;
}