/*
Original design: This is me (dark) (v1.1 - March 13th 2012) - A free xhtml/css website template for andreasviklund.com.
For more information, see http://andreasviklund.com/templates/this-is-me-dark/

Includes:
jQuery from http://jquery.org/
Poptrox jQuery plugin by nodethirtythree: http://www.nodethirtythree.com/jquery_plugins.html
jQuery.ScrollTo and jQuery.LocalScroll by Ariel Flesler: http://flesler.blogspot.com/
Icons fom http://www.komodomedia.com/
*/

*{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;}
body{background-color:#000000;color:#ffffff;font:16px/20px; font-family: gatsbyflfbold, serif;}
ol,ul{list-style:none;list-style-image:none;list-style-position:outside;list-style-type:none;}
a img{border:none;}
a{color:#000;text-decoration:none;}
a:hover,a:focus{color:#666;text-decoration:underline;}
p{font-family:Cabin-Regular sans-serif;padding:0 2px 10px;}
h2{color:#ffffff;font:22px cabin, sans-serif;padding:6px 0 10px;}
.left{float:left;margin:0 15px 5px 0;}
.right{float:right;margin:0 0 5px 15px;}

@font-face {
    font-family: 'GatsbyFLFBold';
    src: url('fonts/GatsbyFLFBold.woff');
    src: url('fonts/GatsbyFLFBold.eot') format('embedded-opentype'),
         url('fonts/GatsbyFLFBold.woff2') format('woff2'),
         url('fonts/GatsbyFLFBold.woff') format('woff'),
         url('fonts/GatsbyFLFBold.ttf') format('truetype'),
         url('fonts/GatsbyFLFBold.svg#GatsbyFLFBold') format('svg');
font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cabin-Regular';
    src: url('fonts/Cabin-Regular.woff');
    src: url('fonts/Cabin-Regular.eot') format('embedded-opentype'),
         url('fonts/Cabin-Regular.woff2') format('woff2'),
         url('fonts/Cabin-Regular.woff') format('woff'),
         url('fonts/Cabin-Regular.ttf') format('truetype'),
         url('fonts/Cabin-Regular.svg#Cabin-Regular') format('svg');
font-weight: normal;
    font-style: normal;
}
#mainwrap{margin:0 auto;overflow:hidden;position:relative;width:1220px;}
#cardstyle{background-color:#101010;border:2px solid #1a1a1a;height:450px;margin:100px auto 20px;overflow:hidden;padding:6px;position:relative;width:800px;}
#content{;background-color:#000000;background-repeat:no-repeat;height:450px;overflow:hidden;background-position:right;position:relative;width:800px;}
#pagecontainer{position:relative;width:9999px;}
.section{float:left;height:275px;margin-right:50px;padding:0 10px 25px;position:relative;width:768px;}

#menuwrap{margin:0 auto;}
#iconmenu{bottom:0;clear:both;height:22px;left:280px;overflow:hidden;padding:8px 0 6px 10px;position:absolute;text-align:center;width:auto;z-index:100;}
#iconmenu li{display:block;float:left;}
#iconmenu li a{display:block;float:left;opacity:0.6}
#iconmenu li img{padding:0 10px;}
#iconmenu li a.selected,#iconmenu li a:hover,#iconmenu li a:focus{opacity:1;}

#start{height:188px;padding:10px 15px 30px;}
#start h1{color:#ffffff; font-family: "gatsbyFLFbold", Helvetica;line-height:0.9em;margin:0;padding:120px 50px 0px 50px;text-align:center;font-size:90px; text-shadow:0 1px 0 #fff;}
.tagline{color:#7d7d7d; font-family:"Cabin-Regular", sans-serif;font-size:20px;padding:0 200px 0 50px;text-align:center;}

#bio img{padding:0 0 10px 0}
#bio h1{color:#ffffff; font-family: "gatsbyflfbold", Helvetica;line-height:0.9em;margin:0;text-align:top-left;font-size:70px; text-shadow:0 1px 0 #fff;}
p.byline{color:#7d7d7d; font-family: "Cabin-Regular", sans-serif; font-size:15px}
p.bylineI{color:#7d7d7d; font-family: "Cabin-Regular", serif; font-size:15px}

#custom h1{color:#ffffff; font-family: "gatsbyflfbold", Helvetica;line-height:0.9em;margin:0;text-align:top-left;font-size:70px; text-shadow:0 1px 0 #fff;}

.poptroxactive{list-style:none;margin:0 auto;padding:0;width:100%;}
.poptroxactive li{float:left;height:110px;margin:0 30px 8px 0;}
.poptroxactive li img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;cursor:pointer;width:100px;}
.poptrox_popup{background:#fff;border-radius:12px;box-shadow:0px 0px 50px #111;padding:1em 1em 3em;position:relative;}
.poptrox_popup .loader{background:url('images/loader.gif') top center no-repeat;border-radius:8px;display:block;margin:55px 0 0;text-indent:-9999em;}
.poptrox_popup .caption{bottom:1em;left:1em;position:absolute;}
.poptrox_popup .closer{bottom:1em;position:absolute;right:1em;}

#social ul{padding:2px 0;}
#social li{display:block;float:left;height:96px;margin:0 14px 12px 0;overflow:hidden;width:300px;}
#social li a{color:#666;display:block;float:left;height:32px;overflow:hidden;padding:0 0 3px;width:252px;}
#social li a:hover,#social li a:focus{color:#333;text-decoration:none;}
#social img{float:left;margin:0 16px 0 10px;}
#social strong{color:#333;display:block;font-size:14px;font-weight:700;}
#social h1{color:#ffffff; font-family: "gatsbyflfbold", Helvetica;line-height:0.9em;margin:0;text-align:top-left;font-size:70px; text-shadow:0 1px 0 #fff;}
p.byline{color:#7d7d7d; font-family: "Cabin-Regular", sans-serif; font-size:15px}

#address{border-right:1px solid #ddd;float:left;margin-right:20px;padding:0 0 0 1px;width:240px;}
#address h3{color:#333;font-size:14px;font-weight:700;padding:6px 2px 0;}

#footer{color:#999;text-align:center;width:100%;opacity:0.4}
#footer a{color:#999;}

/* If you want to add styles for the custom page, you can do it by using the ID #custom, like this:
#custom h2{color:blue;}
#custom p{text-align:center;}
*/

/* Custom styles for inverting the default color scheme. See 
http://andreasviklund.com/learn/this-is-me-template-with-inverted-colorscheme/
for more information. */

body.inverted {background-color:#000000;color:#e0e0e0;}
body.inverted #cardstyle {background-color:#101010;border:1px solid #2a2a2a;}
body.inverted #content {background-color:#181818;}
body.inverted h2 {color:#eee;}
body.inverted #start h1 {color:#ffffff;text-shadow:0 1px 0 #aaa;}
body.inverted #bio img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted .poptroxactive li img {border:3px solid #111;box-shadow:0px 0px 2px #000;}
body.inverted .poptrox_popup{background-color:#222;}
body.inverted #social li a {color:#ddd;}
body.inverted #social strong {color:#eee;}
body.inverted #address h3 {color:#eee;}
body.inverted #address {border:0;}
body.inverted #footer, body.inverted #footer a {color:#777;}
body.inverted a {color:#ddd;}