/************************************************************
Screen style sheet for the W3C mobileOK Checker.

This style sheet extends the minimal style sheet of the
Checker to add grid, columns, logos, and margins properties.
************************************************************
$Id: mobileok.css,v 1.7 2010/03/18 16:52:13 fd Exp $
************************************************************/


/************************************************************
Left and right columns.

They are used in the header and footer.
These properties turn them into real left and right columns
(default styles display them as blocks)
************************************************************/
.leftCol {
 float:left;
 width:250px;
 _margin-right: -3px;
}

.rightCol {
 float:right;
 width: 300px;
 _margin-left: -3px;
}


/************************************************************
Grids.

Default properties render everything in a vertical layout.
These properties add grid layout for larger screens.

Based on OOCSS by Nicole Sullivan:
 http://wiki.github.com/stubbornella/oocss
************************************************************/
.line:after,
.lastUnit:after {
 content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
 visibility: hidden;
 clear: both;
 height: 0 !important;
 display: block;
 line-height: 0;
 font-size: xx-large;
 overflow: hidden;
}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {
 display: table-cell;
 *display:block;
 *zoom:1;
 float:none;
 _position:relative;
 _left:-3px;
 _margin-right: -3px;
 width: auto;
}


/* Further grid layouts */
.min1of10 { width: 10%; }
.min5of10 { width: 50%; }
.min6of10 { width: 60%; }
.min7of10 { width: 70%; }
.min8of10 { width: 80%; }
.lastUnit { width: auto; }

/* Specific column with a maximum width */
.max350 {
 max-width: 350px;
 margin-left: auto;
 margin-right: auto;
}


/************************************************************
Global page style.

These properties impose a minimum width on larger screens
(grids would appear broken otherwise), and increase page
margins.
************************************************************/
.page {
 margin: 1.5em 2em;
 min-width: 40em; /* for the tabs, mostly */
}


/************************************************************
Make sure that advanced inline content gets displayed
(overrides default setting).
************************************************************/
.advin {
 display: inline;
}


/************************************************************
Index page's forms
************************************************************/
.submitLine {
 padding: 1em;
 padding-bottom: 0;
}
		
.submitSpan {
 width: 15em;
 padding-left: 1.2em;
 text-decoration: none;
}

.submitSpan input {
 padding: .6em 5.2em;
}


/************************************************************
Header logos.

Default rendering displays a short text.
These properties convert the text into real logos for devices
that are not limited in terms of network bandwidth and screen
size.
************************************************************/
.head {
 background: #365D95 url("images/head-tl.png") top left no-repeat;
 margin-bottom: 1.5em;
}

.head .body {
 background: transparent url("images/head-tr.png") top right no-repeat;
}


.w3cLogo {
 display: block;
 width: 120px;
}

.w3c {
 display: block;
 width: 99px;
 height: 50px;
 background: #365D95 url("images/w3c.png") top left no-repeat;
 margin-top: 10px;
 margin-left: 10px;
}

.w3c * {
 display: none;
}

.mwiLogo {
 display: block;
 width: 70px;
}

.mwi {
 display: block;
 width: 56px;
 height: 61px;
 margin-top: 5px;
 background: #365D95 url("images/mwi-phone.png") top left no-repeat;
}

.mwi * {
 display: none;
}

.title {
 padding-top: 11px;
}


/************************************************************
Footer logos.

Default rendering displays a short text.
These properties convert the text into real logos for devices
that are not limited in terms of network bandwidth and screen
size.
************************************************************/
.w3cLargeLogo {
 display: block;
 width: 290px;
}

.w3cLarge {
 float: left;
 display: block;
 width: 242px;
 height: 63px;
 background: transparent url("images/W3C-MWI.png") top left no-repeat;
}

.fp7 {
 display: block;
 margin-left: 245px;
 width: 40px;
 height: 63px;
 background: transparent url("images/EU-MobiWeb-sm.png") top left no-repeat;
}

.supportLogo {
 display: block;
 width: 101px;
}

.iheartval {
 display: block;
 width: 101px;
 height: 46px;
 background: transparent url("images/I_heart_validator_lg.png") top left no-repeat;
}

.w3cLarge *,
.fp7 *,
.iheartval * {
 display: none;
}

.foot .main {
 display: table-cell;
}



/************************************************************
Generic bar.

Makes items float so that they appear on the same line when
the screen is large enough.
************************************************************/
.bar .item {
 float: left;
}


/************************************************************
Tabulation bar
************************************************************/
.tabBar {
 margin-bottom: 0;
 padding: 0;
 background-color: inherit;
}

.tabBar .item {
 margin: 0 0.245em 0 0;
 background: #DADDE3 url("images/tab-tl.png") no-repeat top left;
 border-bottom: 1px solid #CBD0DB;
 font-weight: bold;
}

.tabBar .item :link,
.tabBar .item :visited {
 padding: 0.515em 1.3em 0.215em 0.8em;
 background: #DADDE3 url("images/tab-tr.png") no-repeat top right;
 display: block;
 margin-left: 0.5em;
}

.tabBar .item.selected {
 background: #EAEBEE url("images/round-tl.png") no-repeat top left;
 border-bottom: 1px solid #EAEBEE;
}

.tabBar .item.selected :link,
.tabBar .item.selected :visited {
 background: #EAEBEE url("images/round-tr.png") no-repeat top right;
}

/* Tabulations body should have the same color as tabs */
.tabBody {
 background-color: #EAEBEE;
 padding: 0.5em 1.3em; 
}


/************************************************************
Navigation bar.


************************************************************/
.navBar .inner {
 float: right;
}

.navBar .item {
 float: left;
 margin-right: 0.2em;
 margin-top: inherit;
 margin-bottom: inherit;
}

.navBar .item:before {
 content: "| ";
}


/************************************************************
Section specific rules.

These properties extend default rules to add more positioning
rules on large screen sizes.
************************************************************/
/** Special rules: in section headers, move value to the right and remove ':'. */
.section span {
 display: none;
}

.section strong {
 float: right;
}

/** Failure/Warning message section header. */
.msg {
 padding: 0.5em 0 0.5em 1em;
}

/** Explanation sections (why? where? how?) */
.explain {
 padding-left: 2em;
}

.explanation {
 padding-left: 3em;
 padding-bottom: 0.5em;
}

.resultScore {
 padding: 0.5em 2em;
}


.bp {
 font-size: 0.8em;
}


/************************************************************
Score section.

The mobileOK score is rendered as text by default.
These properties add a more visual mobileOK scale.
Note that support for PNG (basic) transparency is needed.
************************************************************/
.mobileSevere {
 display: block;
 background: transparent url("images/mobile-severe.png") no-repeat scroll left top;
 height: 55px;
}

.mobileLow {
 display: block;
 background: transparent url("images/mobile-low.png") no-repeat scroll center top;
 height: 55px;
}

.mobileOK {
 background: transparent url("images/mobile-ok.png") no-repeat scroll right top;
 height: 55px;
}

.scorebg {
 margin: 0 22px;
}

.scorefg {
 position: relative;
 top: -38px;
 margin-right: 50px;
}

.percent0 {
 background: #cd091c url("images/percent0.png") repeat-x scroll left top;
 height: 32px;
 display: block;
}

.percent20 {
 background: #e48507 url("images/percent20.png") repeat-x scroll left top;
 height: 32px;
 display: block;
}

.percent40 {
 background: #949519 url("images/percent40.png") repeat-x scroll left top;
 height: 32px;
 display: block;
}

.percent60 {
 background: #5e9f25 url("images/percent60.png") repeat-x scroll left top;
 height: 32px;
 display: block;
}

.percent80 {
 background: #40a52b url("images/percent80.png") repeat-x scroll left top;
 height: 32px;
}

.score {
 background: transparent url("images/score-pin.png") no-repeat scroll left top;
 padding-top: 45px;
 width: 50px;
 margin-bottom: 0;
 font-size: 2em;
}

.score span {
 display: none;
}

.wow {
 text-align: center;
}

.p0 { margin-left: 0; }
.p5 { margin-left: 5%; }
.p10 { margin-left: 10%; }
.p15 { margin-left: 15%; }
.p20 { margin-left: 20%; }
.p25 { margin-left: 25%; }
.p30 { margin-left: 30%; }
.p35 { margin-left: 35%; }
.p40 { margin-left: 40%; }
.p45 { margin-left: 45%; }
.p50 { margin-left: 50%; }
.p55 { margin-left: 55%; }
.p60 { margin-left: 60%; }
.p65 { margin-left: 65%; }
.p70 { margin-left: 70%; }
.p75 { margin-left: 75%; }
.p80 { margin-left: 80%; }
.p85 { margin-left: 85%; }
.p90 { margin-left: 90%; }
.p95 { margin-left: 95%; }
.p100 { margin-left: 100%; }



/************************************************************
Module headers.

Fine-tuning.
************************************************************/
.adhd {
 text-transform: uppercase;
}

.adbd {
 margin: 0.5em;
}


/************************************************************
Results page: source code display
************************************************************/
.source ol {
 padding-left: 2em;
}


/************************************************************
Javascript-enabled rules.
************************************************************/
.js .expand_menu {
 display: block;
 font-size: small;
 text-align: right;
 cursor: pointer;
 padding-bottom: 0.5em;
}


/************************************************************
Donation section.

Display the sponsor's logo when screen is large enough.
************************************************************/
#don_program #don_program_img {
 display: inherit;
 float: left;
 height: 60px;
 width: 150px;
}


/************************************************************
Documentation pages, more margins
************************************************************/
.compact {
 margin-left: 1.5em;
 margin-right: 1.5em;
}

.toc {
 margin-left: 3em;
}