/* _________________________________________________

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;
vertical-align : baseline; }

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 : rgb(45,53,62) url(../img/body.png) repeat 0 0; }

body { 
margin : 0 auto;
padding : 12px 0;
width : 95% /* 252px */;
font : 100%/1.4 "facitweb-1","facitweb-2", sans-serif;
background : transparent; 
color : rgb(193,197,202); }

/* 2.HEADINGS */

h1{
color: #FFFFFF;
font-weight : 800;
font-style : normal;
margin-bottom : .75em;
font-size : 3em; /* 48 / 16 = 3 */
line-height : 1.2; }

h2 {  
color: #FFFFFF;
margin-bottom : .25em;
font-weight: 600;
font-style: normal;
font-size : 1.1em; /* 36 / 16 = 2 */
line-height : 1;}

h3 { 
margin-bottom : 1em;
font-size : 1.5em; /* 24 / 16 = 1.5 */
line-height : 1.3; }

h4{color: #FFFFFF;
font-weight : 800;
font-style : normal;
margin-bottom : .75em;
font-size : 2em; /* 48 / 16 = 3 */
line-height : 1.5; }

#navbar {
	font-size: 120%;
	line-height:140%;
	padding-bottom: 0.6em;
	font-weight: bold;
	color: #FFFFFF;
	/*border-bottom: medium double #ffffff;*/
}

*[role="navbar"] {
}

ul {
    margin: 0.3em;
    margin-bottom: -0.6em;
    list-style: disc;
    list-style-position: inside;
}
li {
  color: white; /* bullet color */
  font-size: 0.3em;
  line-height:.4em;
  display: inline;
  padding-right: 1em;
  padding-left: 0;
}
li span {
  color: rgb(193,197,202); /* text color */
  font-size: 0.30em;
}

#navbar a {
color : #FFFFFF;
}

/* 3.TYPOGRAPHY */

p, 
ol, 
ul,  
small { 
margin-bottom : 1.5em; 
font-size : .875em; /* 14 / 16 = .875 */ }

small {
display : block; }

ul, 
ol { 
list-style-type : none;
margin : 0 0 1.5em -24px; 
padding-left : 24px; }

li {
margin-bottom : .75em; }

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

i, 
em { 
font-style : italic; }

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

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

sup { 
top : -.5em; }

sub { 
bottom : -.25em; }

/* 4.LINKS */

a, 
a:visited {
outline : none;
color : #FFFFFF;
text-decoration : underline; }
 
a:hover { 
outline : none;
color : rgb(255,255,255); 
text-decoration : underline; }
 
a:active, 
a:focus { 
position : relative; 
top : 1px; 
outline : none;
color : rgb(255,255,255); }

a[href="#ihatetimevandamme"] {
text-decoration : none; }

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

/* 8.BANNER */

header[role="banner"] {
float : left;
width : 310px;
margin-right : 1%; /* 24 / 1356 = .0176*/ 
padding-right : 1%; 
padding-top : 5px;
//background : transparent url(../img/me.jpg) no-repeat 50% 0;
border-bottom : 6px solid rgb(39,46,54); }

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

header[role="banner"] p {
font-size : .875em; /* 14 / 16 = .875 */ }

/* 9.NAVIGATION */
navbar{
margin-bottom : 1em;
font-size : 1.3em; /* 24 / 16 = 1.5 */
line-height : 1.3;
}

/* 10.CONTENT */

.content {
float : left;
width : 100%;  /* 804 / 1356 = .5929 */
margin-right : 1%; /* 24 / 1356 = .0176 */
margin-bottom : 1.5em;}

/* 11.MAIN */

/* 12.COMPLIMENTARY */

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

*[role="complementary"] ol {
list-style-type : none;
margin-bottom : 3em;
margin-left : 0; 
padding : 12px; 
background-color : rgb(39,46,54); 
}

*[role="complementary"] ol h3 {
font-size : 1em;
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.5em; }

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

footer[role="contentinfo"] li:nth-of-type(2) {
margin-bottom : 1em; }

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom : 1; }

.clearfix:before, 
.clearfix:after { <br>margin-top: 20px
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,158,219); }

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

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

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

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

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

.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 #999; 
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 */

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

/* 1.ROOT */

body { 
margin : 0 auto;
width : 95% /* 1356px */;
max-width : 1200px; }

/* 8.BANNER */

header[role="banner"] {
float : left;
width : 310px;
margin-right : 1%; /* 24 / 1356 = .0176*/ 
padding-right : 1%; 
padding-top : 16px;
//background : transparent url(../img/me.jpg) no-repeat 50% 0;
border-bottom-width : 0; }

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

header[role="banner"] p {
font-size : .875em; /* 14 / 16 = .875 */ }

/* 10.CONTENT */

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

/* 11.MAIN */

*[role="main"] {
width : 100%;  /* 528 / 804 = .6567 */ }

ul {
    margin: 0.3em;
    margin-bottom: -0.6em;
    padding: 1em 1em;
    list-style: disc;
list-style-position: inside;
}
li {
  color: white; /* bullet color */
  font-size: .5em;
  line-height:.4em;
}
li span {
  color: rgb(193,197,202); /* text color */
  font-size: 0.70em;
}

/* 12.COMPLIMENTARY */

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

/* 13.CONTENTINFO */

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

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 */

.borderradius *[role="complementary"] ol {
-webkit-border-radius : 12px;
-moz-border-radius : 12px;
border-radius : 12px; 
border-bottom-width : 0; }

.borderradius *[role="complementary"] li.dl {
-webkit-border-radius : 12px;
-moz-border-radius : 12px;
border-radius : 12px; }

}/*/mediaquery*/

/* Textbox with background */
.box {
	background: #e3e8e4;
	overflow: hidden;
	font-size : .875em;
	color : #b32d00;
	padding: 2px;
	font-weight: bold;
}

.box a,
.box a:visited {
	outline : none;
	color : #000000;
	text-decoration : underline; 
}

.box a:hover {
	outline : none;
	color : #000000;
	text-decoration : underline; 
}

.box a:active,
.box a:focus {
	position : relative;
	top : 1px;
	outline : none;
	color : #000000; 
}