/* _________________________________________________

320 and Up boilerplate extension

Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup/
_____________________________________________________

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC 
16.TEMPLATE SPECIFICS
17.MODERNIZR

COLOURS 

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
line-height: 1.4em;
vertical-align:baseline;
color:#000;}


article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display : block; }

abbr[title] { 
border-bottom : 1px dotted; 
cursor : help; }

/* 1.ROOT */

html {
overflow-y : scroll;
background : #b398a3 url(../img/body.png) repeat 0 0; 
b*ackground : #c489a1 url(../img/body.png) repeat 0 0; }



body { 
margin : 0 auto;
padding : 1.4em;
width : 90% /* 252px */;
font : 100%/1.4 ;
background : #b398a3; 
b*ackground : #c489a1; 
color: rgb(193,193,193); }

img {max-width:300px;}

/* 2.HEADINGS */

h1, 
h2 {
font-weight : normal;
font-style : normal;
color:#fff;
font-family: "LeagueGothicRegular", "Arial Narrow", san-serif;}

h1 { 
margin-bottom : 1.4em;
font-size : 2.8em; /* 48 / 16 = 3 */
font-family: "LeagueGothicRegular", "Arial Narrow", san-serif;}

h2 { 
margin-bottom : 1.4em;
font-size : 2.8em; /* 36 / 16 = 2 */
font-family: "LeagueGothicRegular", "Arial Narrow", san-serif;}

h3 { 
margin-bottom : 1.4em;
font-size : 1.6em; /* 24 / 16 = 1.5 */
font-family: "LeagueGothicRegular", "Arial Narrow", san-serif;}

h4 { 
margin-bottom : 1.4em;
font-size : 1.4em; /* 24 / 16 = 1.5 */
font-family: Cambria, Garamond, Caslon, Georgia, serif;
font-weight: bold;
font-stretch:expanded;
color: #ffffff;}

/* 3.TYPOGRAPHY */

p, 
ol, 
ul,  
small {  
margin-bottom : 1.4em; 
font-size : 1em; /* 14 / 16 = .875 */
font-family: Cambria, Garamond, Caslon, Georgia, serif;}

small {
display : block; }

ul , ol { 
margin : 0 0 1.4em -24px; 
padding-left : 24px; }

li {
margin-bottom : .7em;}

li p {  
font-size : 1em; /* 16 / 16 = 1 */ }

i, 
em 
{font-family: Cambria, Garamond, Caslon, Georgia, serif;
font-style: italic;}

strong {
font-family: Cambria, Garamond, Caslon, Georgia, serif; 
font-weight: bold;}

pre, 
code { 
font : .92em 'andale mono', 'lucida console', monospace; 
}

sup, 
sub { 
position : relative;
font-size : 75%; 
line-height : 0; }

sup { 
top : -.5em; }

sub { 
bottom : -.25em; }

p.caption {
max-width:292px;
margin-bottom : 2.8em; 
padding:.35em;
font-size : .8em; 
font-family:Cambria, Garamond, Caslon, Georgia, serif;
background-color:#c489a1;}

/* 4.LINKS */

a, 
a:visited {
outline : none;
color : rgb(255,255,255);
text-decoration:none;
border-bottom: dotted 1px rgb(255,255,255);
font-weight:bold;}
 
a:hover { 
outline : none;
color : rgb(8,8,8); 
border-top: dotted 1px rgb(8,8,8);
border-bottom: dotted 1px rgb(8,8,8); }
 
a:active, 
a:focus { 
position : relative; 
top : 1px; 
outline : none;
color : rgb(8,8,8); }

/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS (See css/mylibs/forms.css) */

/* 8.BANNER */

header[role="banner"] {
margin-bottom : 1.4em;
padding-top :  12.6em;
background : transparent url(../img/banner-160.png) no-repeat 50% 0;
border-bottom : 10px solid rgb(39,39,39); }

header[role="banner"] hgroup {
text-align : center; }

header[role="banner"] h1 {
margin-top : -.7em;
margin-bottom : 1.4em;
font-family: "LeagueGothicRegular", "Arial Narrow", san-serif;
font-size : 2.8em; /* 24 / 16 = 1.5 */
 }

/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */

/* 12.COMPLIMENTARY */

*[role="complementary"] ul {
list-style-type : none; }

*[role="complementary"] ol {
list-style-type : none;
margin-bottom : 2.8em;
margin-left : 0; 
padding : 2.8em 1.4em 1.4em 1.4em; 
line-height: 1.4em;
background-color : #c489a1; 
border-bottom : 1px solid rgb(32,32,32); }

*[role="complementary"] ol h3 {
margin-bottom : 0; }

*[role="complementary"] ol li:last-child p {
margin-bottom : 0; }

*[role="complementary"] .dl p {
margin : 0; }

/* 13.CONTENTINFO */

footer[role="contentinfo"] {
padding-top : 1.4em; 
border-top : 10px solid rgb(39,39,39); }

footer[role="contentinfo"] ul {
list-style-type : none; 
}

footer[role="contentinfo"] li {
line-height: 1.4em;
}

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom : 1; }

.clearfix:before, 
.clearfix:after { 
content : "\0020"; 
display : block; 
height : 0; 
overflow : hidden; }

.clearfix:after { 
clear : both; }

/* 15.VENDOR-SPECIFIC */

body {
-webkit-text-size-adjust : 100%; 
-ms-text-size-adjust : 100%; }

a:link { 
-webkit-tap-highlight-color : rgb(52,52,52); }

::-webkit-selection { 
background : rgb(39,39,39); 
color : rgb(250,250,250); 
text-shadow : none; }

::-moz-selection { 
background : rgb(39,39,39); 
color : rgb(250,250,250); 
text-shadow : none; }

::selection { 
background : rgb(39,39,39); 
color : rgb(250,250,250); 
text-shadow : none; }

::-webkit-input-placeholder {
padding : 10px;
font-size : .875em; 
 }

input:-moz-placeholder { 
padding : 10px;
font-size : .875em; 
}

.ie7 img,
.iem7 img { 
-ms-interpolation-mode : bicubic; }

div,
input,
textarea  { 
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }

/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

/* csstransitions */ 

.csstransitions a { 
-webkit-transition : all .1s linear;
-moz-transition : all .1s linear;
-o-transition : all .1s linear;
transition : all .1s linear; }
/* No alternative */

.multiplebgs {
background-image :  
url(../img/shadow.png), url(../img/body.png); 
background-repeat : repeat-x, repeat;
background-position : 0 0, 0 0; }

@media print {
* { 
background : transparent !important; 
color : black !important; 
text-shadow : none !important; 
filter : none !important;
-ms-filter : none !important; } 

a, a:visited { 
color : #444 !important; 
text-decoration : underline; }

a[href]:after { 
content : " (" attr(href) ")"; }

abbr[title]:after { 
content : " (" attr(title) ")"; }

a[href^="javascript:"]:after, 
a[href^="#"]:after { 
content : ""; }
  
pre, blockquote { 
border : 1px solid #c489a1; 
page-break-inside : avoid; }

thead { 
display : table-header-group; }

tr, img { 
page-break-inside : avoid; }

@page { 
margin : .5cm; }

p, h2, h3 { 
orphans : 3; 
widows : 3; }

h2, h3 { 
page-break-after : avoid; }
}/*/mediaquery*/

/* MEDIA QUERIES */

/*480px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 480px) {

/* 1.ROOT */

body { 
width : 80% /* 436px */; }

img {max-width:360px;}

/* 2.HEADINGS */
/* 3.TYPOGRAPHY */

p.caption {
max-width:354px;}

/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */

/* 8.BANNER */

header[role="banner"] {
padding-top : 0;
background-image : none; }

header[role="banner"] hgroup {
text-align : left; }

header[role="banner"] h1 {
padding-left : 100px;
min-height : 100px;
background : transparent url(../img/banner-80.png) no-repeat 0 50%; 
 }

/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

}/*/mediaquery*/

/*768px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 768px) {

/* 1.ROOT */

body { 
width : 80% /* 712px */; }

img {max-width:600px;}

/* 2.HEADINGS */
/* 3.TYPOGRAPHY */

p.caption {
max-width:592px;}

/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */

.content {
margin-bottom : 1.4em; }

/* 11.MAIN */

/* 12.COMPLIMENTARY */

/* 13.CONTENTINFO */

footer[role="contentinfo"] {
padding-bottom : 1.4em;}

footer[role="contentinfo"] .vcard {
float : left;
width : 48.31%; /* 344 / 712 = .4831 */
margin-right : 3.37%; /* 24 / 712 = .0337 */ 
margin-bottom : 0;
padding-bottom : 0;
border-bottom-width : 0; }

footer[role="contentinfo"] small {
float : right;
width : 48.31%; /* 344 / 712 = .4831 */
margin-right : 0; }

/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

/*992px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 992px) {

/* 1.ROOT */

body { 
width : 80% /* 896px */;
max-width : 896px; }

img {max-width:400px;}

/* 2.HEADINGS */
/* 3.TYPOGRAPHY */

p.caption {
max-width:392px;}

/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */

/* 8.BANNER */

header[role="banner"] {
padding-right : 300px;
background : transparent url(../img/header.png) no-repeat 100% 100%; }

header[role="banner"] p {
font-size : 1.125em; /* 18 / 16 = 1.125 */ }

/* 9.NAVIGATION */

/* 10.CONTENT */

/* 11.MAIN */

h2 {
margin-bottom: .8em;}
	
*[role="main"] {
float : left;
width : 58.92%; /* 528 / 896 = .5892*/ 
margin-bottom : 0;
border-bottom-width : 0; }

/* 12.COMPLIMENTARY */

*[role="complementary"] {
float : right;
clear: right;
c*lear: none;
width : 30%; 
overflow : hidden; 
padding:1.4em;
background-color : #c489a1; 
}


*[role="complementary"] ol {
padding : 1.8em; 
line-height: 1.8em;
}

/* 13.CONTENTINFO */

footer[role="contentinfo"] .vcard {
width : 58.92%; /* 528 / 896 = .5892*/ 
margin-top:.7em;
margin-right : 0; 
}

footer[role="contentinfo"] small {
width : 38.39%; /* 344 / 896 = .3839*/ }

/* 14.GLOBAL OBJECTS */

/* 15.VENDOR-SPECIFIC */

.ie7 *[role="complementary"] li.dl, 
.ie8 *[role="complementary"] li.dl {
padding-left : 0; 
background-image : none; }

/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

}/*/mediaquery*/

/*1382px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 1382px) {

/* 1.ROOT */

body { 
width : 90% /* 1356px */;
max-width : 1356px; }

img {max-width:450px;}

/* 2.HEADINGS */
/* 3.TYPOGRAPHY */

p.caption {
max-width:442px;}

/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */

header[role="banner"] {
float : left;
width : 18.58%; /* 252 / 1356 = .1858 */
margin-right : 1.76%; /* 24 / 1356 = .0176*/ 
padding-right : 2%; 
padding-top :  12.6em;
background : transparent url(../img/banner-160.png) no-repeat 50% 0;
border-bottom-width : 0; }

header[role="banner"] h1 { 
padding-left : 0;
min-height : 0;
margin-top: -.7em;
font-size : 2.8em; /* 36 / 16 = 2 */
background-image : none; }

/* 9.NAVIGATION */

/* 10.CONTENT */

.content {
float : left;
width : 59.29%;  /* 804 / 1356 = .5929 */
margin-right : 1.76%; /* 24 / 1356 = .0176 */
margin-bottom : 1.4em; 
padding-top : 1.4em; }

/* 11.MAIN */

.content h2 {
margin: 0 0 2.8em 0;}
	
*[role="main"] {
width : 65.67%;  /* 528 / 804 = .6567 */ }

/* 12.COMPLIMENTARY */

*[role="complementary"] {
width : 31.34%; /* 252 / 804 = .31.34 */ 

background-color : #c489a1; 
line-height: 1.4em;
}


/* 13.CONTENTINFO */

footer[role="contentinfo"] {
float : right;
width : 18.58%; /* 252 / 1356 = .1858 */ 
padding-left : 2%; 
border-top-width : 0; 
margin-top: 1.6em;
}

footer[role="contentinfo"] .vcard,
footer[role="contentinfo"] small {
float : none;
width : 100%; 
margin-right : 0; }

/* 14.GLOBAL OBJECTS */

/* 15.VENDOR-SPECIFIC */

header[role="banner"],
footer[role="contentinfo"] {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }

/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

}/*/mediaquery*/

/*2x __________________________________________________________________________________________________________ */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/