/*
Author: Art Sparrokei
Inspired by Alberto Calvo's work on Youzee (thankyou!)
*/

/* @group Preset */
/* @group Text elements */
body {
font: normal 16px/1.5em 'Tinos', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, {
font-weight: bold;
text-align:left;
font-family:'Helvetica Neue', Arial, sans-serif;;
}
strong {font-weight:bold;}

nav li,
nav li a {
display: inline-block;
color:#333;
}

ul, ol {
list-style: none;
}

em {
	font-style: italic;
}

small {
display: block;
}

/* @end */

/* @group Links */
a {
text-decoration: none;
color: #333;
-webkit-transition: color .12s linear;
-moz-transition: color .12s linear;
-o-transition: color .12s linear;
transition: color .12s linear;
}

.intro a:hover,
.intro a:focus { 
color: #999;
}
/* @end */


/* @group Layout */
html {
background: #fff;
color: #000;
}

body {
overflow-x: hidden;
}

@media screen and (max-width: 960px) {
body {
overflow-x: auto;
}
}

#wrap {
max-width: 960px;
min-width: 880px;
margin: 0 auto;
}

header,
section ol,
footer > hgroup {
font-family: "museo-sans-1","museo-sans-2", "Museo Sans", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
}

/* @group Header */
header {
text-align: center;
margin-bottom: 700px;
}

header#stories {
	margin-bottom: 0px;
}

header > .intro {
background: url(../images/art-himself.jpg) no-repeat bottom right;
	width: 475px;
	margin: 0 auto;
text-align:left;
padding-top: 240px;
	padding-bottom: 60px;
}

header > .intro h1 {
	display: inline-block;
	font-size: 20px;
	font-weight: 300;
	text-align: left;
	padding-bottom: 5px;
}

header > .intro h2 {
	font-size: 12px;
	margin:0 auto;
	font-weight: 400;
}

header > p {
font-size: 22px;
font-weight: 500;
}

header > a {
display: block;
width: 112px;
height: 112px;
margin: 62px auto 120px;
position: relative;
background: url(../images/start-btn-sprite.png) no-repeat left top;
text-indent: -9999px;
}

.ie7 header > a {
zoom: 1;
cursor: pointer !important;
}

header > a:active {
background-position: left -112px;
}

/* @end */

/* @group Main Navigation */

nav > ul#main {
	width: 960px;
	float: left;
	padding-right: 0px;
	padding-top: 20px;
	z-index: 999;
	height: 100px;
	padding-left: 4px;
}

nav > ul#main li {
	padding-right: 10px;
	font-size: 12px;
	float: left;
	padding-bottom:0px;
	line-height: 14px;
}

nav > ul#main li a {
	display: block;
}

nav > ul#main li#active a {
    border-bottom:1px dotted #999;
}

#pages ol,
#nav-block {
width: 960px;
position: absolute;
top: 495px;
}

#pages ol {
overflow: hidden;
}

#pages ol.sticky {
position: fixed;
top:40px;
z-index: 998;
color: #333;
font-family:'Helvetica Neue',Arial,sans-serif;
margin-top: 0;
}

#pages li {
float: left;
*filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
opacity: .4;
-webkit-transition: opacity .35s ease-out;
-moz-transition: opacity .35s ease-out;
-o-transition: opacity .35s ease-out;
transition: opacity .35s ease-out;
	padding-right: 2px;
	color: #333;
}

#pages li a {
	padding: 4px;
}

#pages li:last-child,
#pages li.last {
margin-right: 0;
}

#pages li:hover,
#pages li#active {
*filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;

-webkit-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;
transition: opacity .25s ease-in;
}

#pages li.ie7_class3,
#pages li.ie7_class13 {
*filter: alpha(opacity=40) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" !important;
}

#pages li.ie7_class3:hover,
#pages li.ie7_class13:hover,
#pages li.ie7_class3.active,
#pages li.ie7_class13.active {
*filter: alpha(opacity=100) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
}

#pages a {
display: block;
font-size: 11px;
font-weight: bold;
background: url(../images/nav-sprite.png) no-repeat left top;
zoom: 1;
overflow: hidden;
opacity: .5;

-webkit-transition: opacity .35s ease-out;
-moz-transition: opacity .35s ease-out;
-o-transition: opacity .35s ease-out;
transition: opacity .35s ease-out;
}

#pages a:hover,
#pages a:active,
#pages .active a,
#pages a:focus {
opacity: 1;

-webkit-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;
transition: opacity .25s ease-in;
}

#pages a:focus {
-webkit-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}

#pages a:active,
#pages .active a {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}

/* @end */

/* @group Sections */

section > #all {

}

section > #all p {
	padding-bottom: 15px;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	color: #333;
}

section > #all .target {
padding-top: 125px;
margin-bottom: 700px;
position:relative;
	-webkit-column-count: 2; -webkit-column-gap:40px;
-moz-column-count:2; -moz-column-gap:40px;
-o-column-count:2; -o-column-gap:40px;
width:100%;
}

section > ol > li:after {
content: "";
display: block;
position: absolute;
z-index: -1;
}

section > ol > li > a {
display: block;
padding: 164px 0 220px;
position: relative;
color: #999;
}

section > ol > li > a:hover,
section > ol > li > a:focus {
color: #999;
}

section > ol > li span {
display: block;
}

section > ol > li strong {
color: #fff;
font-style: italic;
font-weight: 500;
}

section > ol > li > a:hover strong {
color: #fff;
}

/* @end */