/*   
Surreal Illusions Motorsport Photography www.surrealillusions.co.uk
*/

@import url("fonts.css");

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

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

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

.clear
{clear:both;}


/* And here begins the Wordpress fun.
-------------------------------------------------------------------------------*/

.wrap {width: 960px; margin: auto;}

body
{}

.post {}

.entry-content {}
.entry-content a {}
.entry-content a:hover {}

#meta {}
.postmetadata {}

#sidebar {}

.navgation {}
.next-posts {}
.prev-posts {}

#searchform {}
#s {}
#searchsubmt {}

.alignright
{float:right;
margin:0 0 0 10px;}

.alignleft
{float:left;
margin:0 10px 0 0;}
	
/* Text Styles */

h1
{font-family:'Blue Highway', 'SansationBold', Arial, sans-serif;
font-weight:normal;
font-size:26px;
letter-spacing:2px;
color:#FFFFFF;}

h2
{font-family:Verdana, Arial, sans-serif;
font-weight:normal;
font-size:19px;
color:#FFFFFF;}

p, li
{font:12px/18px 'Myriad Pro', Helvetica, Arial, sans-serif;
color:#a6a6a7;
padding:5px 0 5px 0;}

li
{padding:0;}

.intro .text p
{color:#e5ebf0}


ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
a
{text-decoration:none;
cursor:pointer;
color:#6db8d4;
white-space:nowrap;}

a:hover
{color:#e57e5f;}
.clear
{clear:both;}
.offscreen
{margin-left:-9999px;}

acronym
{border-bottom:1px #e5ebf0 dotted;
cursor:help;}


/* ------------------- General Styles ------------------- */


body
{background:#09090a url(img/bodybg.jpg) no-repeat 50% 160px;}



/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}

/* ------------------- Footer Styles ------------------- */

footer {
position: relative;
min-height: 161px;
width:100%;
background:#ffffff;
/*background-image: -moz-linear-gradient(100% 100% 90deg, #34383b, #090909);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#090909), to(#34383b));*/
clear:both;
border-top:5px solid #34383b;}


section#footerupper
{margin:auto;
width:100%;
text-align:center;
position:relative;
border-bottom:1px solid #000000;}

#footerupper ul li
{display:inline-block;
width:100px;}

footer p, footer a
{font:12px/16px Arial, sans-serif;
color:#09090a;}

.footerinfo
{float:left;
margin:10px 20px 0 0;
width:350px;}

#eucookielaw, .eucookie
{float:right;
width:200px;
margin:10px 0 0 0;}

.copyright
{position:absolute;
bottom:0;
right:0;}

.copyright p, #tla
{font:10px/14px Arial, sans-serif;}

#eucookielaw { display:none }

#tla
{position:absolute;
bottom:0;
left:0;}


/* ------------------- Header and Nav Styles ------------------- */

header
{width:100%;
background:#09090a url(img/bg-header.gif) repeat-x top;
background-image: -moz-linear-gradient(100% 100% 90deg, #090909, #34383b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#34383b), to(#090909));
height:101px;
border-bottom:1px solid #ffffff;}

header p
{font:italic 16px/16px 'Blue Highway', 'SansationBold', Arial, sans-serif;
letter-spacing:3px;
float:left;
margin:20px 0 0 0;
padding:0;}

nav
{float:right;
margin:25px 0 0 30px;}

nav a
{float:left;
margin:0 20px 0 20px;
text-align:center;
font:14px/21px 'Blue Highway', 'SansationRegular', Arial, sans-serif;
color:#FFFFFF;}

/* ------------------- Contact Form Styles ------------------- */


form
{width:800px;}

label
{color:#FFFFFF;
margin-right:10px;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
line-height:16px;
color:#d9d9d7;
width:120px;}

.comments label
{margin:0 0 0 2px;
text-align:left;}

fieldset
{width:400px;
float:left;
margin:20px 0 0 0;}

input:focus, textarea:focus, select:focus
{border:2px solid #e57e5f;}

input, textarea, select
{width:250px;
height:23px;
padding:1px 2px 1px 4px;
margin:3px 0 0 0;
border:2px solid #4b4949;
font-family:Arial;
font-size:13px;
line-height:23px;
color:#000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
background-color: #dcdbe0; /* fallback color */
background-image: -moz-linear-gradient(100% 100% 90deg, #d3d4d9, #dcdbe0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dcdbe0), to(#d3d4d9));}

input.other
{width:10px;
float:none;
margin:0;
display:hidden;
padding:0;}

textarea
{width:300px;
height:106px;
overflow:auto;}

button
{background:#09090a url(img/viewfullgallery.png) no-repeat top;
width:150px;
height:27px;
cursor:pointer;
font:13px/10px 'Myriad Pro', Helvetica, Arial, sans-serif;
padding:0 0 4px 10px;
text-align:left;
color:#a6a6a7;
margin:17px 0 0 0;
border:none;}

button:hover
{color:#e57e5f;}

label.error, span.required
{color:#FF0000;
font-family:Arial;
clear:both;
float:left;
width:230px;
margin:3px 0 0 0;
font-size:11px;}

ul#errorlist
{list-style-type:disc;
margin:0 0 0 20px;}

ul#errorlist li
{margin:0;
padding:2px 0 2px 0;}

/* ------------------- Page Layout Styles ------------------- */
.content
{width:800px;
margin:auto;
position:relative;
margin-top:-5px;}

.intro
{float:left;
width:400px;
margin-top:20px;
margin-bottom:20px;}

.gallerymain .intro
{width:800px;}

.introwide
{width:800px;}

.intro h1
{margin-bottom:10px;
margin-top:55px;}


/* ------------------- Home Specific Stuff ------------------- */

ul.slideshow {
	list-style:none;
	width:800px;
	height:200px;
	overflow:hidden;
	position:relative;
	margin:5px 0 0 0;
	padding:0;
}	

ul.slideshow li {
	position:absolute;
	left:0;
	right:0;
}

ul.slideshow li.show {
	z-index:50;
}

ul.slideshow img {
	border:none;	
}

#slideshow-caption {
	width:800px;
	height:40px;
	position:absolute;
	bottom:0;
	left:0;	
	color:#fff;
	background:#000;
	z-index:50;
}

#slideshow-caption .slideshow-caption-container {
	padding:5px 10px;	
	z-index:1000;	
}

#slideshow-caption p {
	margin:5px 0 0 0;
	padding:0;
	font:16px/16px Arial, Helvetica, sans-serif;
}

#slideshow-caption a
{color:#ffffff;}

/* ------------------- Page Specific Stuff ------------------- */

#latestnews, .sidebar, .motorsportlinks
{float:left;
width:340px;
margin:53px 0 0 50px;}

.photography, .motorsportlinks
{float:left;
width:340px;
margin-top:20px;}

#webdesign
{float:right;
width:400px;
text-align:right;
margin:65px 0 0 0;}

.intro h2, #latestnews h2, .contactside h2
{color:#FFFFFF;
margin-bottom:10px;}

.latestgallery div
{float:left;
width:260px;}

.latestgallery div a, .icon h4 a
{white-space:normal;
color:#ffffff;}

.gallerylist
{margin:70px 0 0 0;}

.icon, .photocase
{float:left;
width:160px;
height:193px;
margin:12px;
padding:7px;
border:1px solid transparent;}

.gallerythumbs div.icon
{text-align:center;
min-height:223px;}

.photocase
{text-align:center;
height:190px;}

.newscolumn
{padding-top:10px;}

.newsentry h2
{color:#ffffff;
margin:0 0 9px 0;}

.newsentry
{width:700px;
padding:0 10px 0 10px;
border:1px solid transparent;}

.icon:hover, .photocase:hover, .newsentry:hover, .newsitemfull
{background:#101112;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
border:1px solid #1b1c1e;}

.newsitemfull
{padding:0 15px 10px 10px;
width:600px;
border:1px solid #1b1c1e;
margin:10px 0 10px 0;}

.latestgallery h1
{font-size:25px;
font-weight:normal;
margin:20px 0 10px 0;}

.introwide
{width:800px;}

.intro h3, .latestgallery div h3, .gallerylist div.icon h4, .newsitemfull h3
{font: normal 13px/13px Verdana, Arial, sans-serif;
margin:1px 0 0 0;
color:#ffffff;}

.intro h3, .latestgallery div h3, .newsitemfull h3, .photography h2, .motorsportlinks h2
{color:#ffffff;
margin:0;
font-size:14px;
line-height:16px;}

.latestgallery div span, .icon span, .photocase span
{font-style:italic;
font-size:10px;}

.photocase span
{word-wrap:break-word;}

.latestgallery div img, .icon img, .photocase img
{-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;}

.latestgallery div img:hover, .icon img:hover, .photocase img:hover
{-moz-opacity:1;
-khtml-opacity:1;
opacity:1;}

.gallerycontainer
{margin:15px 0 0 0;}

.viewmore, #viewmorenews
{background:#09090a url(img/viewfullgallery.png) no-repeat top;
display:block;
float:right;
width:145px;
height:23px;
font:13px/18px 'Myriad Pro', Helvetica, Arial, sans-serif;
padding:4px 0 0 5px;
margin:20px 0 0 0;
color:#a6a6a7;}

.viewmore
{margin:5px 0 0 0;}

a.newsupdate
{background:#09090a url(img/viewnewsupdates.png) no-repeat top;
display:block;
float:left;
width:195px;
height:34px;
font:13px/32px 'Myriad Pro', Helvetica, Arial, sans-serif;
padding:2px 0 0 5px;
margin:10px 5px 0 0;
color:#a6a6a7;}

a#viewmore:hover, a#viewmorenews:hover, a.newsupdate:hover
{color:#e57e5f;}

a.newsupdate img
{float:left;
margin:0 7px 0 0;}

#viewmorenews
{float:none;}

#latestnews
{margin-top:10px;}

#latestnews p
{margin:0;
padding:0;}

p.entry span, p.date span.type
{text-transform:uppercase;
font-size:10px;
font-weight:bold;}

#latestnews p.date, .newsentry p.date, .newsitemfull p.date
{font-size:10px;
margin:15px 0 0 0;
padding:0;
color:#8a8a8a;
font-style:italic;}

p.date span.type
{font-style:normal;}

.links form.addalink fieldset
{margin:0;}

.links form.addalink input
{float:left;
width:250px;
margin: 3px 0 3px 10px;}

.links form.addalink label
{float:left;
width:100px;
margin:6px 0 6px 0;}

.links form.addalink input.urlfield
{width:215px;
margin-left:0;}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}
tent: none;
}