/*
		Created by Pirkka Rannikko
		1. General styles
		2. Page layout
		3. Header
		4. Content
		5. Footer
		X. Dynamic styles for JavaScript
*/

/* 
		1. General styles -----------------------------------------------------------------------------------------------------
*/


/* HTML5 fixes*/
article, aside, header, footer, nav, section {display: block;}

/* Reset & basic settings */
* {margin: 0px; padding: 0px;}
html {background: #fff; color: #000;}
body {font: 62.5%/1.2 Arial, Helvetica, sans-serif;} /* 10px = 1.0em */
abbr, acronym, fieldset, img {border: none;}
fieldset {display: block;} /* "display: block" on images might cause problems in Safari */
table {border-collapse: collapse; border-spacing: 0px; empty-cells: show;}
caption, th, td {text-align: left; vertical-align: top;}
q:before, q:after {content:'';}

.accessibility {display: block; font-size: 0px; height: 0px; line-height: 0px; overflow: hidden; text-indent: -9000px;} /* "font-size: 0px" makes the element unfocusable */
.hidden {display: none; visibility: hidden;}
.transparency {opacity: 0.75;}

/* Links */
a:link {color: #336699; text-decoration: underline;}
a:visited {color: #6c6c6c; text-decoration: underline;}
a:hover {color: #336699; text-decoration: none;}
a:focus {color: #336699; text-decoration: none;}
a:active {color: #336699; text-decoration: none;}

/* Fonts */
address, caption, cite, code, dfn, strong, th, var {font-style: normal; font-weight: normal;}
h1 {font-size: 30px; font-weight: normal;} 
h2 {font-size: 24px; font-weight: normal;} 
h3, h4, h5, h6 {font-size: 12px; font-weight: bold;} 
p, th, td, li {font-size: 12px; line-height: 1.5;}


/* 
		2. Page layout -----------------------------------------------------------------------------------------------------
*/

html {background: #6c6c6c url(html-bg.png) 0 0 repeat-x; height: 100%;}
body {background: url(body-bg.png) 1024px 48px no-repeat; height: 100%; width: 100%;}

	#header {background: url(body-bg.png) 0 48px no-repeat; height: 58px; margin: 0 auto; max-width: 1210px; min-width: 990px; position: relative;}

	#outerWrapper {background: url(content-left-bg.png) 0 0 repeat-y; margin: -7px auto 0 auto; max-width: 1210px; min-width: 990px;}
		#innerWrapper{background: url(content-right-bg.png) right 0 repeat-y; width: 100%;}
		
			#content {background: #f6f6f6 url(header-bg.png) 122px 0 no-repeat;  float: left; min-height: 450px; margin: -3px 3px 0 3px;}
				#content article {float: left; margin: 0 330px 0 0; padding: 0 40px 0 20px;}
				#gallery #content article {margin: 0; padding: 0 20px;}
				#content aside {background: url(featured-content-bg.png) -310px bottom no-repeat; float: right; margin: 26px 0 0 -470px; min-height: 600px; padding: 0 0 0 40px; width: 330px;}
				#content aside h2:first-child {background: #909090 url(featured-content-bg.png) 0 0 no-repeat; color: #fff; padding: 30px 20px 68px 20px;}
				
			#footer {background: url(footer-bottom-bg.png) 0 bottom no-repeat; clear: both; height: 354px; margin: 0 auto; max-width: 1210px; min-width: 990px; padding: 0 0 3px 0;}
				#footer .wrapper {background: url(footer-bg.png) 0 bottom repeat-x; height: 354px; margin: 0 3px 3px 3px; position: relative;}
					#footer section {float: left; height: 340px; margin: 0 330px 14px 0; overflow: hidden; padding: 0 40px 0 20px;}
					#footer section + section {background: url(footer-bottom-bg.png) right bottom no-repeat; bottom: -3px; height: 100%; margin: 0 -3px 0 -470px; padding: 0 3px 0 40px; position: absolute; right: 0; width: 330px;}
	
	
/* 
		3. Header -----------------------------------------------------------------------------------------------------
*/

#logo {background: url(logo-bg.gif) 0 0 no-repeat; font-size: 20px; height: 127px; padding: 15px 19px 0 19px; position: absolute; top: 0; left: -1px; width: 511px;}
#logo a {background: url(logo-txt-bg.png) 0 0 no-repeat; color: #fff; display: block; margin: 0 18px 0 0;}
#logo a:hover, #logo a:focus {background-position: -63px 0;}
#logo a, #logo img {float: left;}

#mainNavigation {position: absolute; right: 23px; top: 9px;}
#mainNavigation li {display: block; float: left; font-size: 14px; height: 51px; line-height: 1.2; margin: 0; padding: 0; text-align: center; width: 104px;}
#mainNavigation li a, #mainNavigation li strong {background: url(navigation-bg.png) 0 0 no-repeat; display: block; padding: 17px 0;}
#mainNavigation li a {background-position: -104px 0; color: #fff; text-decoration: none;}
#mainNavigation li a:hover, #mainNavigation li a:focus  {background-position: -208px 0;}

/* 
		4. Content -----------------------------------------------------------------------------------------------------
*/

/* Main content area */
h1 {color: #eec60d; line-height: 1.1; padding: 26px 0 0 117px;}
h1 span {display: block; font-size: 20px;}
.ingress {font-size: 14px; padding: 20px 0;}

h2 {background: url(asterisk.png) 0 11px no-repeat; color: #6c6c6c; padding: 10px 0 10px 30px;}
h3 {padding: 5px 0 5px 0;}
h2 + h3 {padding: 0 0 5px 0;}
p {padding: 0 0 20px 0;}
ol, ul {padding: 0 0 15px 15px;}
p + ul {margin: -15px 0 0 0;}
li {padding: 0 0 5px 0;}

#fb-btn {margin: 10px 0 0 0;}

/* Featured content area */
#featured-content h2 {background: none; color: #eec60d; padding: 15px 40px 0 20px;}
#featured-content h3 {padding: 0 40px 5px 20px;}
#featured-content p {padding: 0 40px 15px 20px;}
#featured-content h2:first-child + p {margin: -68px 0 0 0;}
#featured-content ul {list-style-type: none; margin: 0; padding: 0 40px 10px 20px;}
#featured-content .vcard {list-style-type: disc; padding: 0 40px 10px 35px;}
#featured-content .links a {text-decoration: none;}
#featured-content .links a span {text-decoration: underline;}
#featured-content .links a:hover span, #featured-content .links a:focus span {text-decoration: none;}
#featured-content iframe {margin: 0 0 0 20px;}

#featured-work {margin: -53px 0 0 0; padding: 0 0 10px 20px;}
#featured-work a {color: #000; font-size: 12px; display: block; text-decoration: none; width: 270px;}
#featured-work img {border: #6c6c6c solid 1px; background: #fff; display: block; margin: 0 0 -10px 0; padding: 1px;}
#featured-work a:hover img, #featured-work a:focus img {background: #eec60d;}


/* Gallery */
#gallery-nav {width: 100%;}
#gallery-nav + h2 {background: none; color: #000; font-size: 12px; font-weight: bold; padding: 5px 0 5px 0;}
#gallery-nav ul {float: left; list-style-type: none; padding: 0;}
#gallery-nav li {float: left; line-height: 1.2; margin: 0 32px 30px 0; overflow: hidden; padding: 5px; width: 249px;}
#gallery-nav a {text-decoration: none;}
#gallery-nav a:hover img, #gallery-nav a:focus img {background: #EEC60D;}
#gallery-nav img {
	border: #6c6c6c solid 1px; display: block; float: left; height: 74px; padding: 1px; width: 245px;
    -moz-box-shadow: 0px 0px 5px #6c6c6c;
  	-webkit-box-shadow: 0px 0px 5px #6c6c6c;
    box-shadow: 0px 0px 5px #6c6c6c;
}
  	
#gallery-nav span {background: #fff; cursor: pointer; display: block; float: left; line-height: 1; margin: -19px 0 0 2px; opacity: 0.8; padding: 1px 2px 2px 2px; width: 241px;}
#gallery-nav a:hover span, #gallery-nav a:focus span {opacity: 1.0;}

/* 
		5. Footer -----------------------------------------------------------------------------------------------------
*/
#footer section div {float: left; height: 100%; width: 50%;}
#footer section div:first-child {background: url(footer-content-bg.png) 89% 162px no-repeat;}
#footer h2 {background: none; color: #fff; margin: 128px 0 5px 0; padding: 0;}
#footer p {color: #fff; padding: 0 0 20px 0;}
#footer section div:first-child p {padding: 0 25% 20px 0;}
#footer ul {list-style-type: none; padding: 0;}
#footer a {color: #fff;}
#footer a {text-decoration: none;}
#footer a span {text-decoration: underline;}
#footer a:hover span, #footer span {text-decoration: none;}

#flickrphotos li {display: inline; float: left; padding: 0; list-style-type: none;}
#flickrphotos li:nth-child(6) {clear: left;}
#flickrphotos img {
	border: #fff solid 2px; margin: 0 10px 10px 0;
    -moz-box-shadow: 0px 0px 5px #222;
  	-webkit-box-shadow: 0px 0px 5px #222;
    box-shadow: 0px 0px 5px #222;	
	-moz-transform: rotate(-2.0deg); 
	-o-transform: rotate(-2.0deg); 
	-webkit-transform: rotate(-2.0deg); 
	transform: rotate(-2.0deg);}
	
#flickrphotos a:hover img, #flickrphotos a:focus img	{
	-moz-transform: rotate(0.0deg); 
	-o-transform: rotate(0.0deg); 
	-webkit-transform: rotate(0.0deg); 
	transform: rotate(0.0deg);
}
	
#flickrphotos a:hover img, #flickrphotos a:focus img {background: #eec60d;}

#footer section + section h2 {margin: 128px 40px 5px 20px; padding: 0;}
#photolink img {margin: -11px 0 0 0;}
#photolink {
	border: #fff solid 2px; color: #000; display: block; height: 132px; margin: 0 0 0 20px; text-decoration: none; width: 266px;
	-moz-transform: rotate(-2.0deg); 
	-o-transform: rotate(-2.0deg); 
	-webkit-transform: rotate(-2.0deg); 
	transform: rotate(-2.0deg);
}
#photolink:hover, #photolink:focus, #footer section + section h2:hover + #photolink {
	-moz-transform: rotate(0.0deg); 
	-o-transform: rotate(0.0deg); 
	-webkit-transform: rotate(0.0deg); 
	transform: rotate(0.0deg);
}	
	
#footer footer {clear: both; margin: 0 50px 0 0; position: relative; top: -30px; text-align: right;}
#footer footer a {border-left: #fff solid 1px; margin: 0 0 0 10px; padding: 0 0 0 10px; text-decoration: underline;}
#footer footer a:hover, #footer footer a:focus {text-decoration: none;}