/* 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{
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size:.875em;
text-align:center;
background:url(body.jpg) repeat #212121;
color:#fff;
}
#wrapper{
width:980px;
margin:0 auto;
}
/*************
GENERAL FONTS
**************/
p{
line-height:1.5em;
margin-bottom:10px;
}
li{
line-height:1.4em;
margin-bottom:5px;
}
ul{
margin-left:20px;
}
h3, h4,h5{
font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif;
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;
}
/*********
HEADER
*********/
header#top{
text-align:left;
}
header#top h1 a.home{
position: absolute;
display: block;
text-indent:-9999em;
background: url(logo.png) 50% 50% no-repeat transparent;
height: 150px;
width: 150px;
left: 50%;
margin-left:-75px; /*half the width of the logo image to center it*/
outline:none;
}
header#top h1 a:hover, header#top h1 a:focus{
background: url(logo-hover.png) 50% 50% no-repeat transparent;
}
/**********
NAVIGATION
**********/
nav#topnav{
margin-top:5px;
height:150px;
}
nav#topnav ul{
list-style-type:none;
margin-top:20px;
margin-left:0;
}
nav#topnav ul li{
display:inline-block;
margin:15px 20px 0 20px;
width:80px;
font-size:.85em;
color:#d6d6d6;
text-align:center;
line-height:normal;
}
nav#topnav li.gap{
margin-left:250px;
}
nav#topnav a{
display:block;
text-decoration:none;
text-transform:uppercase;
font-size:1.3em;
font-family: 'Fjalla One',  sans-serif;
}
nav#topnav a:link, nav#topnav a:visited{
color:#35e2e0;
}
nav#topnav a:hover, nav#topnav a:focus{
color:#edae4a;
}
nav#topnav a.now{
color:#edae4a
}

/**********
CONTENT
**********/
#content{
text-align:left;
margin-top:10px;
}
#content p{
font-size:1.1em;
}
#content a{
text-decoration: none;
}
#content a:link{
border-bottom:#b5f1e4 dotted 1px;
}
#content a:visited{
border-bottom:#f7ce8d dotted 1px;
}
#content a:hover, #content a:focus{
-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{
text-align:center;
}
header#main h2{
font-family: 'Fjalla One',  sans-serif;
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;
letter-spacing:.03em;
word-spacing:.3em;
margin:0 0 30px 0;
}
/*****Intro Text*****/
section.intro{
background:#2f2f2f;
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;
font-weight:500;
color:#cacabb;
letter-spacing:.04em;
word-spacing:.2em;
font-size:1.1em;
text-shadow: 0px 1px 1px #000;
}
/****Columns****/
.columns{
overflow: hidden;
width: 100%;
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 {
float: left;
width: 210px;
background:#2d2d2d;
padding: 10px 15px 1000px 15px;
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{
float: left;
width: 400px;
background:#2d2d2d;
padding: 10px 15px 1000px 15px;
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 {
float: left;
width: 210px;
margin-right: -1px; 
background:#2d2d2d;
padding: 10px 15px 1000px 15px;
margin-right:10px;
margin-bottom: -1000px;
-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****/
.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);
}

/****** Images *****/
.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{
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);
}

/**********
FOOTER
**********/
footer{
width:auto;
overflow:hidden;
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;
}
#footer-text{
width:600px; /*if you increase this you'll need to decrease footer-search accordingly*/
float:left;
padding: 10px 20px 1000px 15px;
margin-bottom: -1000px;
}
#footer-text p{
color:#e5e5cf;
}
/*Search*/
#footer-search{
width:290px; /*if you increase this you'll need to decrease footer nav accordingly*/
float:left;
padding: 10px 5px 1000px 0;
margin-bottom: -1000px;
}
footer form{
margin-top:10px;
}
footer fieldset label, legend{
display:none 
}
footer input#term{ 
width:160px;
margin:10px 10px 7px 0;
padding:4px 5px;
background:url(body.jpg) #212121;
border:2px inset #212121;
color:#dbdbba;
text-transform: lowercase;
letter-spacing:normal;
font-size:1em;
}
footer input#term:focus{
background:#fff;
border:1px solid #d18b1c;
color:#2c2c2c;
}
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(http://templates.tupence.co.uk/slate-grey/assets/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{
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(http://templates.tupence.co.uk/slate-grey/assets/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{
padding:40px 0 30px 0;
color:#e7e3c9;
font-size:.8em;
width:980px;
margin:0 auto;
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;
}