/* Project: www.skladany.net
   Version: 7
    Author: Steve Skladany, www.skladany.net
      Date: 2.1.12
      
Well hello there! Please ignore this messy code. 
This is just an interim update until I get around 
to version 8. 

======================================== */

@font-face {
    font-family: 'WisdomScriptAIRegular';
    src: url('../type/wisdom_script-webfont.eot');
    src: url('../type/wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/wisdom_script-webfont.woff') format('woff'),
         url('../type/wisdom_script-webfont.ttf') format('truetype'),
         url('../type/wisdom_script-webfont.svg#WisdomScriptAIRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =====================================
::::::::::::: the LEVELER ::::::::::::::
======================================== 
 http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller
 "The intention is to remove as many of the differences 
 between browsers and platforms as possible in one fell swoop."
 
 The 'height/min-height' code keeps the vertical scroll bar from disappearing in Firefox
======================================== */

* { margin:0; padding:0;
}

body { 
	font-family: 'Terminal Dosis', sans-serif;
	fo/nt-family: 'Terminal Dosis', Trebuchet MS, Arial, Verdana, sans-serif;
	min-height:101%; font:100.01%/130% Helvetica, Arial, Tahoma, sans-serif; color:#000; background:#fff;
}
td { vertical-align: top;
}


/* =====================================
:::::::::::: GLOBAL STYLES :::::::::::::
======================================== */
body {
	font-size: .65em; 
	height: 100%; }
	
p {	
	font-size: 1.15em;
	font-family: 'Terminal Dosis', sans-serif;
	letter-spacing: .03em;
	margin: 0;
	padding: 0;
	line-height: 1.8em;
}

h1, h2 { 	
	font-size: 2em;
	color: #fff;
	line-height: 1.4em;
	font-weight: normal;
}

h3 {
	color: #09f;
	font-family: 'Terminal Dosis', sans-serif;
	font-size: 1.35em;
	line-height: 1.2em;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: bold;
	margin: 0 0 .5em 0;
}

section a {
	color: #09f;
}

h1 {
	display: inline;
	font-size: 2.6em;
	font-weight: normal;
	letter-spacing: .02em;
	font-family: 'WisdomScriptAIRegular';
}
	
li {	
	list-style-type: none;
}
	
hr {
	display: none;
}

.clearBoth {
	clear: both;
}

/* Links
======================================== */

a, a h1, a h2,  a p, a img {
	text-decoration: none;
}

a img {	
	border: 0;
}
	
a {
	color: #ffe15a;
	font-weight: normal;
}
	
a div li, h3 a {	
	font-weight: bold;
}	

a:hover {
	background-color: #fc3;
	color: #09f;
}

div.hr {
	clear:both;
}




/* =====================================
:::::::::::: MAIN STRUCTURE ::::::::::::
======================================== */

body, #mainWrapper, #navWrapper, #descWrapper, #imageBlockWrapper {
	height: 100%;
	min-height: 48em;
}

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

body, img, a, section {
	transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

header {
	border-bottom: 1px solid #039;
	padding: 10px 0;
	z-index: 10;	

background: #0099ff; /* Old browsers */
background: -moz-linear-gradient(top,  #0099ff 0%, #2f6eed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099ff), color-stop(100%,#2f6eed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0099ff 0%,#2f6eed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0099ff 0%,#2f6eed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0099ff 0%,#2f6eed 100%); /* IE10+ */
background: linear-gradient(top,  #0099ff 0%,#2f6eed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff', endColorstr='#2f6eed',GradientType=0 ); /* IE6-9 */

}

header p {
	margin: 0 auto 10px auto;
	padding: 0 20px;
	font-size: 1.2em;
	color: #fff;
}

header p a {
	font-weight: bold;
}

article {
	padding-top: 40px;
	background-color: #fff;
}

img {
	width: 300px;
	height: auto;
}

section {
	width: 280px;
	margin: 10px auto 20px auto;
	padding: 10px;
	border-top: 1px dotted #aaa;
	border-bottom: 1px dotted #aaa;
}

/* navBlock
---------------------------- */

nav {
	display: block;
	width: 300px;
	margin: 5px auto 0 auto;
	padding-top: 10px;
	border-top: 1px dotted #ddd;
}

nav ul {
	margin: 0 auto;
	text-align: center;

}

nav li {
	float: left;
	width: 38px;
	margin: 0 6px 6px 6px;
}

nav li a {
    text-indent: -9000px;
    display: block;
    overflow: hidden;
    height: 38px;
    width: 38px;
    background: url(../images/navBlock.png) no-repeat; 
}

nav a.stamps  		{ background-position: 0 0}
nav a.bayer 			{ background-position: -38px 0}
nav a.earthquake 		{ background-position: -76px 0}
nav a.beerCups 		{ background-position: -114px 0}
nav a.danceMarathon 	{ background-position: -152px 0}
nav a.outdoorAds 		{ background-position: -190px 0}
nav a.summerTV 		{ background-position: -228px 0}
nav a.mediaComp 		{ background-position: -266px 0}
nav a.radio 			{ background-position: -304px 0}
nav a.primer 			{ background-position: -342px 0}
nav a.eyebeam			{ background-position: -380px 0}
nav a.chopin			{ background-position: -418px 0}
nav a.soldiersface 	{ background-position: -456px 0}
nav a.southpointe		{ background-position: -494px 0}
nav a.amalgamatedbank	{ background-position: -532px 0}
nav a.u4u				{ background-position: -570px 0}
nav a.luckys			{ background-position: -608px 0}


nav a:hover.stamps, nav a.selected.stamps  					{ background-position:  0	  -38px}
nav a:hover.bayer, nav a.selected.bayer 					{ background-position: -38px  -38px}
nav a:hover.earthquake, nav a.selected.earthquake 			{ background-position: -76px  -38px}
nav a:hover.beerCups, nav a.selected.beerCups 				{ background-position: -114px -38px}
nav a:hover.danceMarathon, nav a.selected.danceMarathon 	{ background-position: -152px -38px}
nav a:hover.outdoorAds, nav a.selected.outdoorAds 			{ background-position: -190px -38px}
nav a:hover.summerTV, nav a.selected.summerTV 				{ background-position: -228px -38px}
nav a:hover.mediaComp, nav a.selected.mediaComp 			{ background-position: -266px -38px}
nav a:hover.radio, nav a.selected.radio 					{ background-position: -304px -38px}
nav a:hover.primer, nav a.selected.primer 					{ background-position: -342px -38px}
nav a:hover.eyebeam, nav a.selected.eyebeam					{ background-position: -380px -38px}
nav a:hover.chopin, nav a.selected.chopin					{ background-position: -418px -38px}
nav a:hover.soldiersface, nav a.selected.soldiersface 		{ background-position: -456px -38px}
nav a:hover.southpointe, nav a.selected.southpointe			{ background-position: -494px -38px}
nav a:hover.amalgamatedbank, nav a.selected.amalgamatedbank	{ background-position: -532px -38px}
nav a:hover.u4u, nav a.selected.u4u							{ background-position: -570px -38px}
nav a:hover.luckys, nav a.selected.luckys					{ background-position: -608px -38px}

nav a:hover, nav li a.selected {
	background-color: transparent;
	background-position: 0 -38px;
}




@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
	
	body {
		font-size: .75em;
	}

	nav, header p {
		width: 450px;
	}

	section {
		width: 440px;
	}

	img {
		width: 460px;
		height: auto;
	}

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

	section {
		width: 500px;
	}

	img {
		width: auto;
		height: auto;
	}


}

@media only screen and (min-width: 900px) {
  /* Style adjustments for viewports 768px and over go here */

	article {
		width: 580px;
		margin: 0 auto;
		position: relative;
		padding-left: 320px;
	}

	section {
		position: absolute;
		left: 30px;
		top: 30px;
		width: 240px;
	}

	nav, header p {
		width: 850px;
	}


	img {
		width: auto;
		height: auto;
	}


}