/*

CSS for pollingpoint.com.

Common, repeated font styles come first: 3 body text styles, 3 banner headers,
6 other headers, and some link styles. These tend to be widely re-used and are
best grouped together in order to reduce the duplication of each declaration
and subsequent transcription errors.

After that, all the positioning tweaks are grouped together, since these are
rarely shared.

 */


/* Reset boxes throughout */
* {
    margin: 0;
    padding: 0;
}

p, ul {
    margin: 0 0 12px 0;
}

img {
    border: 0;
}

/* ================================ THEMES ================================= */
/* ------------------------------- BODY TEXT ------------------------------- */

body, html {
    /* default text style */
    background-color: white;
    color: #6d6f71;
    font: 12px Arial,Helvetica,sans-serif;
}

#featured_result .content, #result .content, .sublinks {
    /* slightly larger text */
    font-size: 110%;
}

#leftbar #login_table a, #rememberme, #login_submit_p, .newslead .date,
    #footer, #privacy .effectivedate {
    /* lighter grey text */
    color: #999B9D;
    text-decoration: none;
}

.error-message {
    /* red error message */
    color: #FF9900;
}

/* --------------------------------- TABLES --------------------------------- */

/* "table class=data", as opposed to other tables, which might just be used
    for layout purposes */
.data {
    border-collapse: collapse;
    border: 1px solid #A8A8A8;
}

.data th {
    /* white on dark grey gradient (just like banner #1, below) */
    height: 21px;
    padding: 6px 14px 0 14px;
    
    font-size: 90%;
    background: url(/static/images/header_bg_dk_grey.gif) repeat-x top left;
    color: white;
    
    text-align: left;
}


.data td {
    padding: 14px;
    border: 1px solid #A8A8A8;
}


/* ----------------------------- WIDGET BANNERS ----------------------------- */

.leftcolumn h1 {
    /* white on dark grey gradient (just like th, above) */
    height: 21px;
    padding: 6px 14px 0 14px;
    
    font-size: 90%;
    background: url(/static/images/header_bg_dk_grey.gif) repeat-x top left;
    color: white;
}

#live_poll_teasers h1 {
    /* white on red gradient */
    height: 21px;
    padding: 6px 14px 0 14px;
    
    font-size: 90%;
    background: url(/static/images/header_bg_red.gif) repeat-x top left;
    color: white;
}

#leftbar h1, #mainlogin h1 {
    /* dark grey on light grey gradient */
    height: 25px;
    padding: 0 15px;
    
    background: url(/static/images/header_bg_lt_grey.gif) repeat-x top;
    border-bottom: 1px solid #efefef;
    
    font-size: 110%;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: lowercase;
}

/* -------------------------------- HEADERS -------------------------------- */

#featured_result h2, #featured_poll h2 {
    font-size: 125%;
    margin: 6px 0;
    color: #A8A8A8; /* light grey */
}

.widget h2, #news .newslead h2, #aboutteam .teammember h6,
    #privacy h5, #prizes td.name h3 {
    font-size: 100%;
    font-weight: bold; /* ends up being a darker grey */
}

#featured_result h3, #result h2, #featured_poll h3 {
    font-size: 150%;
    line-height: 120%;
    color: #626262; /* very dark grey */
    margin: 6px 0; 
}

#live_poll_teasers .widget h2, #results .category h2,
    #aboutteam .teammember h3, #privacy h2, #result h6, #faq h3,
    #live_polls .category h2, #live_polls .category h3 {
    font-size: 110%;
    color: black;
}

#story h2, #about h2, #rewards h2, #redeem h2, #getit h2 {
    /* larger black header */
    margin: 25px 0;
    font-size: 125%;
    font-weight: bold;
    color: black;
}

.section h1 {
    padding: 15px 3px 12px 3px;
    margin-bottom: 14px;
    font-size: 150%;
    color: #ee2d27;
    border-bottom: 1px dotted #CCCCCC;
}

/* --------------------------- LINKS AND BUTTONS --------------------------- */

a {
    /* all links red by default */
    color: #EE2D27;
    text-decoration: none;
    border: none;
}

/* inherited color instead of default red;
    unfortunately, IE 6 doesn't support "color: inherit"
 */
#featured_poll h2 a {
    color: #A8A8A8; /* light grey */
}
#featured_poll h3 a {
    color: #626262; /* very dark grey */
}
#topnav a, .headline a, .sublinks a {
    color: #6d6f71;
}
.leftcolumn h1 a, #live_poll_teasers h1 a, #mypolls_nav a {
    color: white;
}
#footer a {
    color: #999B9D;
}
#live_polls .category h3 a {
    color: black;
}

.button {
    width: 90px;
    height: 20px;
    padding: 3px;
    
    font-weight: bold;
    font-size: 90%;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* IE 5.x */
    border: none;
    
    /* default white on grey--override as desired */
    color: white;
    background: url("/static/images/button_grey.gif") no-repeat top left;
}

input.button {
    /* At least in FF3, input needs width increased to include padding */
    width: 96px;
}

#signup_b .button, #prizes .button, #getit #get_it_button,
    #registration .button, #rewards .button {
    background: url("/static/images/button_red.gif") no-repeat top left;
}

.jumpline {
    color: #EE2D27;
    text-align: right;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* IE 5.x */
}

.headline .jumpline {
    font-size: 150%;
    line-height: 12px;
}

.back {
    font: 12px Arial,Helvetica,sans-serif;
    text-align: right;
    text-transform: uppercase;
}

h1 .back {
    float: right;
}

.sublinks {
    margin-bottom: 25px;
}

/* ============================== POSITIONING ============================== */
/* ------------------------------ BASE CHROME ------------------------------ */

body {
    width: 920px;
    /* Center the entire page in the viewport */
    margin: auto;
}

#flag {
    height: 52px;
    padding: 32px 0 0 14px;
}

#navbars {
    margin: 0 0 12px 0;
}

#topnav {
    height: 30px;
    margin: 0;
    
    border: none;
    border-top: 5px solid #ee2d27;
    
    color: #6d6f71;
    list-style-type: none;
}

#topnav li {
    float: left;
    height: 30px;
    width: 114px;
    
    margin-right: 1px;
    
    text-align: center;
    background: url(/static/images/nav_button_bg.gif) repeat-x top;
}

#topnav a {
    display: block;
    padding: 6px;
    
    font-variant: small-caps;
    text-transform: lowercase;
}

#main { /* -- outermost table -- */
    width: 920px;
    margin-top: 20px;
    
    border-collapse: collapse;
}

#main td {
    vertical-align: top;
}

#footer {
    margin: 6px 0;
    padding: 0 0 0 25px !important;
}


/* ----------------------------- LEFT SIDEBARS ----------------------------- */

#leftbar {
    width: 210px;
}

#leftbar .widget {
    margin-bottom: 12px;
    border: 1px solid #efefef;
}

#leftbar .widget p {
    padding: 6px 0;
}

#leftbar .widget .moretext {
    display: none;
}

#leftbar .widget a {
    text-decoration: underline;
    color: inherit;
    font: inherit;
}

#login_table {
    margin: 6px 0;
    border-collapse: collapse;
}

#login_table th {
    padding: 4px 4px 4px 0;
    text-align: left;
    font-weight: normal;
}

#login_table input.login_text {
    width: 105px;
}

#leftbar #login p, #leftbar #member p {
    margin: 0;
    /* Needed to override .widget p */
    padding: 3px;
}

#rememberme input {
    margin: 0 6px 0 0;
}

#leftbar #login_b .button, #leftbar #signup_b .button {
    float: right;
}

#signup_b {
    border-top: 1px dotted #CCCCCC;
    margin-top: 15px;
    padding: 14px 0;
}

#mypolls_nav {
    /* centered */
    margin-left: 15px;
}

#mypolls_nav .button {
    width: 180px;
    list-style: none;
    background: url("/static/images/button_grey_180.gif") no-repeat top left;
}

/* ------------------------------- NEWS LEAD ------------------------------- */

.newslead {
    padding: 14px 0;
}

.newslead p {
    margin: 0;
}


/* -------------------------------- WIDGETS -------------------------------- */

.widget {
    border-bottom: 1px solid #A8A8A8;
    border-left: 1px solid #A8A8A8;
    border-right: 1px solid #A8A8A8;
    margin: 0 0 10px 0;
    padding: 0 15px;
}

.widget .newslead {
    border-bottom: 1px dotted #CCCCCC;
}
/* This won't match in IE 6, but it's minor */
.widget .newslead:last-child {
    border-bottom: none;
}


/* ----------------------------- SINGLE COLUMN ----------------------------- */

.section {
    margin: 0 0 10px 25px;
    padding: 0 19px 19px 19px;
    border: 1px solid #EFEFEF;
    
    width: 685px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 635px; /* actual value */
    }


/* ----------------------------- DOUBLE COLUMN ----------------------------- */

.twocolumn {
    border-collapse: collapse;
    width: 710px; /* actual value */
}

.twocolumn .leftcolumn {
    padding: 0 25px;
    
    width: 460px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 410px; /* actual value */
    }

.twocolumn .rightcolumn {
    width: 250px; /* actual value */
}


/* --------------------------- INDIVIDUAL TWEAKS --------------------------- */

.featured_img {
    text-align: center;
}

#content .teaser_img {
    text-align: center;
    border: 1px solid black;
    margin: 6px 0;
}

#live_poll_teasers .teaser_img {
    border: 1px solid #003D6B;
}

#live_poll_teasers .teaser {
    padding: 14px 0;
}

/* story.html */

.firstp .location {
    font-weight: bold;
    text-transform: uppercase;
}

.firstp .date {
    font-weight: bold;
}

/* results.html */

#featured_result h3 img {
    float: right;
    margin: 0 10px;
}

#results .category {
    clear: both;
}

#results .category h2 {
    padding: 8px 0;
    border-bottom: 1px dotted #CCCCCC;
    margin: 14px 0 20px 0;
}

#results .category ul {
    list-style: square inside;
}

/* result.html */

#result .result h6 {
    font-size: 120%;
    font-weight: bold;
    color: black;
    border-bottom: 1px dotted #CCCCCC;
}

/* aboutteam.html */

#aboutteam ul#titlelinks {
    list-style: none;
    padding: 20px 0 25px 0;
    border-bottom: 1px dotted #CCCCCC;
}

#aboutteam ul#titlelinks li {
    margin: 8px 0;
}

#aboutteam ul#titlelinks a {
    font-weight: bold;
    color: #6d6f71;
}

#aboutteam .teammember {
    margin: 32px 0;
}

/* polls.html */

#featured_poll h2 {
    margin: 0;
}

#featured_poll h3 {
    margin: 0 0 10px 0;
}

#featured_poll td {
    padding-right: 10px;
    text-align: left;
    vertical-align: middle;
}

#live_polls .category .poll_row {
    height: 105px;
    overflow: hidden;
}

#live_polls .category .smallimage {
    float: left;
    /* The image is 192px wide; add a 10px pad */
    width: 202px;
    height: 105px;
    text-align: left;
    vertical-align: top;
}

#live_polls .category .poll {
    text-align: left;
    /* This is the height of the smallimage; match it to
        align middle (but allow text to overflow this div
        (but not its container div, .poll_row)) */
    height: 60px;
    vertical-align: middle;
}

#live_polls .category .poll_inner {
    vertical-align: middle;
}

#live_polls .category h2 {
    margin: 25px 0 10px 0;
    padding: 6px 0;
    border-bottom: 1px dotted #CCCCCC;
}

#live_polls .category img {
    border: 1px solid #003D6B;
}

/* rewards.html, redeem.html */

#rewards h2 {
    margin: 14px 0 6px 0;
}

#prizes td.image {
    border-right: none;
}

#prizes td.name {
    border-left: none;
}

#prizes td.image {
    text-align: center;
}

/* login_big.html */

#mainlogin {
    width: 480px;
    margin: auto;
}

#mainlogin .widget {
    border: 1px solid #efefef;
}

#mainlogin #login_table input.login_text {
    width: 350px;
}

#mainlogin #signup {
    border-bottom: 1px dotted #CCCCCC;
    margin-bottom: 10px;
}

#mainlogin #yglogin {
    margin: 6px;
    padding: 6px;
    border: 1px dotted #CCCCCC;
    height: 75px;
}

#mainlogin #yglogin img {
    float: right;
}

/* rules.html */

#rules ul {
    list-style: square inside;
    padding-left: 1em;
    text-indent: -1em;
}

/* getit.html */

#getit table#contact {
    border-collapse: collapse;
    margin: 12px 0;
}

#getit #contact th {
    padding: 6px;
    text-align: right;
}

#getit #contact td {
    padding: 6px;
    text-align: left;
}

#getit table#prizes {
    margin: 12px 0;
}

#getit #get_it_button, #getit #cancel_button {
    float: left;
}

/* update.html, updatepw.html */

#update table, #updatepw table {
    width: 100%;
    margin: 14px 0px;
}

/* forgotpass.html */

#forgotpass table {
    margin: 12px 0;
}