/* ========================== */
/* ==== O2 Main CSS File ==== */
/* ========================== */

/* ========================== Imports */

@import url(reset.css);
@import url(fonts.css);

@import url(navigation.css);
@import url(content_general.css);
@import url(content_contextual.css);
@import url(content_tabs.css);
@import url(popular_recent_widget.css);
@import url(search.css);


/*
@import url(content_hub.css);
@import url(sign_in.css);
@import url(select_table.css);
@import url(terms.css);
@import url(bluebook.css);
@import url(iphone.css);
@import url(myo2.css);
@import url(blueroom.css);
@import url(tariffs.css);
@import url(boltons.css);
@import url(explore_hub.css);
*/
/* ========================== Page Structure / Layout */

html {background:url(images/bggrad.jpg) top left repeat-x;}
body {background: url(images/bggrad_bottom.png) bottom left repeat-x; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:80%;}
br, .clr {clear:both;}
strong {font-weight: bold;}
em {font-style: italic;}

.js .hidden {display:none !important;}

a:active, 
:focus {-moz-outline-style: none; outline:none;}

.print_hide {display:none;}

#wrapper {width: 972px; margin: 0 auto; padding-bottom:85px;}
#top_banner {height: 140px; margin: 0 12px; padding: 0 8px;}
#top_banner #top_row {margin-left: 240px; height: 43px; padding-right: 0px; padding-top: 32px;}
#top_banner #bottom_row {margin-left: 232px; height: 65px;}

#page_wrap {background: white url(images/topcorners.gif) no-repeat; min-height: 486px; position: relative;}

#top_corners {height:9px; width:100%; background: transparent url(images/topcorners.gif) no-repeat; position:absolute; z-index:10;}

#foot_banner {height:52px; font-size:0.9em; padding:52px 20px; background:#FFF url(images/footer-bg.gif) 0px 52px no-repeat;}
#footer {margin:0 12px; padding:0 8px;}

/* logo */
#top_banner #logo {width: 100px; height: 140px; float: left;}
#top_banner #logo a {display:block; width:100%; height:100%; background: url(images/o2logo.gif) center 32px no-repeat;}
#top_banner #logo a span {display: none;}

/* welcome */
#top_banner #welcome {float: left; color: white;}
#top_banner #welcome span {display:block; color: #9299a1;}

/* footer */
#foot_banner ul {float:left; height: 52px; font-size:0.9em;}
/*#foot_banner li {float:left;font-size: 1.2em;padding-right:20px;}*/
#foot_banner li {float:left; font-size: 1.1em; background: url(images/footer-dots.gif) 0px 24px no-repeat; padding:0 10px 0 15px;}
#foot_banner li.l1 {background:none; padding-left:0;}

#foot_banner .last a:after {content: "";}
#foot_banner a {display:block; color: #9299a1; line-height: 52px;}

#foot_banner p {float: right; width: 222px; height: 52px;}
#foot_banner p span {display:none;}


#footer p {float: right; line-height: 28px;}
#footer p a {padding-left:8px;}

#footer #brand_tag {display: block; float:left; width: 195px; height: 28px; line-height: 28px; background: url(images/telefonica.gif) no-repeat top left;}
#footer #brand_tag span {display:none;}


/* ========================== Content Layouts */

#layout {padding: 20px 12px 60px 12px;}

#content_mast {padding: 0 8px 4px 8px; border-bottom: 1px solid #e6e6e6; height:112px;}
#breadcrumb {color:#ccc; margin-bottom:5px; font-size:0.9em;}
#content_mast h2 {font-size:300%; float:left;}

#highlights {float:right; width:308px; font-size:0.9em; color:#515559;}
#highlights strong {text-transform:uppercase; color:#000;}
#highlights ul {margin-top:3px;}
#highlights li {list-style: disc inside;}

#content_foot {margin-left:160px; font-size:1em;}

#content_foot .menu_nav {float:left; width:144px; padding:0 8px; margin:0; margin-left:80px;}
#content_foot .menu_nav ul {margin:0; padding:0;}
#content_foot .menu_nav li {line-height:1.3em; list-style:none !important;}
#content_foot .menu_nav h5 {font-size:1.1em; color:#000;}
#content_foot .menu_nav a {color:#0086c3;}

#columns {margin: 20px 0;}
#columns .portlet {position:relative;}

.three_column #columns .support_col, 
.two_column #columns .support_col, 
.two_column_alt #columns .support_col {float:left; width:212px; padding:0 8px;}

.two_column #columns .main_col {float:left; width:708px; margin-left:12px;}
.two_column_alt #columns .main_col {float:left; width:708px; margin-right:12px;}
.three_column #columns .main_col {float:left; width:468px; margin:0 12px;}

.two_column_alt #columns .main_col .support_col {position:absolute; height:100%; overflow:hidden; left:0px;}
.two_column_alt #columns .main_col .internal {width:468px; margin-left:240px;}

.two_column #columns .main_col .internal {width:468px; margin-right:240px;}

#layout.home {padding:6px;}

.home .top_line, 
.home .bottom_line {padding:6px 0;}

.home_standard .top_line {height: 312px;}
.home_takeover .top_line {height: 375px;}
.home .bottom_line {height: 168px;}

.home .double_col, 
.home .single_col, 
.home .takeover {position:relative; float:left; height:100%; margin:0 6px;}

.home .double_col {width: 468px;}
.home .single_col {width: 228px;}
.home .takeover { width: 948px;}

.home .home_promo {height:100%;}
.home .home_promo div {height:100%; overflow: hidden; padding: 10px; padding-left:116px;}
.home .home_promo div {padding-bottom:0;}

.home .home_promo h3 {text-transform:uppercase; color:#929ba0; font-weight:bold; font-size:0.9em;}
.home .home_promo h2 {color:#419eda; font-size:1.25em; margin:2px 0 9px 0; line-height:1.15em;}

.home .home_promo p {line-height:1.2em;}

.home .home_promo a.c2a {position:absolute;	bottom:8px;}

.sign_in .main_col,
.sign_in .support_col {float:left; margin-right:12px; width:548px;}

.sign_in .main_col {margin-left: 80px;}
.sign_in .support_col {width:228px; margin-top:-74px;}

/* fix layout for liferay */
.home .general .home_promo {height:168px; color:#000;}

.home .general .home_promo h3, 
.home .general .home_promo h2, 
.home .general .home_promo p {padding:0;}

.home .general .home_promo p {margin:0;}

/* ========================== Sifr Headings */

.sIFR-active h2.sifr, 
.sIFR-active h2.sifr_white, 
.sIFR-active h3.sifr_sub {visibility: hidden; font-family: Verdana; line-height: 1em; display: block;}

/* accessability rules */
.access_hide {position:absolute; top: -1000px;}