/*================================================== LAYOUT STYLES */
/*
    CSS Document for BP Global Homepage
    Build: Julien Decaudin on behalf of SAS - 11/03/2009
*/


/*--------------------------------------------------=> HEADERS */
/* H1 */
h1
{
    padding-bottom: 0px;    
}

#title_container
{
    height:72px;
}

/* H2 */
#footer h2
{
    background-repeat:repeat-x;
    background-position:bottom left;
    padding-bottom:5px;
    margin-bottom:9px;
    border-bottom-style:solid;
    border-bottom-width:1px;
}

/* H3 */
h3
{
    margin-bottom:4px;
}


/*--------------------------------------------------=> CONTENT ELEMENTS */
/*-------------> Global */
.content_holder
{
    padding: 10px;
}

/*-------------> Paragraph */
p
{
    padding-bottom: 10px;
    margin: 0;
}

#region_header
{
    float:left;
    display: block;
    width: 69px; 
    height:68px;
    border-left-width:1px;
    border-left-style:solid;
    padding:3px 0 0 14px;
    margin-left:2px;
}

/*-------------> Links */

a, a span
{
    padding-bottom: 1px;
}


.link_back_top
{
    float:right;
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding-left: 12px;   
}

a.link_new_window span.new_window
{        
    background-repeat: no-repeat;
    background-position: 0 4px;
    padding:0 5px 0 8px;
}



#link_map
{
    display:block;
    width:227px;
    height:52px;
    background-repeat: no-repeat;
    background-position: 0 -52px;
    padding:0;
    text-decoration:none;
}

#link_map:hover
{
    background-position: 0 0;
}

a.link_button_gom
{
    display:block;
    width:213px;
    height:45px;  
    padding:0;  
    margin:2px 0 10px 0;    
    background-repeat: no-repeat;
    background-position: 0 -45px;
}

a.link_button_gom:hover
{
    background-position: 0 0;
}

/*-------------> Lists */
/* link list */
ul.link_list li
{
    padding-bottom: 6px;
}

ul.link_list li a
{
    background-repeat: no-repeat;
    background-position: 0 4px;
    padding-left: 10px;    
}

ul.link_list li.icon_station_locator,
ul.link_list li.icon_calculator,
ul.link_list li.icon_pdf,
ul.link_list li.icon_rss
{
    background-repeat:no-repeat;
    background-position:0 0;
    padding-left:25px;  
    display:block;
    width:90%;  
}

ul.link_list li.icon_large_twitter a,
ul.link_list li.icon_large_facebook a,
ul.link_list li.icon_large_youtube a,
ul.link_list li.icon_large_Flickr a,
ul.link_list li.icon_large_rss a,
ul.link_list li.icon_large_youtube a,
ul.link_list li.icon_large_flickr a

{
    background-repeat:no-repeat;
    background-position:0 0;
    padding-left:25px;  
    display:block;
    width:90%;  
}

#press_releases_list li
{
    padding-bottom:15px;
}

ul.link_list li.icon_station_locator a,
ul.link_list li.icon_calculator a,
ul.link_list li.icon_pdf a,
ul.link_list li.icon_rss a,
#press_releases_list li a
{
    display:block;
    width:95%;
    background-position:0 5px;
}

#press_releases_list li span
{
    padding-left:10px;
}

ul.link_list li.highlight
{
    padding:5px 0 6px 5px;
    margin-bottom:5px;
    margin-top:2px;
}

/*-------------> Lines */
.hr
{
    background-repeat:repeat-x;
    height:1px;
    width:100%;
    margin:0 0 10px 0;
}



/* Javascript initialisation */
.js .tabs_list
{
    display:block;
}

.js .tabs_content
{
    border-top:0; 
}

.js .tabs_content h3
{
    display:none;
}

.js .tabs_content .link_list
{
    display:none;
}

.js .tabs_content .link_list.current
{
    display:block;
}

/* Dotted module */
.dotted_module
{
    background-repeat:repeat-y;
    background-position:0 0;
    width:100%;
    margin-bottom:10px;
}

.dotted_module_top
{
    background-repeat:no-repeat;
    background-position:top left;
    width:100%;
    height:6px;
}

.dotted_module_bottom
{
    background-repeat:no-repeat;
    background-position:bottom left;
    width:100%;
    height:5px;
}

.dotted_module .content_holder
{
    padding:9px;
    padding-top:0;
    padding-bottom:0;
}

/* Media module */
.media_module .content_holder
{
    padding:6px;
}

.media_module .header
{
    position:relative;
    margin-bottom:8px;
}

.media_module .header h2
{
    position:absolute;
    width:183px;
    padding-bottom:5px;
}

/* Right-hand modules */
#rh_module_container
{
    background-repeat:repeat-y;
    background-position:0 0;
    width:100%;
    margin-bottom:10px;
}

#rh_module_container_top
{
    background-repeat:no-repeat;
    background-position:top left;
    width:100%;
    height:6px;
}

#rh_module_container_bottom
{
    background-repeat:no-repeat;
    background-position:bottom left;
    width:100%;
    height:5px;
}

#rh_module_container .content_holder
{
    padding:9px;
    padding-top:0;
    padding-bottom:0;
}

.rh_module 
{
    margin-bottom:20px;
}

.rh_module_last
{
    /*margin-bottom:10px;*/
    margin-bottom:0px;
}

.rh_module_image
{
    float:left;
    width:67px;
    padding-top:3px;
}

.rh_module_copy
{
    float:right;
    width:135px;
}

/*-------------> Flash */
#flash_required
{
    position:absolute;
    z-index:0;
    bottom:10px;
    left:10px;
    background:#fff;
    padding:5px;
}

#alt_banner
{   
    position:relative;
    background-repeat:no-repeat;
    background-position:top left;
    width:963px;
    height:320px;
    z-index:0;
}

#alt_map_link
{
    position:absolute;
    width:234px;
    height:53px;
    top:0;
    right:0;
    z-index:0;
}

#alt_map_link a
{
    display:block;
    margin:7px 0 0 85px;
    background-repeat: no-repeat;
    background-position: 0 4px;
    padding-left: 10px;    
}

#alt_banner_nav
{
    position:absolute;    
    z-index:0;
    top:70px;
    right:5px;
}

#alt_banner_nav li
{
    padding:5px;
    width:135px;
    height:140px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    margin-right:13px;
}

#alt_banner_nav li a
{
    display:block;
    margin-top:5px; 
    text-decoration:none;        
}

#alt_banner_nav li a img
{
    padding-bottom:0px;         
}

#alt_banner_nav li a span
{
    display:block;
    padding:4px 5px 5px 10px;
    background-repeat: no-repeat;
    background-position: 0 8px;    
}

#alt_banner_nav li a:hover span
{
    text-decoration:underline; 
}



/*-------------> Misc */

/*--------------------------------------------------=> FORMS */
.input_text
{
    margin:0;
    padding:0;
    vertical-align:middle;
}

textarea
{
    border-width: 1px;
    padding: 4px 10px 5px 10px;
    width: 123px;
}

fieldset label
{
}

span.requfield
{
    
}

/* Buttons */
button
{
    cursor:pointer;
    border: none;
    margin: 0;
}

.button_go
{
    background-repeat: no-repeat;    
    padding: 0 4px 0 4px;
    margin: 0 0 0 5px;
}

/*--------------------------------------------------=> CONTENT LAYOUT */
/*-------------> Columns */
/* unique */
#content_column_left
{
    float:left;
    width:718px;
}

#content_column_right
{
    float:right;
    width:227px;
}

#content .column_third
{    
    width: 230px;
    padding-right:14px;    
}

#content .column_fourth, #footer .column_fourth
{
    position:relative;
    width: 228px;
    padding-right:17px;
    z-index:20;  
}

#header .column_half_right
{
    text-align:right;
}

#floating_column_content
{
    position:absolute;
    right:0;
    top:-55px;
    padding:24px 0 0 18px;
    z-index:20;  
}

/* utilities */
.column_half_left
{
    float: left;
    width: 49.1%;
}

.column_half_right
{
    float: right;
    width: 49.1%;
}

.column_two_thirds
{
    float:left;
    width:65.1%;
}

.column_one_third
{
    float:right;
    width:31.7%;
}

.column_third
{
    float: left;
    width: 32.1%;
}

.column_fourth
{
    float: left;
    width: 25%;
}

.column_last
{
    padding-right: 0 !important;
}

/*--------------------------------------------------=> MASTER LAYOUT */
#page
{    
    width: 963px;   
    padding-left:20px;    
}

#header
{
    height: 76px;
    width: 100%;
    padding:13px 0;
}

#banner
{
    margin-bottom:20px;
}

#content
{    
    position:relative;
    width: 100%;
    padding-bottom:20px;        
}

#footer
{
    width: 980px; 
    background-repeat: repeat-x;
    background-position: top left;
    padding-left:20px;        
}

#footer .content_holder
{
    padding:20px 17px 10px 0;
}

/*--------------------------------------------------=> NAVIGATION */
/* Support navigation */
#utility_nav
{
    float: right;
    margin-bottom:15px;
}

#utility_nav li
{
    float: left;    
    background-repeat: no-repeat;
    background-position: right 5px;
    margin-right: 10px;
    padding-right: 10px;
}

#utility_nav li.last
{
    padding-right:0;
    margin-right:0;
}

/* Breadcrumb */
#breadcrumb
{
    float: left;
    margin: 5px 50px 0 0;
}

#breadcrumb li
{
    float: left;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-position: right 7px;
    padding-right: 17px;
}

#breadcrumb li.first, #breadcrumb li.last
{
    padding-right: 0;
}

#breadcrumb li.last
{
    margin-right: 0;
}

#breadcrumb a
{
    display: block;
    padding-bottom: 1px;
}

/* Main navigation */
#global_nav
{    
    width: 100%;
    height: 20px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    margin-bottom:10px;
}

#global_nav ul
{
    float:left;    
}

#global_nav li
{
    float:left;
    position:relative;
    overflow:visible;
    margin-right:2px;
    z-index:99;
}

#global_nav li a.main_item
{
    display: block;    
    padding:2px 5px 3px 5px;
}

.js #global_nav li a.main_item.with_subnav
{    
    background-repeat: no-repeat;
    background-position: right 12px;
	text-align:center;
}

#global_nav .subnav_container
{
    display:none;
    position:absolute;
    border-width:1px;    
    margin-top:1px; 
    z-index:99;   
    left:-5px;
}

.subnav_top
{
    height:10px;
    background-repeat:no-repeat;
    background-position:top right;  
    padding-right:10px;  
}

.subnav_top span
{
    display:block;
    height:10px;
    background-repeat:no-repeat;
    background-position:top left;    
}

.subnav_content
{
    background-repeat:repeat-y;
    background-position:top right;    
    padding-right:5px;
}

.subnav_content_inner
{
    width:100%;
    background-repeat:repeat-y;
    background-position:top left;    
}

.subnav_content .content_holder
{
    padding:5px 0px 8px 20px;
}

.subnav_content .header
{    
    border-bottom-width:3px;
    border-bottom-style:solid;
    padding:2px 0 4px 0;
}

.subnav_bottom
{
    height:14px;
    background-repeat:no-repeat;
    background-position:top right;    
    padding-right:10px;
}

.subnav_bottom span
{
    display:block;
    height:14px;
    background-repeat:no-repeat;
    background-position:top left;    
}

.column_subnav_large, .column_subnav_small
{
    float:left;
    padding-right:12px;
}

.column_subnav_large
{
    width:179px;
}

.column_subnav_small
{
    width:126px;
}

#global_nav .subnav_container ul
{
    float:none;
    background-repeat: repeat-x;
    background-position: bottom left;
}

#global_nav .subnav_container ul.bottom_margin
{
    margin-bottom:24px;
}

#global_nav .subnav_container li
{
    float:none;
    margin:0; 
    background-repeat: repeat-x;
    background-position: top left;
}

#global_nav .subnav_container li a, #global_nav .subnav_container a.subnav_image_link span
{
    display:block;
    padding:4px 5px 5px 10px;
    background-repeat: no-repeat;
    background-position: 0 8px;    
}

#global_nav .subnav_container li a
{    
    width:164px;
}

/* Footer support navigation */
#footer_nav
{
    float: left;
    margin-bottom:5px;
}

#footer_nav li
{
    float: left;    
    background-repeat: no-repeat;
    background-position: right 3px;
    margin-right: 10px;
    padding-right: 10px;
}

#footer_nav li.last
{
    padding-right:0;
    margin-right:0;
}

/*--------------------------------------------------=> UTILITY CLASSES */
.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}

.halfwidth
{
    float: left;
    width: 50%;
}

.halfwidth_right
{
    float: right;
    width: 50%;
}

.thirdwidth
{
    float: left;
    width: 33%;
    padding: 3px 0 10px 0;
}

.nodisplay
{
    display: none;
}

.nopadding_top
{
    padding-top: 0;
}

.nopadding_bottom
{
    padding-bottom: 0;
}

.nopadding_vertical
{
    padding-top: 0;
    padding-bottom: 0;
}

.clearmargin
{
    margin: 0;
    padding: 0;
}

.clearer
{
    clear: both;
    height: 0;
    padding: 0;
    margin: 0;
}

.spacer
{
    clear: both;
    height: 25px;
    padding: 0;
    margin: 0;
}