/*

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 

*/

@import url(reset.css); /* RESET CSS */

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

html {
background-color : rgb(255,255,255);
padding : 20px; }

body { 
min-width : 700px;
background : rgb(89,55,82) url(../img/body.jpg) repeat 0 0;
border : 10px solid rgb(128,79,118);
color : rgb(230,211,218);
font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

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

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; }

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

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

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

p { 
margin-bottom : 1.5em; }

p.footnote {
opacity : .5;
padding-bottom : 3em; 
font-size : .82em; }

blockquote {
margin-left : -25px;
padding-left : 25px;
border-left : 1px solid rgb(133,82,122); 
font-style : normal; }

aside blockquote {
margin-left : 0;
padding-left : 0;
border-left-width : 0; }

.vcard li:first-child {
margin-left : -17px; }

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 {
font-style : italic; }

abbr, acronym {
border-bottom-width : 0; }

address {
font-style : normal; }

sup {
position : relative;
top : -5px;
font-size : .72em; }

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

a, a:visited {
outline : none;
color : rgb(255,255,255);
font-weight : bold;
text-decoration : none; }
 
a:hover { 
color : rgb(255,255,255); 
text-decoration : underline; }
 
a:active, a:focus { 
color : rgb(255,255,255); }

header a:hover {
text-decoration : none; }

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

.img img,
.img object,
.img embed {
width : 100%;
max-width : 100%; }

figure img,
figure object,
figure embed {
width : 100%;
max-width : 100%; }

.content-main .img {
margin-bottom : 1.5em; 
padding : 10px;	
border : 1px solid rgb(133,82,122);
line-height : 1; }

.content-main figure {
margin-bottom : 1.5em; 
padding : 10px;	
border : 1px solid rgb(133,82,122);
line-height : 1; }

figcaption {
padding-top : 1em; 
font-size : .92em; }

/* Forms -------------------------------------------------------------- */

form,
fieldset { 
margin-bottom : 1.5em; }

label { 
font-weight : normal; }

input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="url"],
textarea { 
outline : none;
margin : .5em 0; 
padding : 5px; 
width : 100%;
background-color : transparent;
border : 1px solid rgb(133,82,122);
font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size : inherit;
color : rgb(230,211,218); }

p.captcha {
overflow : hidden; }

p.captcha label {
clear : both; 
width : 100%; }

p.captcha input {
float : left; 
width : 50%; }

p.captcha img {
position : relative;
top : 8px;
float : right; }

textarea {  
width : 100%;
height : 120px; }

button {
float : right;
background-color : transparent;
border : none;
outline : none; 
cursor : pointer; }

form ul {
list-style-type : none; 
float : left; }

/* Tables -------------------------------------------------------------- */

table {
clear : left;
margin-bottom : 1.4em;
width : 100%; 
font-size : .81em; }

th, td { 
padding : 4px 10px 4px 0;
vertical-align : middle; }

th { 
font-weight : bold; }

th,
td {
border-bottom : 1px solid rgb(133,82,122); }

tr:last-child th,
tr:last-child td {
border-bottom-width : 0; }

tr.route th {
padding : 8px 0 8px 40px;
background : transparent url(../img/sprites.png) no-repeat 0 -225px; } 

tr.miles th {
padding : 8px 0 8px 40px;
background : transparent url(../img/sprites.png) no-repeat 0 -351px; } 

tr.cones th {
padding : 8px 0 8px 40px; } 

tr.campground th {
padding : 8px 0 8px 40px; } 

tr.tune th {
padding : 8px 0 8px 40px;
background : transparent url(../img/sprites.png) no-repeat 0 -266px; } 

tr.sightings th {
padding : 8px 0 8px 40px;
background : transparent url(../img/sprites.png) no-repeat 0 -308px; } 

td span {
opacity : .5; }

.content-sub th, .content-sub td { 
vertical-align : top; }

.content-sub td { 
min-width : 60%; }

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

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

header[role="banner"] { 
position : relative;
width : 90%; /* 950 */
height : 220px; 
min-width : 650px;
max-width : 940px; 
margin : 0 auto 3em auto; }

.content { 
position : relative;
width : 90%; /* 950 */
min-width : 650px;
max-width : 940px; 
margin : 0 auto 2em auto; 
padding : 0 5% 1.5em 5%;
background : transparent url(../img/fleurons.png) repeat-x 0 100%; }

.content-main { 
float : right; 
width : 57%; /* 550 / 950 = .57 */ }

.content-sub { 
float : left; 
width : 33%; /* 300 / 950 = .31 */ }

.sightings { 
position : relative;
width : 90%; /* 950 */
min-width : 650px;
max-width : 940px; 
margin : 0 auto;
padding : 0 5%; }

footer[role="contentinfo"] {
position : relative;
width : 90%; /* 950 */
height : 240px; 
min-width : 650px;
max-width : 940px; 
margin : 0 auto;
padding : 0 5%; }

/* BANNER -------------------------------------------------------------- */

header[role="banner"] h1 { 
position : absolute;
top : -25px;
left : 50%;
margin : 0 0 0 -127px;
width : 256px;
height : 254px;
background : transparent url(../img/logo.png) no-repeat 0 0;
text-indent : -9999px; }

header[role="banner"] h1 a {
display : block;
height : 254px; }

/* NAVIGATION -------------------------------------------------------------- */

nav[role="navigation"] {
list-style-type : none; 
padding : 1em 5%;
background : transparent url(../img/fleurons.png) repeat-x 50% 100%; }

nav[role="navigation"] .nav-main {
list-style-type : none;
float : left; }

nav[role="navigation"] .nav-sub {
list-style-type : none;
float : right; }

nav[role="navigation"] .nav-main li,
nav[role="navigation"] .nav-sub li {
float : left;
margin-right : 25px; }

nav[role="navigation"] .nav-main li:last-child,
nav[role="navigation"] .nav-sub li:last-child {
margin-right : 0; }

nav[role="navigation"] .map a,
nav[role="navigation"] .back a,
nav[role="navigation"] .twitter a {
opacity : .5;
float : left;
display : block;
background-color : transparent;
background-image : url(../img/sprites.png);
background-repeat : no-repeat;
text-indent : -9999px; }

nav[role="navigation"] .map a {
width : 45px;
height : 40px; 
background-position : 0 0; }

nav[role="navigation"] .back a {
position : relative;
top : 5px;
width : 65px;
height : 40px;
background-position : 0 -50px; }

nav[role="navigation"] .twitter a {
width : 41px;
height : 40px; 
background-position : 0 -90px; }

nav[role="navigation"] .map a:hover,
nav[role="navigation"] .back a:hover,
nav[role="navigation"] .twitter a:hover {
opacity : 1; }

/* States */

.nav-states {
width : 90%; /* 950 */
min-width : 650px;
max-width : 940px; 
margin : 0 auto 3em auto;
padding : 0 50px 1.5em 50px; 
background : transparent url(../img/fleurons.png) repeat-x 0 100%; }

.nav-states ol {
list-style-type : none; 
width : 640px; 
margin : 0 auto; }

.nav-states ol li {
opacity : .9;
float : left; 
width : 200px; 
height : 200px; 
margin : 0 20px 2.5em 0; 
text-indent: -9999px; }

.nav-states ol li:hover {
opacity : 1; }

.nav-states ol li a {
display : block;
width : 200px; 
height : 200px; }

.nav-states ol li:nth-child(3),
.nav-states ol li:nth-child(6) {
margin-right : 0; }

/* Idaho */

.nav-states ol li:nth-child(1) {
background : transparent url(../img/nav-states-01.png) no-repeat 50% 0; }

.nav-states ol li:nth-child(1).visited {
background-position : 50% -210px; }

.nav-states ol li:nth-child(1).current {
background-position : 50% -420px; } 

/* Utah */

.nav-states ol li:nth-child(2) {
background : transparent url(../img/nav-states-02.png) no-repeat 50% 0; }

.nav-states ol li:nth-child(2).visited {
background-position : 50% -210px; }

.nav-states ol li:nth-child(2).current {
background-position : 50% -417px; }

/* Wyoming */

.nav-states ol li:nth-child(3) {
background : transparent url(../img/nav-states-04.png) no-repeat 50% 34px; }

.nav-states ol li:nth-child(3).visited {
background-position : 50% -200px;
background-position : 50% -165px; }

.nav-states ol li:nth-child(3).current {
background-position : 50% -400px; 
background-position : 50% -365px; }

/* Montana */

.nav-states ol li:nth-child(4) {
background : transparent url(../img/nav-states-03.png) no-repeat 50% 26px; }

.nav-states ol li:nth-child(4).visited {
background-position : 50% -135px;
background-position : 50% -175px; } 

.nav-states ol li:nth-child(4).current {
background-position : 50% -368px;
background-position : 50% -408px; }

/* Washington */

.nav-states ol li:nth-child(5) {
background : transparent url(../img/nav-states-05.png) no-repeat 50% 10px; }

.nav-states ol li:nth-child(5).visited {
background-position : 50% -190px; }

.nav-states ol li:nth-child(5).current {
background-position : 50% -400px; }

/* Oregon */

.nav-states ol li:nth-child(6) {
background : transparent url(../img/nav-states-06.png) no-repeat 50% 2px; }

.nav-states ol li:nth-child(6).visited {
background-position : 50% -200px; }

.nav-states ol li:nth-child(6).current {
background-position : 50% -400px; }

/* Mini */

#nav-mini {
display : none;
position : absolute;
z-index : 100;
top : 45px;
left : 0;
list-style-type : none;
margin : 0;
width : 310px;
height : 455px; 
background-color : rgb(133,82,122); }

#nav-mini li {
opacity : .8;
position : absolute;
width : 125px; 
height : 130px; 
background-color : transparent;
background-image : url(../img/nav-mini-map.png);
background-repeat : no-repeat; 
text-indent: -9999px; }

#nav-mini li:hover {
opacity : 1; }

#nav-mini li a {
cursor : default; }

#nav-mini li.current a,
#nav-mini li.visited a {
cursor : pointer; }

/* Idaho */

#nav-mini li:nth-child(1) {
top : 20px;
left : 20px;  
background-position : 30px 0; }

#nav-mini li:nth-child(1).visited {
background-position : 30px -140px; }

#nav-mini li:nth-child(1).current {
background-position : 30px -280px; } 

/* Utah */

#nav-mini li:nth-child(2) {
top : 35px;
left : 160px; 
background-position : -130px 0; }

#nav-mini li:nth-child(2).visited {
background-position : -130px -140px; }

#nav-mini li:nth-child(2).current {
background-position : -130px -280px; }

/* Wyoming */

#nav-mini li:nth-child(3) {
top : 160px;
left : 20px; 
background-position : -250px 0; }

#nav-mini li:nth-child(3).visited {
background-position : -250px -140px; }

#nav-mini li:nth-child(3).current {
background-position : -250px -280px; }

/* Montana */

#nav-mini li:nth-child(4) {
top : 160px;
left : 160px; 
background-position : -400px 0; }

#nav-mini li:nth-child(4).visited {
background-position : -400px -140px; }

#nav-mini li:nth-child(4).current {
background-position : -400px -280px; }

/* Washington */

#nav-mini li:nth-child(5) {
top : 300px;
left : 30px; 
background-position : -535px -10px; }

#nav-mini li:nth-child(5).visited {
background-position : -535px -150px; }

#nav-mini li:nth-child(5).current {
background-position : -535px -290px; }

/* Oregon */

#nav-mini li:nth-child(6) {
top : 300px;
left : 170px; 
background-position : -680px 0; }

#nav-mini li:nth-child(6).visited {
background-position : -680px -140px; }

#nav-mini li:nth-child(6).current {
background-position : -680px -280px; }

#nav-mini li a {
display : block;
height : 130px; }

/* ARTICLE ------------------------------------------------------- */

.hentry {
margin-bottom : 3em; }

.hentry header {
display : block;
margin-bottom : 1em;
padding-bottom : 1em;
background : transparent url(../img/divider.png) repeat-x 0 100%; }

.hentry header a {
display : block; }

.hentry header a.booboo {
margin-left : -35px;
padding-left : 35px;
background : transparent url(../img/a-booboo.png) no-repeat 0 3px; }

.hentry header time,
.hentry header address {
display : block;
font-weight : normal; }

.hentry header time {
margin-bottom : .25em; 
font-size : .82em; }

.hentry header h1 {
margin-bottom : .15em; }

/* Comments */

.hentry aside {
margin-bottom : 3em;
padding-bottom : 1.5em;
background : transparent url(../img/fleurons.png) repeat-x 0 100%; }

.hentry aside li {
margin-bottom : 1em;
padding-bottom : .1em;
background : transparent url(../img/divider.png) repeat-x 0 100%; }

.hentry aside li:last-child {
margin-bottom : 0;
padding-bottom : 0;
background-image : none; }

.hentry aside h3 {
margin-bottom : .15em; 
font-size : 1em; }

.hentry aside h3 + time {
display : block;
margin-bottom : 1em; }

/* Related */

.content-sub .hentry {
position : relative;
margin-bottom : 1.5em; 
font-size : .82em; }

.content-sub .hentry header a {
display : block;
color : rgb(255,255,255);
font-weight : normal; }

.content-sub .hentry a.booboo {
margin-left : 0;
padding-left : 0;
background-image : none; }

.content-sub .hentry header {
margin-bottom : .75em;
padding-bottom : 0;
background-image : none; }

.content-sub .hentry header h1 {
color : rgb(255,255,255);
font-size : 18px;
font-weight : bold; 
letter-spacing : 0; }

.content-sub .hentry header address {
display : none; }

.content-sub .hentry header time em {
position : absolute;
font-style : normal; 
top : 15px;
right : 10px; }

.content-sub p:last-child {
margin : 0; }

/* SITE FOOTER ------------------------------------------------------- */

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

footer[role="contentinfo"] a[rel="self"]{ 
position : absolute;
top : 0;
right : 5%;
display : block;
width : 104px;
height : 91px;
background : transparent url(../img/a-self.png) no-repeat 0 0;
text-indent : -9999px; }

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

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

.sightings .img { 
float : left;
padding : 10px;	
margin : 0 2.5% 20px 0; /* 50 / 950 = .05 */
border : 1px solid rgb(133,82,122);
line-height : 1;
width : 29%; /* 283 / 950 = .29 */ 
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
box-sizing : border-box; }

.sightings .img:last-child { 
margin-right : 0; }

.sightings p {
clear : left; }

/* INDEX ----------------------------------------------------- */

.index { 
background-image : url(../img/body-index.png); }

.index > hgroup { 
width : 650px;
height : 100px;
margin : 0 auto 2.5em auto;
background : transparent url(../img/hgroup.png) no-repeat 50% 0;
text-indent : -9999px; }

.index .content { 
padding : 0 5% 3em 5%; /* 50 / 950 = .05 */ }

.index .hentry .img,
.index .hentry figure {
display : none; }

.index .content { 
padding : 0 5% 3em 5%; /* 50 / 950 = .05 */ }

.index .sightings { 
margin : 0 auto 2em auto;
padding : 0 5% 3em 5%; /* 50 / 950 = .05 */ 
background : transparent url(../img/fleurons.png) repeat-x 0 100%; }

.index #sightings:target { 
padding-top : 3em; }

/* CATEGORY ----------------------------------------------------- */

.cat .img,
.cat figure {
display : none; }

.content-sub .img,
.content-sub figure {
display : none; }

/* 404 ----------------------------------------------------- */

.p404 .content,
.p404 footer[role="contentinfo"] { 
width : 400px; 
padding-left : 0;
padding-right : 0; }

.p404 .content {
height : 500px;
text-align : center; }

.p404 footer[role="contentinfo"] a[rel="self"]{ 
right : 0; }

/* VENDOR SPECIFIC --------------------------------------------------------- */

::-webkit-selection {
color : rgb(230,211,218);
background-color : rgb(89,55,82); 
text-shadow : none; }

::-moz-selection {
color : rgb(230,211,218);
background-color : rgb(89,55,82); 
text-shadow : none; }

::selection {
color : rgb(230,211,218);
background-color : rgb(89,55,82); 
text-shadow : none; }

body {
/* -webkit-text-stroke : 1px transparent; */
-webkit-tap-highlight-color : rgba(0, 0, 0, 0); }

.nav-states,
.content,
.sightings,
nav[role="navigation"],
footer[role="contentinfo"] {
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
box-sizing : border-box; }

/* MODERNIZR ------------------------------------------------------------------- */

/* borderradius */

.borderradius #nav-mini {
-moz-border-radius : 2px;
-webkit-border-radius : 2px;
border-radius : 2px; }

/* csstransitions */

.csstransitions nav[role="navigation"] a,
.nav-states ol li,
#nav-mini li {
-webkit-transition : opacity .2s linear;
-moz-transition : opacity .2s linear;
-o-transition : opacity .2s linear;
transition : opacity .2s linear; }

.csstransitions .p404 img {
-webkit-transform : translate(-60px);
-webkit-animation-name : ranger; 
-webkit-animation-duration : 2s;
-webkit-animation-iteration-count : 1;
-webkit-animation-timing-function : linear; }

@-webkit-keyframes ranger {
from { -webkit-transform : translate(60px); }
to { -webkit-transform : translate(-60px); } }

/* csstransforms */

.csstransforms #nav-mini {
-webkit-transform : matrix(1, -0.1, 0.01, 1, 0, 0);
-moz-transform : matrix(1, -0.1, 0.01, 1, 0, 0);
-o-transform : matrix(1, -0.1, 0.01, 1, 0, 0);
transform : matrix(1, -0.1, 0.01, 1, 0, 0); }

.csstransforms #nav-mini li {
-webkit-transform : matrix(1, 0.1, -0.01, 1, 0, 0);
-moz-transform : matrix(1, 0.1, -0.01, 1, 0, 0);
-o-transform : matrix(1, 0.1, -0.01, 1, 0, 0);
transform : matrix(1, 0.1, -0.01, 1, 0, 0); } 

.csstransforms .content-sub .hentry {
padding : 15px; }

.csstransforms .content-sub .hentry:nth-child(odd) {
-moz-transform : rotate(4deg);
-o-transform : rotate(4deg);
-webkit-transform : rotate(4deg);
transform : rotate(4deg); }

.csstransforms .content-sub .hentry:nth-child(even) {
-moz-transform : rotate(-4deg);
-o-transform : rotate(-4deg);
-webkit-transform : rotate(-4deg);
transform : rotate(-4deg); }

.csstransforms .content-sub .hentry:nth-child(odd) header,
.csstransforms .content-sub .hentry:nth-child(odd) div {
-moz-transform : rotate(-4deg);
-o-transform : rotate(-4deg);
-webkit-transform : rotate(-4deg);
transform : rotate(-4deg); }

.csstransforms .content-sub .hentry:nth-child(even) header,
.csstransforms .content-sub .hentry:nth-child(even) div {
-moz-transform : rotate(4deg);
-o-transform : rotate(4deg);
-webkit-transform : rotate(4deg);
transform : rotate(4deg); }

.csstransforms .content-sub .hentry:nth-child(odd) header {
padding-left : -5px; }

.csstransforms .content-sub .hentry:nth-child(even) header {
padding-left : 5px; }

.csstransforms .content-sub .hentry header time em {
top : 0;
right : 0; }

/* multiplebgs */

.multiplebgs .hentry aside {
margin-top : 3em;
padding-top : 3em;
background-image : url(../img/fleurons.png), url(../img/fleurons.png);
background-repeat : repeat-x, repeat-x;
background-position : 0 0, 0 100%; }

/* rgba */

.rgba body { 
text-shadow : 0 -1px 0 rgba(0,0,0,.8); }

.rgba .hentry header a:hover,
.rgba .hentry header a:active, 
.rgba .hentry header a:focus { 
text-shadow : 0 -1px 1px rgba(0,0,0,.6), 0 0 20px rgba(0,0,0,.6); }

.rgba input[type="text"], 
.rgba input[type="email"], 
.rgba input[type="tel"], 
.rgba input[type="password"], 
.rgba input[type="url"],
.rgba textarea { 
text-shadow : 0 -1px 1px rgba(0,0,0,.6); }

.rgba .content-sub .hentry {
background-color : rgba(0,0,0,.04); }

.rgba .content-sub .hentry:hover {
background-color : rgba(0,0,0,.08); }

.rgba #nav-mini {
-webkit-box-shadow : 2px 2px 20px rgba(0,0,0,.3);
-moz-box-shadow : 2px 2px 20px rgba(0,0,0,.3);
box-shadow : 2px 2px 20px rgba(0,0,0,.3); }

.rgba .content-main .img,
.rgba .content-main figure {
background-color : rgba(0,0,0,.08); }

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

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { 

body { 
font-size : 24px; }

.content-main { 
float : none; 
width : 100%; }

.content-sub { 
float : none; 
width : 100%; }

.content-sub .img {
float : left; 
margin-right : 50px; }

.hentry header a.booboo {
margin-left : -40px;
padding-left : 40px; 
background-position : 0 7px; }

footer[role="contentinfo"] {
padding : 0 50px; }

.index .content { 
padding : 0 50px 3em 50px; }

.vcard li:first-child {
margin-left : -24px; } 

}

@media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" { 

body { 
font-size : 24px; }

}

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

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

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

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