/* Colours and Backgrounds ----------------------------------------------------------------------*/

body {
    color: #222; 
    background-color: #FFF;
    background-image: url('/images/wall.png');
    background-repeat: repeat-x;
    background-position: top;
    background-attachment: scroll;
}

#banner h1 a, #banner h1 a:link, #banner h1 a:visited { color: #000; text-shadow: 1px 1px 0px #FFFFFF; font-size: 23px;}
#banner h1 a:hover, #banner h1 a:active { color: #A57A67; text-shadow: 1px 1px 0px #FFFFFF; font-size: 23px;}
#banner h2 a, #banner h2 a:link, #banner h2 a:visited, #banner h4 a, #banner h4 a:link, #banner h4 a:visited { color: #1A1A1A; text-shadow: 1px 1px 0px #FFFFFF;}
#banner h2 a:hover, #banner h2 a:active, #banner h4 a:hover, #banner h4 a:active { color: #C9AD9E; text-shadow: 1px 1px 0px #FFFFFF;}
#swf a, #swf a:link, #swf a:visited { color: #808080; border-bottom: 0px;}
#swf a:hover, #swf a:active { color: #222; border-bottom: 0px;}

a {color: #111; }
a:link {color: #111; }
a:visited {color: #111; }
a:hover {color: #506D67; }
a:active {color: #506D67; }

h3 a {color: #000; border-bottom: 1px solid #506D67;}
h3 a:link {color: #000; }
h3 a:visited {color: #000; }
h3 a:hover {color: #1A1A1A; }
h3 a:active {color: #1A1A1A; }

em { color: #506D67; }
em a { color: #506D67; }

img { border-style: none; }

/* Typography ----------------------------------------------------------------------*/

/* font-face */

/* The Quicksand Typeface was created by Andrew Paglinawan and retrieved at Font Squirrel (http://www.fontsquirrel.com) */


@font-face {
	font-family: 'Quicksand';
	src: url('/fontface/Quicksand_Book-webfont.eot');
	src: local('☺'), url('/fontface/Quicksand_Book-webfont.woff') format('woff'), url('/fontface/Quicksand_Book-webfont.ttf') format('truetype'), url('/fontface/Quicksand_Book-webfont.svg#webfontQNKLE8Me') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fontface/Quicksand_Book_Oblique-webfont.eot');
	src: local('☺'), url('/fontface/Quicksand_Book_Oblique-webfont.woff') format('woff'), url('/fontface/Quicksand_Book_Oblique-webfont.ttf') format('truetype'), url('/fontface/Quicksand_Book_Oblique-webfont.svg#webfontdezzUb1h') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fontface/Quicksand_Bold-webfont.eot');
	src: local('☺'), url('/fontface/Quicksand_Bold-webfont.woff') format('woff'), url('/fontface/Quicksand_Bold-webfont.ttf') format('truetype'), url('/fontface/Quicksand_Bold-webfont.svg#webfont41HQJ7Rv') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Quicksand';
	src: url('/fontface/Quicksand_Bold_Oblique-webfont.eot');
	src: local('☺'), url('/fontface/Quicksand_Bold_Oblique-webfont.woff') format('woff'), url('/fontface/Quicksand_Bold_Oblique-webfont.ttf') format('truetype'), url('/fontface/Quicksand_Bold_Oblique-webfont.svg#webfontirlyzaXn') format('svg');
	font-weight: bold;
	font-style: italic;
}

/* end font-face */

body, ul li, em { font-family: "Chaparral", "Chaparral Pro", "Garamond", "Georgia", "Verdana"; line-height: 1.3; }
h1, h2, h3, h4 { font-family: "Quicksand", "Century Gothic", "Verdana";}
p { font-size: 13px; font-style: normal; }
ul li { font-size: 12px; font-style: normal; }
em { font-size: 13px; font-style: italic; }
h1 { font-size: 21px; font-weight: normal; margin: 0px 0px 10px 0px;}
h2 { font-size: 15px; font-weight: normal; }
h3, h4 { font-size: 14px; font-weight: normal; }
a { text-decoration: none; }
#banner h1 {margin: 45px 0px 0px 0px;}
.it { font-size: 14px; font-style: italic;}

/* Layout ----------------------------------------------------------------------*/

body { padding: 0px; margin: 0px; text-align: center; }

/* Navigation styling ----------------------------*/

#banner {
    width: 250px;
    height: 300px;
    position: absolute;
    top: 0px;
    background: url('/images/banner.png') no-repeat top;
    margin: 0px 0px 0px 35px;
    text-align: center;
}

.contact {
    width: 125px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #B3B3B3;
    margin: 20px auto 0px;
    padding: 25px;
}

#navback {
    width: 250px;
    margin: 0px 0px 0px 35px;
    background-image: url('/images/navshadow.png');
    background-repeat: repeat-y;
    float: left;
}
.nav {
    margin: auto;
    width: 200px;
    background-color: #FFF;
    border: 1px solid #B3B3B3;
    padding: 325px 10px 35px;
}
/* Bottom five lines are from lower down in CSS and were originally applied to the #navigation div */
div.nav ul {list-style: none; margin: 0px 0px 0px -40px;}
div.nav ul li { margin: 0px 0px 3px; }
div.nav ul li h3.selected { color: #000; font-size: 16px;}
div.nav ul li h3.selected a { border: 0px; color: #000; border-bottom: 1px solid #A57A67; cursor: default; }
div.nav ul li.selected { color: #000; font-size: 14px;}
div.nav ul li.selected a { border: 0px; color: #000; border-bottom: 1px solid #E6E6E6; cursor: default; }
div.nav ul li em { display: block; margin: 15px 0px 0px; }

/* End Navigation styling ----------------------------*/

div#page {margin 0px; padding: 0px; width: 1140px; top: 0px; left: 0px;}
div#container { margin: 40px 0px 0px 0px; width: 800px; padding: 5px 20px; text-align: left; float: left; }
div#content { margin: 0px 0px 0px 50px; }

.col { float: left; margin: 0px 0px 0px 20px; padding: 0px; }
.col .col { margin: 0px; }

.six { width: 500px; }
.seven { width: 750px; }

p, h2, h3 { margin: 0px 0px 10px; }
ul li h3 { margin: 25px 0px 5px;}
ul li h4 { margin: 0px 0px -10px;}
.index ul li h4 { margin: 0px 0px 25px; }
.mid {text-align: center;}
.uli {display: inline;}

/* Categories list styling ----------------------------*/

div#content ul.project-list { margin: 0px; padding: 15px 0px 25px; list-style: none; }
div#content ul.project-list li { float: left; width: 150px; height: 200px; text-align: center;}
.nochild {margin: 25px 0px 25px;}
ul.project-list div.thumbnail a { border: 0px;}

/* End Categories list styling ----------------------------*/

div#media { width: 750px; clear: both; margin: auto; padding: 25px 0px 0px 50px; }
div#swf { width: 750px; clear: both; margin: auto; padding: 25px 0px 0px 50px; }
div.home { padding: 25px 0px 0px 0px; }
div.index { padding: 25px 0px 0px 0px; }
div.description div#media { padding: 0px 0px 0px 0px; }
p#gallery-count{ display: none; }

div#image-wrapper { overflow: hidden; width: 750px; }
div#image-wrapper div#image-holder { width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 750px; }

p#footer { margin: 0px 0px 0px 320px; display: inline; }
p#footer em { display: block; }

a.atom-rss { margin: 0px 0px 0px 6px; padding: 1px 2px 0px; font-size: 0.93em; letter-spacing: 0.08em; background: #ddd; }

/* Layout elements ----------------------------*/

div.break {
    width: 750px;
    height: 15px;
    background-image: url('/images/stripe.png');
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;
    border-color: #E6E6E6;
    text-align: center;
    padding: 5px 0px 5px;
    clear:both;
}

div.breakline {
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #E6E6E6;
    margin: 5px 0px 5px;
    clear:both;
}

.proj {margin: 5px 0px 20px 50px;}

.stat {
    width: 190px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3;
    padding: 20px;
    float: right;
}

hr { display: block; clear: both; margin: 0px 0px 45px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
.col hr { margin: 0px 0px 15px; }
.index hr { margin: 0px 0px 15px; }

/*End Layout elements ----------------------------*/

/* Javascript-enabled styles */
body.js-enabled p#gallery-count, body.js-enabled { display: block; }
body.js-enabled p#project-count { display: none; }
body.js-enabled div#media div.image { display: none; }
body.js-enabled div#media div.image:first-child { display: block; }