/* original code by http://templates.tupence.co.uk/slate-grey.htm  */

/*****************
RESETS AND HTML5
*****************/
/***** reset browsers margins, padding and borders - add any you require ****/
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, header, section, footer, nav, form, input{
margin:0;
padding:0;
border:0;
}
/***** render html5 elements as block in older browsers ****/
header, footer, section, nav{/*add any html5 elements you use*/
display: block;
}

/**************
GENERAL LAYOUT
***************/
body{ /*set the page background and basic font defaults here*/
background:url(body.jpg) repeat #212121; 
text-align:center;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif; /*Arimo is available from Google Web Fonts http://www.google.com/webfonts/specimen/Arimo */
font-size:.875em;
color:#fff;
}
#wrapper{ /*used to contain the page's content*/
width:980px; /*This is a fixed width and will fit screen resolutions of 1024px wide and higher without horizontal scrolling. If you prefer a flexible width, chnange this to a percentage (and consider adding a max-width setting as well). Should you change the width here, you will also need to change the width of the columns set below*/
margin:0 auto; /*centres the content on the page*/
}

/*************
GENERAL FONTS
**************/
p{
line-height:1.5em;
margin-bottom:10px;
}
ul{
margin-left:20px;
}
li{
line-height:1.4em;
margin-bottom:5px;
}
h3, h4, h5, h6{
font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald */
color:#fff;
letter-spacing:.06em;
}
h3{
font-size:1.4em;
margin:20px 0 5px -5px;
}
h4{
font-size:1.2em;
margin:20px 0 3px -5px;
}
h5{
font-size:1.1em;
margin-top:20px;
}
/**links**/
a:link{
color:#b5f1e4;
}
a:visited{
color:#f7ce8d;
}
/**************************
TOP HEADER AND NAVIGATION
**************************/
/****HEADER****/
header#top{
text-align:left;
}
header#top h1 a.home{
position: absolute; 
display: block;
text-indent:-9999em; /*remove the text off the page*/
background: url(logo.png) 50% 50% no-repeat transparent; /*this image replaces the text*/
height: 97px; /*height of the image*/
width: 175px; /*width of the image*/
left: 50%; /*position from the left side of the page*/
margin-left:-93px; /*half the width of the logo image to ensure it's centred*/
}
header#top h1 a:hover, header#top h1 a:focus{ /*swap images when logo is hovered or in focus*/
background: url(logo-hover.png) 50% 50% no-repeat transparent; 
}
/*****NAVIGATION****/
nav#topnav{
margin-top:5px;
height:150px; /*the height of the image used in header in line 82*/
}
nav#topnav ul{
list-style-type:none; /*remove the bullet point from the list items*/
margin-top:20px;
margin-left:0; /*remove the margin we set on ul in line 40*/
}
nav#topnav ul li{
display:inline-block; /*place the list items in a line and make them block elements so we can add paddings and margins (you could also float:left but don't forget to clear the float*/
margin:15px 20px 0 20px;
width:80px; /*amend if you have a different number of links - the size is determined by {980px - (nav#topnav li.gap margin-left)+((left-margin+right-margin)*number of links)} = x Now divide x by the number of links to give you the width*/ 
font-size:.85em;
color:#d6d6d6;
text-align:center;
line-height:normal; /*cancels out the extra line-height we added to all list-items in line 43)*/
}
nav#topnav li.gap{ /*the first link after the logo*/
margin-left:250px; /*width of the logo + width of link set in link 104 + margin-right set in line 103 */
}
nav#topnav a{
display:block; /*places the link on its own line, which places the unlinked text below it */
text-decoration:none; /*remove the underline from the links*/
text-transform:uppercase;
font-size:1.3em;
font-family: 'Fjalla One',  sans-serif; /* Fjalla One is available from http://www.google.com/webfonts/specimen/Fjalla+One */
}
nav#topnav a:link, nav#topnav a:visited{
color:#35e2e0;
}
nav#topnav a:hover, nav#topnav a:focus{
color:#edae4a;
}
nav#topnav a.now{ /*the current page*/
color:#edae4a
}

/**********
CONTENT - the main content area of the page
**********/
#content{
text-align:left;
margin-top:10px;
}
#content p{
font-size:1.1em;
}
#content a{
text-decoration: none; /*remove the underline from links so we can use a dotted line instead*/
}
#content a:link{
border-bottom:#b5f1e4 dotted 1px; /*place a dotted line under links, use the colour set in line 65 */
}
#content a:visited{
border-bottom:#f7ce8d dotted 1px; /*place a dotted line under visited links, use the colour set in line 68 */
}
#content a:hover, #content a:focus{ /*slowly fade the link when it's hovered over, using css3 transitions - this doesn't work in IE8 or lower, so different rules have been set in the iehacks stylesheet*/
-o-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
opacity:.5;
}
/****Content Header****/
header#main{ /*the page header*/
text-align:center;
}
header#main h2{
font-family: 'Fjalla One',  sans-serif; /* Fjalla One is available from http://www.google.com/webfonts/specimen/Fjalla+One */
font-size:3em;
text-transform:uppercase;
color: #606060;
text-shadow:0 2px 1px #4b4b4b, 0px 3px 1px #3f3f3f, 0 4px 1px #2a2a2a, 0 5px 1px #1a1a1a, 0 6px 1px #0f0f0f; /*use multiple shadows of a similar colour to the font, slightly darker each time and increasing the offset, to give a 3D effect*/
letter-spacing:.03em;
word-spacing:.3em;
margin:0 0 30px 0;
}
/*****Intro Text*****/
section.intro{
background:#2f2f2f; /*use a colour a few shades lighter than the page background*/
margin:30px 30px 50px 30px;
padding:10px 20px 5px 20px;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .45);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .45);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
section.intro p{
font-family:'Droid Sans', sans-serif; /* Droid Sans is available from http://www.google.com/webfonts/specimen/Droid+Sans */
font-weight:500;
color:#cacabb;
letter-spacing:.04em;
word-spacing:.2em;
font-size:1.1em;
text-shadow: 0px 1px 1px #000;
}
/****Columns - Three Vertical Columns (you can have less or more by changing the widths set below)****/
.columns{ /*contains the columns*/
width: 100%;
overflow: hidden; /*clears the floats used below*/
margin:10px 0 30px 0;
color:#efefe1;
}
.columns ul{
list-style-type:circle;
}
.columns h3{
font-size:1.2em;
margin:0 0 5px -5px;
}
.left { /*first column*/
float: left;
width: 210px; /*if you change this width, you  must change the widths of the other columns accordingly*/
background:#2d2d2d;
padding: 10px 15px 1000px 15px; /*a large bottom padding and a negative bottom margin of the same value, combined with overflow:hidden, gives columns of equal height regardless of the content*/
margin-bottom: -1000px;
margin-left:10px;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
.centre{ /*second column*/
float: left;
width: 400px; /*if you change this width, you  must change the widths of the other columns accordingly*/
background:#2d2d2d;
padding: 10px 15px 1000px 15px; /*a large bottom padding and a negative bottom margin of the same value, combined with overflow:hidden, gives columns of equal height regardless of the content*/
margin-bottom: -1000px;
margin-left:25px;
margin-right:25px;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
.right { /*third columns*/
float: left;
width: 210px; /*if you change this width, you  must change the widths of the other columns accordingly*/
background:#2d2d2d;
padding: 10px 15px 1000px 15px; /*a large bottom padding and a negative bottom margin of the same value, combined with overflow:hidden, gives columns of equal height regardless of the content*/
margin-bottom: -1000px;
margin-right:10px;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}

/****Full Width Secion****/
.full{
margin-top:20px;
padding: 10px 25px 10px 25px;
background:#2d2d2d;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}

/****** Image Positioing and Styling *****/
.columns img{
float:left;
margin:5px 10px 0 0;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
img.imageright{ /*images placed on the right with text wrapped round them*/
float:right;
margin:5px 0 6px 15px;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
img.imageleft{ /*images placed on the left with text wrapper round*/
float:left;
margin:5px 15px 6px 0;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 40px 0 20px;
}
ul.enlarge img{
background-color:#606060;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#606060;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center; 
color: #fff; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{ 
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -200px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
behavior: url(pie/PIE.htc); 
}
/**********
FOOTER
**********/
footer{
width:auto;
overflow:hidden; /*clears the floats used below*/
margin-top:50px;
padding: 10px 0 10px 15px;
text-align:left;
-webkit-box-shadow: 0 0 12px rgba(0,0,0, .65);
-moz-box-shadow: 0 0 12px rgba(0,0,0, .65);
box-shadow: 0 0 12px rgba(0,0,0, .45);
}
footer h3{
color:#dbdbba;
margin:0;
}
/***Text on Left Hand Side***/
#footer-text{
width:600px; /*if you increase this you'll need to decrease footer-search in line 311 accordingly*/
float:left;
padding: 10px 20px 1000px 15px; /*a large bottom padding and a negative bottom margin of the same value, combined with overflow:hidden, gives columns of equal height regardless of the content*/
margin-bottom: -1000px;
}
#footer-text p{
color:#e5e5cf;
}
/***Search Box****/
#footer-search{
width:290px; /*if you increase this you'll need to decrease footer nav accordingly*/
float:left;
padding: 10px 5px 1000px 0; /*a large bottom padding and a negative bottom margin of the same value, combined with overflow:hidden, gives columns of equal height regardless of the content*/
margin-bottom: -1000px;
}
footer form{
margin-top:10px;
}
footer fieldset label, legend{
display:none 
}
/*search box*/
footer input#term{ 
width:160px; /*if you increase this you'll need to reduces the width of footer-text in line 289 */
margin:10px 10px 7px 0;
padding:4px 5px;
background:url(body.jpg) #212121; /*using the body background here to give the impression that the search box is transparent*/
border:2px inset #212121;
color:#dbdbba;
text-transform: lowercase;
letter-spacing:normal;
font-size:1em;
}
footer input#term:focus{ /*change the appearance of the search box when the cursor is placed in it*/
background:#fff;
border:1px solid #d18b1c;
color:#2c2c2c;
}
/*search button*/
footer input#searchbutton{ 
padding:4px 15px;
border:2px solid #191919;
background:#191919; 
background: -o-linear-gradient(#464646, #191919, #464646); 
background: -webkit-linear-gradient(#464646, #191919, #464646);
background: -moz-linear-gradient(#464646, #191919, #464646); 
background: -ms-linear-gradient(#464646, #191919, #464646); 
background: linear-gradient(#464646, #191919, #464646); 
-pie-background: linear-gradient(#464646, #191919, #464646);behavior: url(assets/pie/PIE.php);
-webkit-border-radius:5px; 
-moz-border-radius:5px; 
border-radius:5px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0, .65); 
-moz-box-shadow: 0 0 5px rgba(0,0,0, .65); 
box-shadow: 0 0 5px rgba(0,0,0, .65); 
color:#fff;
font-size:1em;
cursor:pointer; 
}
footer input#searchbutton:hover, footer input#searchbutton:focus{ /*change the appearance of the button when it's hovered or in focus*/
border:1px solid #f29f1c;
background:#c27c0d;
background: -o-linear-gradient(#f29f1c, #bb7300, #f29f1c);
background: -moz-linear-gradient(#f29f1c, #bb7300, #f29f1c);
background: -webkit-linear-gradient(#f29f1c, #bb7300, #f29f1c);
background: -ms-linear-gradient(#f29f1c, #bb7300, #f29f1c);
background: linear-gradient(#f29f1c, #bb7300, #f29f1c);
-pie-background: linear-gradient(#f29f1c, #bb7300, #f29f1c);behavior: url(assets/pie/PIE.php);
-webkit-box-shadow: 0 0 2px rgba(64,64,64, .55);
-moz-box-shadow: 0 0 2px rgba(64,64,64, .55);
box-shadow: 0 0 2px rgba(64,64,64, .55);
}

/*********
BASE
**********/
#base{
width:980px;
margin:0 auto;
padding:40px 0 30px 0;
color:#e7e3c9;
font-size:.8em;
text-align:center;
}
#base a{
color:#a0d7d6;
}
#base a:active, #base a:hover, #base a:focus{
color:#e7e3c9;
text-decoration:underline;
}
#base img{
margin-top:20px;
}