/*

Stuff and Nonsense Ltd.
The Cow Shed Studio,
Gwaenysgor,
Flintshire, North Wales
LL18 6EP, UK
+44 1745 851848
http://stuffandnonsense.co.uk
http://forabeautifulweb.com
http://transcendingcss.com
http://twitter.com/malarkey

SCREEN.CSS 

*/

/* BODY ------------------------------------------------------------------ */

body { 
background-color : rgb(240,240,240); 
font : 100%/1.4 Georgia, Times, serif;
color : rgb(50,50,50);
text-shadow : 0 1px 0 rgb(255,255,255); }


/* HEADINGS -------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
font-weight : normal; 
color : rgb(68,68,68); }

h1, h2 {
margin-bottom : .5em; 
font-size : 2em; /* 32 / 16 = 2 */ 
line-height : 1.1; 
letter-spacing : -1px; }

h3, h4 {
margin-bottom : .75em; 
font-size : 1.3em; /* 26 / 16 = 1.62 */ 
line-height : 1.2; }

h4 {
margin-bottom : .75em; 
font-size : 1.1em;  
line-height : 1.2; }

hgroup h1 {
margin-bottom : -.5em; }

hgroup h2 {
margin-bottom : 1.25em;
font-size : 1.3em; }


/* TYPOGRAPHY ----------------------------------------------------------- */

p, ul, ol, dl, table, div.vcard, time {
font-size : .81em; /* 13 / 16 = .81 */ }

ul p, ol p,
ul time, ol time, p time, td time {
font-size : 1em; }

p { 
margin-bottom : 1.5em; }

blockquote {
font-style : normal; }

li ul, li ol {
margin-bottom : 1.5em; }

ul, ol {
margin-bottom : 1.5em; }

ul { 
list-style-type : disc; }

ol { 
list-style-type : decimal; }

strong {
font-weight : bold; }

em, dfn {
font-style : italic; }


/* LINKS ------------------------------------------------------------------ */

a, a:visited {
outline : none;
color : rgb(149,54,68);
font-weight : bold;
text-decoration : none; }
 
a:hover { 
color : rgb(112,0,0); 
text-decoration : none; }
 
a:active, a:focus { 
position : relative; 
top : 1px; 
color : rgb(112,0,0); }

h3 a, h4 a {
font-weight : normal; }

/* IMAGES AND VIDEOS ----------------------------------------------------- */

.img {
margin-bottom : 1.5em;
padding : 10px;
background-color : rgb(255,255,255); 
border : 1px solid rgb(221,221,221); }

.img img {
max-width : 100%; }


/* LAYOUT -------------------------------------------------------------- */

article, aside, dialog, figure, footer, header, hgroup, nav, section {
display : block; }

#page, .container { 
width : 100%; }

.content { 
position : relative;
width : 80%; /* 940px */
min-width : 640px;
max-width : 1200px; 
margin : 0 auto 1.5em auto; }

.content:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }

section.content-main { 
float : left; 
width : 57%; /* 540 / 940 = .57 */ }

section.content-sub { 
float : right; 
width : 38%; /* 340 / 940 = .36 */  }


/* GLOBAL ELEMENTS --------------------------------------------------- */

.group:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }

/* Boxes */

.box {
margin-bottom : 1.5em;
padding : 15px; 
background-color : rgb(230,230,230);
border : 1px solid rgb(221,221,221); }

/* MEDIA QUIERIES --------------------------------------------------------- */

.content-main {
line-height : 1.8; }

.content-sub {
line-height : 1.6; }

@media all and (max-width : 1000px) {
.content-main {
line-height : 1.6; }

.content-sub {
line-height : 1.5; }
}

@media all and (max-width : 900px) {
.content-main {
line-height : 1.5; }

.content-sub {
line-height : 1.4; }
}


@media all and (max-width : 800px) {
.content-main {
line-height : 1.4; }

.content-sub {
line-height : 1.3; }
}

/* borderradius */

.box { 
-moz-border-radius : 10px; 
-webkit-border-radius : 10px; 
border-radius : 10px; }
/* No alternative required */

/* csstransitions */

.csstransitions a {
-webkit-transition : color .2s linear;
-moz-transition : color .2s linear;
-o-transition : color .2s linear;
transition : color .2s linear; }
/* No alternative required */

/* rgba */

.rgba .box {
background-color : rgba(0,0,0,.05); }
/* Fallback in declaration above */