/*
 * Vodafone.com
 * Stylesheet containing items common to most pages 
 *
 * Created by MarketingNet Ltd.
 * JMW 2007
 * -------------------------------------------------------- */

 
 
/* headings and titles */
/* ------------------- */

/* page titles - white on red */
h1 {                        /* will be images but need to style alt text accordingly */
    margin: 0;
    padding: 10px 0;
    color: #fff;
    background: #f00;
    font-family: arial, helvetica, sans-serif;
    font-size: 212.5%;
}
h1 span.subtitle {
    font-weight: normal;
}
h2, p.redtitle {                        /* equates to 15px with standard browser settings */           
    color: #f00;
    margin: 0;
    padding: 7px 10px 0 10px;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 131.25%;
}


/* general content presentation rules */
/* ---------------------------------- */

/* text */
#content {
    font-size: 68.75%;      /* equates to 11px with standard browser settings */
}
#content p, #content li {
    line-height: 131.25%;
}
#content p {
    margin: 0;
    padding: 7px 10px;
}
#content ul {
    margin: 0;
    padding: 4px 10px;
    list-style: none;       /* remove default bullet.  alternative bullet styles can be added below as required */
}
#content ul li {               /* default bullet style is red arrow */
    margin: 0;
    padding: 4px 0 4px 14px;
    background: url(../images/backgrounds/list_redarrow.gif) 0px 7px no-repeat;
}
#content ul.listchildren li {
    padding: 0 0 8px 0;
    background: none;
}
/* changed from chevrons to chevron - left original in in case existing pages use it */
#content span.chevron ul li, #content ul.chevrons li, #content span.chevrons ul li {
    padding: 0 0 3px 0;
    background: none;
}
#content ul.discs li {     /* bullets - black discs */
    padding: 4px 0 4px 14px;   
    background: url(../images/backgrounds/list_bullet.gif) 0px 8px no-repeat;
}

#content ol {
    margin: 0 20px 0 20px;
    padding: 4px 10px;
}
* html #content ol {
    margin-left: 25px;
}
*:first-child+html #content ol {
    margin-left: 25px;
}
#content ol li {
    margin: 0;
    padding: 4px 0 4px 0;

}

/* atmospheres have some properties defined in cq.css */
#atmospherelarge p.larger, #atmospheresmall p.larger, #atmospherewithcurtains p.larger {
    font-size: 131.25%;         /* equates to 16px with standard browser settings */
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
}


/* images */
/* ------ */

/*img {
    display: block;
}*/ /*pn removed*/

div.featuredeventdate img {
    display: block;
}

a img {
    border: 0;
}
img.icon {
    display: inline;
    margin-bottom: -2px;
    padding-right: 5px;
}
img.rssicon {
    display: inline;
    margin-bottom: -5px;
    margin-right: 5px;
}


/* links */
/* ----- */
#content a:link {
    color: #333;
}
#content a:visited {
    color: #666;
}
#content a:hover {
    color: #333;
}
#content h2 a:link {
    color: #f00;
}
#content h2 a:visited {
    color: #f00;
}
#content h2 a:hover {
    color: #f00;
}

#content .singlecol span.chevron, #content .doublecol span.chevron, #content .triplecol span.chevron, #content ul.listchildren li, #content ul.chevron li, #content ul.chevrons li {
    display: block;
    background: url(../images/backgrounds/link_arrow.gif) #fff no-repeat 169px 2px;
    margin-top: 5px;
    padding: 0 20px 5px 0;
    width: 180px;
    width/* */:/**/160px;   /* to counter earlier IE's box model issues */
    width: /**/160px;
}
#content ul.listchildren li {
    padding-bottom: 8px;
}

#content span.rssfeed {
    display: block;
    background: url(../images/backgrounds/rssfeed.gif) #fff no-repeat 0 0;
    padding: 0 0 5px 20px;
    width: 180px;
    width/* */:/**/160px;   /* to counter earlier IE's box model issues */
    width: /**/160px;
}



/* link buttons */
/* ------------ */
/* following rules have some properties defined in cq.css also */
/* standard anchor link button (red background) */
#content a.button, #content a.buttoninverse {
    padding: 2px 20px 3px 5px;
    text-decoration: none;
    cursor: pointer;
}
#content a.button {
    margin-top: 10px;
}
#content a.button:visited {
    color: #fff;
}

/* standard anchor link inverted button (white background) */
#content a.buttoninverse {
    margin-top: 10px;
}
#content a.buttoninverse:visited {
    color: #f00;
}
#content a.buttoninverse:hover {
    background: url(../images/backgrounds/button_arrow.gif) no-repeat right #f00;
    color: #fff;
}


/* special rules for teaser buttons */
/* 
    Teaser buttons are fixed near bottom of teaser, so must be positioned absolutely.
    30 pixels of padding-bottom in the teaser ensures the text does not overlap the button.
*/
#content .singlecolteaser a.button, #content .singlecolteaserwithgap a.button, #content .doublecol .singlecolteaserwithgap a.button, #content .singlecolteaser a.buttoninverse, #content .singlecolteaserwithgap a.buttoninverse, #content .doublecol .singlecolteaserwithgap a.buttoninverse {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 2px 20px 2px 5px;
}
/* IE7 specific */
*:first-child+html #content .singlecolteaser a.button, *:first-child+html #content .singlecolteaserwithgap a.button, *:first-child+html #content .doublecol .singlecolteaserwithgap a.button, *:first-child+html #content .singlecolteaser a.buttoninverse, *:first-child+html #content .singlecolteaserwithgap a.buttoninverse, *:first-child+html #content .doublecol .singlecolteaserwithgap a.buttoninverse {
    padding: 1px 20px 2px 5px;
}
/* IE6 specific */
* html #content .singlecolteaser a.button, * html #content .singlecolteaserwithgap a.button, * html #content .doublecol .singlecolteaserwithgap a.button, * html #content .singlecolteaser a.buttoninverse, * html #content .singlecolteaserwithgap a.buttoninverse, * html #content .doublecol .singlecolteaserwithgap a.buttoninverse {
    padding: 1px 20px 2px 5px;
}



/* forms */
/* ----- */
form {
    margin: 0;
    padding: 0;
}
form input, form select {
    font-size: 93.75%;
}
/* Opera specific */
@media all and (min-width: 0px) {   
    #content form input, #content form select {
        font-size: 100%;
    }
}

label {
    color: #f00;
    color: #333;
    padding-bottom: 5px;
}
#content form button.button, #content form button.buttoninverse {
    margin: 0;
    padding: 1px 16px 2px 2px;
    font-size: 100%;
    text-decoration: none;
    cursor: pointer;
    font-weight: normal;
}

/* Opera specific - needs more right padding */
@media all and (min-width: 0px) {   
    #content form button.button {
        padding-right: 20px;
    }
}
form.greybg {
    background: #f2f2f2;
    margin-top: 5px;
    padding: 10px;
}


/* IE7 specific */
*:first-child+html #content form button.button, *:first-child+html #content form button.buttoninverse {
    margin-left: 2px;
    padding: 0 15px 0 0;
}
/* IE6 specific */
* html #content form button.button, * html #content form button.buttoninverse {
    margin-left: 2px;
    padding: 0 15px 0 0;
}
* html #content form.greybg {
    line-height: 137.5%;
}

/* 'redlabel' forms */
#content form label.redblock {
    display: block;
    color: #f00;
    margin-top: 10px;
}
#content form.redblocklabels label {
    display: block;
    color: #f00;
    font-weight: bold;
}




/* generic display rules */
/* --------------------- */

/* weights */
.bold {
    font-weight: bold;
}


/* colours */
.red {
    color: #f00;
}
.grey {
    color: #666;
}
.whitebg {
    background: #fff;
}
.greybg {
    background: #f2f2f2;
    padding: 3px 0;
}


.greybgforfloats {
    background: #f2f2f2;
    margin-top: 10px;
    padding-top: 5px;
}
/* 
    used on listing page - floated divs sitting inside another div with a grey background
    divs within this particular grey div should always be floated (and have red text)
    Others could be set up along similar lines - keeps markup relatively clean
*/
div.greybgforfloats div {
    float: left;
    color: red;
    margin-right: 10px;
}


/* alignment */
.textleft {
    text-align: left;
}


/* widths */
.doublecolwidth {   /* can be used to display doublecol width content in a triplecol */
    width: 400px;
}


/* layout */
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
#content .inline {
    display: inline;
}
#content .block4 {
    display: block;
    padding-bottom: 4px;
}

#content .padtop8 {
    padding-top: 8px;
}
#content .margtop10 {
    margin-top: 10px;
}
#content p.padbottom0 {
    padding-bottom: 0;
    margin-bottom: 0;
}
#content .padright10 {
    padding-right: 10px;
}
#content .top0 {
    margin-top: 0;
    padding-top: 0;
}
#content span.margintop5 {
    margin-top: 5px;
}



/* separator lines */
.singlecol div.separator {
    float: left;
    width: 200px;
    height: 11px;
    background: url(../images/linebreak_190.gif) #fff no-repeat;
}
.doublecol div.separator {
    float: left;
    width: 390px;
    height: 11px;
    background: url(../images/linebreak_390.gif) #fff no-repeat;
    font-size: 1%;
}
.triplecol div.separator {
    float: left;
    width: 590px;
    height: 11px;
    background: url(../images/linebreak_590.gif) #fff no-repeat;
}
.singlecol div.separatordark {
    float: left;
    width: 200px;
    height: 11px;
    background: url(../images/linebreak_dark_190.gif) #fff no-repeat;
}
.doublecol div.separatordark {
    float: left;
    width: 390px;
    height: 11px;
    background: url(../images/linebreak_dark_390.gif) #fff no-repeat;
    font-size: 1%;
}
.triplecol div.separatordark {
    float: left;
    width: 590px;
    height: 11px;
    background: url(../images/linebreak_dark_590.gif) #fff no-repeat;
}
.singlecol div.separatorlight {
    float: left;
    width: 200px;
    height: 11px;
    background: url(../images/linebreak_light_190.gif) #fff no-repeat;
}
.doublecol div.separatorlight {
    float: left;
    width: 390px;
    height: 11px;
    background: url(../images/linebreak_light_390.gif) #fff no-repeat;
    font-size: 1%;
}
.triplecol div.separatorlight {
    float: left;
    width: 590px;
    height: 11px;
    background: url(../images/linebreak_light_590.gif) #fff no-repeat;
}