/* ----------------------------------------------------------------------------------------- 
Stuff and Nonsense Ltd.
The Cow Shed Studio,
Gwaenysgor,
Flintshire, North Wales
LL18 6EP, UK
+44 1745 851848
http://www.stuffandnonsense.co.uk

I Keep Faith is a educational CSS demonstration site by Andy Clarke. 
Visual design copyright 2007. All Rights Reserved. 
XHTML/CSS released under a Creative Commons Attribution 2.5 licence.
----------------------------------------------------------------------------------------- */



/* http://meyerweb.com/eric/tools/css/reset/ 
----------------------------------------------------------------------------------------- */

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, font, 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 {
margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent; }
body { line-height : 1; }
ol, ul { list-style : none; }
blockquote, q { quotes : none; }
blockquote:before, blockquote:after, q:before, q:after { content : ''; content : none; }
:focus { outline : 0; }
ins { text-decoration : none; }
del { text-decoration : line-through; }
table { border-collapse : collapse; border-spacing : 0; }




/* Modified from: http://code.google.com/p/blueprintcss/ 
----------------------------------------------------------------------------------------- */
body { font : 75%/1.5 Helvetica, Arial, Verdana, sans-serif; }
h1,h2,h3,h4,h5,h6 { font-weight : normal; }
h1 { font-size : 3em; line-height : 1; margin-bottom : 0.5em; }
h2 { font-size : 2em; margin-bottom : .75em; }
h3 { font-size : 1.5em; line-height : 1; margin-bottom : 1em; }
h4 { font-size : 1.2em; line-height : 1.25; margin-bottom : 1.25em; }
h5 { font-size : 1em; font-weight: bold; margin-bottom : 1.5em; }
h6 { font-size : 1em; font-weight : bold; }
p { margin : 0 0 1.5em; }
ul, ol { margin : 0 1.5em 1.5em 0; }
ul { list-style-type : none; }
ol { list-style-type : decimal; }
dl { margin : 0 0 1.5em 0; }
dt { font-weight : bold; }
dd { margin-left : 1.5em;}
abbr, acronym { border-bottom-width : 0; }
address { margin-top : 1.5em; font-style : normal; }
del { color : #666; }
blockquote { margin : 1.5em 0; }
strong { font-weight : bold; }
em, dfn { font-style : italic; }
dfn { font-weight : bold; }
pre, code { margin : 1.5em 0; white-space : pre; }
pre, code, tt { font : 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height : 1.5; } 
tt { display : block; margin : 1.5em 0; line-height : 1.5; }
table { margin-bottom : 1.4em; }
th { border-bottom : 2px solid #433b34; font-weight : bold; }
td { border-bottom : 1px solid #ddd; }
th,td { padding : 4px 10px 4px 0; }
tfoot { font-style : italic; }
caption { background : #ffc; }




/* Author styles (written here or imported from external files)  
----------------------------------------------------------------------------------------- */

html { background : #2f2a25; }
body { /* background : url(../siteimages/grid.png); */ color : #fff; }
h2, h3, h4, p, dl, ul, ol, .vcard { text-shadow: 1px 2px 2px #000; }
p, dl, ul, ol, .vcard { font-weight : bold; }

/* =hx */
h2 { font-size : 1.2em; line-height : 1.25; margin-bottom : 1.25em; text-transform : uppercase; }
h3 { font-size : 1.2em; line-height : 1.3; margin-bottom : 1.25em; }

/* =a */
a, a:visited { color : #a59476; font-weight : bold; text-decoration : none; }
a:hover { color : #eed6ac; text-decoration : none; }

/* =container */
#container { width : 940px; margin : 0 auto; background : url(../siteimages/container.jpg) no-repeat 100% 0;  }

/* =branding */
#branding { width : 640px; margin-bottom : 14px; }
#logo { width : 396px; height : 156px; margin : 0 auto; background : url(../siteimages/logo.png) no-repeat 0 0; text-indent : -9999px; }

/* =nav_main */
#nav_main { width : 640px; min-height : 36px; padding-top : 20px; background : url(../siteimages/nav_main.png) no-repeat 0 0; }
#nav_main ul { position : relative; padding : .75em 0; }
#nav_main li { position : absolute; width : 100px; text-align : center; }
li#nav_home { left : 240px; width : 160px; font-size : 1.2em; }
li#nav_blog { left : 0; }
li#nav_dates { left : 120px; }
li#nav_news { left : 420px; }
li#nav_shop { left : 540px; }
#nav_main a { text-transform : uppercase; }
.index li#nav_home a { color : #fff; }
.blog li#nav_blog a, .article li#nav_blog a { color : #fff; }
.dates li#nav_dates a { color : #fff; }
.news li#nav_news a { color : #fff; }
.shop li#nav_shop a, .detail li#nav_shop a { color : #fff; }

/* =content */
.content { overflow : hidden; width : 640px; margin-bottom : 3em; }

/* =content_introduction */
#content_introduction { width : 640px; min-height : 162px; padding-top : 20px; background : url(../siteimages/content_introduction.png) no-repeat 0 0; }
#content_introduction blockquote { margin-bottom : 0; }
#content_introduction p { text-align : center; }
#content_introduction blockquote p { margin-bottom : .75em; font-size : 2em; font-family : "Hoefler Text", Georgia, Times, serif; font-style : italic; font-weight : normal; line-height : 1.1; }
#content_introduction > p { margin : 0 10px 0 10px; padding-bottom : 1.5em; border-bottom : 1px solid #695f4f; font-size : 1.2em; }

/* =content_shop */
#content_shop { width : 938px; margin-bottom : 1.5em; background-color : #827b74; border : 1px solid #000; }
#content_shop:after { content : "."; display : block; height : 0; clear : both; visibility : hidden; }

#content_shop .one { position : relative; float : left; width : 632px; min-height : 18em; }
#content_shop .one h3 { margin-left : 100px; padding-top : 55px; width : 280px; }
#content_shop .one > a { display : block; margin : 0 0 1.5em 100px; color : #eed6ac; text-shadow: 1px 2px 2px #000; }
#content_shop .one p { margin-left : 100px; padding-right : 120px; width : 180px; height : 20px; background : url(../siteimages/p_controls.jpg) no-repeat 100% 0; }
#content_shop .one img { position : absolute; top : 12px; left : 420px; padding : 10px; background-color : #433b34; border : 1px solid #2f2a25; }

#content_shop .two { float : right; width : 270px; min-height : 18em; padding : 0 15px; border-left : 1px solid #000; }
#content_shop .two h3 { padding-top : 20px; text-transform : uppercase; }
#content_shop .two img { float : right; margin-right : 25px; }

#content_shop { 
background-image : url(../siteimages/bg-tl.png), url(../siteimages/bg-tr.png), url(../siteimages/bg-bl.png), url(../siteimages/bg-br.png); 
background-repeat : no-repeat, no-repeat, no-repeat, no-repeat; 
background-position : top left, top right, bottom left, bottom right; }

.faux { width : 938px; height : 228px; margin-bottom : 1.5em; background : #827b74 url(../siteimages/content_shop.png) no-repeat 0 0; border : 1px solid #000; }

/* =nav_extra */
.nav_extra { overflow : hidden; padding : .75em; background-color : #3b3631; }
.nav_extra a { float : right; }
.nav_extra a[title$="RSS"] { float : left; width : 14px; height : 14px; background : url(../siteimages/a-rss.png) no-repeat 0 0; text-indent : -9999px; }

/* =siteinfo */
#siteinfo { position : relative; width : 100%; margin : 6em auto 0 auto; padding : 6em 0 3em 0; background-color : #000; }
#siteinfo p { margin : 0 auto; width : 940px; }
#siteinfo a[rel="self"] { display : block; position : absolute; top : -35px; left : 50%; width : 215px; height : 70px; margin-left : -107px; background : url(../siteimages/a-self.png) no-repeat 0 0; text-indent : -9999px; }

/* =form */
label { margin-bottom : 1.5em; }
label, label span { display : block; }
label span { font-weight : bold; text-shadow: 1px 2px 2px #000; }
input[type="text"] { width : 180px; background-color : #2f2a25!important; border : 1px solid #a59476; font-size : 99%; font-weight : bold; color : #fff; }
select { width : 180px; background-color : #2f2a25; border : 1px solid #a59476; font-size : 99%; font-weight : bold; color : #fff; }
label.dn { display : none; }

/* http://meyerweb.com/eric/tools/css/diagnostics/ 
----------------------------------------------------------------------------------------- 

div:empty, span:empty, li:empty, p:empty, td:empty, th:empty { padding : 0.5em; background : yellow; }
*[style], font, center { outline : 5px solid red; } 
*[class=""], *[id=""] { outline : 5px dotted red; }
img[alt=""] { border : 3px dotted red; }
img:not([alt]) { border : 5px solid red; }
img[title=""] { outline : 3px dotted fuchsia; }
img:not([title]) { outline : 5px solid fuchsia; }
table:not([summary]) { outline : 5px solid red; }
table[summary=""] { outline : 3px dotted red; }
th { border : 2px solid red; }
th[scope="col"], th[scope="row"] { border : none; }
a[href]:not([title]) { border : 5px solid red; }
a[title=""] { outline : 3px dotted red; }
a[href="#"] { background : lime; }
a[href=""] { background : fuchsia; } 

----------------------------------------------------------------------------------------- */

/* Extensions */

/* Safari  */

#nav_main li { -webkit-transition : all .25s ease-in-out; }
#nav_main li:hover { -webkit-transform : scale(1.5); }
.nav_extra { -webkit-border-radius : 5px;}

#siteinfo a[rel="self"] { -webkit-transition : all .5s ease-in-out; }
#siteinfo a[rel="self"]:hover { -webkit-transform : scale(1.5); }

/* Firefox */
.nav_extra { -moz-border-radius : 5px; }