/*
Original design: This is me (dark) (v1.2 - Sep 12, 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:#fafafa;color:#646464;font:12px/16px Raleway, Helvetica, Arial, sans-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:Nobile, Helvetica, Arial, sans-serif;font-size: 12px;padding:0 2px 10px;}
h2{color:#333;font:24px Raleway, Helvetica, Arial, sans-serif;padding:6px 0 10px;font-weight:400;}
h3 {color:#333;font:18px Raleway, Helvetica, Arial, sans-serif;padding: 0 0 10px;font-weight:400;}
h4 {color:#333;font:18px Raleway, Helvetica, Arial, sans-serif;padding: 0 0 0 0;margin-top:-6px;font-weight:400;}
.left{float:left;margin:0 15px 5px 0;}
.right{float:right;margin:0 0 5px 15px;clear:right;}

.center{float:center;margin: 15px;}
.tab{text-indent:50px;}
.italic{font:Nobile:400italic;font-style: italic; font-weight: 400;}
.red{color: #a92f41;}

.line{border-bottom: solid 2px #ccc;height: 9px;line-height: 20px;text-align: left;position: relative;margin:5px 0 10px;}
.redline{border-bottom: solid 2px #a92f41;height: 9px;line-height: 20px;text-align: left;position: relative;margin:5px 0 10px;}
.linetext{background-color: #181818;display: inline;padding: 0 10px 0 0;}

#mainwrap{margin:0 auto;overflow:hidden;position:relative;width:940px;}
#cardstyle{background-color:#fff;border:1px solid #d4d4d4;height:450px;margin:125px auto 20px;overflow:hidden;padding:6px;position:relative;width:900px;}
#content{background-color:#fafafa;height:450px;overflow:hidden;position:relative;width:900px;}
#pagecontainer{position:relative;width:99999px;}
.section{float:left;height:425px;margin-right:50px;padding:0 10px 25px;position:relative;width:868px;}

#menuwrap{margin:0 auto;}
#iconmenu{bottom:0;clear:both;height:22px;left:360px;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.4}
#iconmenu li img{padding:0 10px;}
#iconmenu li a.selected,#iconmenu li a:hover,#iconmenu li a:focus{opacity:1;}

#home{height:188px;padding:80px 15px 30px;}
#home h1{color:#2e6dd1;font:normal 80px Raleway;font-weight:200;line-height:0.9em;margin:0;padding:10px 0;text-align:center;text-shadow:0 1px 0 #fff;}
.tagline{color:#666;font-size:20px;margin-left:250px;text-align:center;}
#quotecontainer{position:relative;
margin-top:100px;
  height: 150px;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 10px;
  /* box-blur */
 -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter:blur(5px);
 filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='false', ShadowOpacity='1.00');
 /* box gradient top to bottom */
background: -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 1%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(1%,rgba(255,255,255,0.15)), color-stop(70%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 1%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 1%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 1%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.15) 1%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
#quotes {margin:-125px 50px 0px 50px;padding:5px;font-size:14px;color:#aaa;position:relative;}
.textItem {position:absolute;display:none;text-align:center}

#bio img{border:3px solid #fff;box-shadow:1px 1px 0px #aaa;}

.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{font:12px Nobile, sans-serif;padding:2px 0;}
#social li{display:block;float:left;height:46px;margin:0 14px 12px 0;overflow:hidden;width:252px;}
#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:16px;font-weight:700;}

#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%;}
#footer a{color:#999;}

ul#links {font: 13px Nobile, sans-serif;line-height:180%;margin-left: 25px;}
ul#links li a:hover{text-shadow: 2px 3px 5px #e3e3e3;filter: dropshadow(color=#e3e3e3, offx=2, offy=3);text-decoration: none;}
.subtitle {color: #5b84ad; font-size:10px; vertical-align: middle;}
.spacer{font-size: 135%; vertical-align: middle;}

#works #col1 {margin-top: 5px;
	float: left;
	width: 30%;
	}
#works #col2 {margin-top: 5px;
	float: left;
	margin-left: 3%;
	width: 63%;
	}
.scorelinks {font: 16px Nobile, sans-serif;border-left:2px solid;border-color:#e3e3e3;padding-bottom:0px;text-align: right;}
.scorelinks a:link{line-height:180%;margin: 5px 25px 0px 25px;}
.scorelinks a:hover{text-shadow: 2px 3px 5px #e3e3e3;filter: dropshadow(color=#e3e3e3, offx=2, offy=3);text-decoration: none;}

.backbutton {position:absolute;float: left; bottom: 0;}	
.backbutton a:link{color: #5b84ad; font: 16px Nobile;}
.backbutton a:hover {text-shadow: 2px 3px 5px #e3e3e3;filter: dropshadow(color=#e3e3e3, offx=2, offy=3);text-decoration: none;}

#content-changer-container{width:100%; height:300px;}
#content-changer-container #content-changer-links{width:120px; display:block; float:right;}

#content-changer-links ul{list-style: none;}
#content-changer-links ul li{float:;}
#content-changer-links ul li{
    width:100px;
    display:block;
    margin:10px 0;
    padding:5px 20px;
	font: 13px Nobile, sans-serif;
    color:#eee;
    text-decoration:none;
	
}
#content-changer-links ul li:hover{text-shadow: 2px 3px 5px #e3e3e3;filter: dropshadow(color=#e3e3e3, offx=2, offy=3);text-decoration: none;}

#content-changer{
height: 300px;
overflow:hidden;
}
.hidden { display: none; }

#content-changer h3{color:#91c7a9;}
#content-changer p{color:#eee; margin-left:20px;}
#gradient {
    position:absolute;
	bottom:0;
    z-index:2;
    width: 100%;
    height:60px; /* adjust it to your needs */

    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 0%, rgba(24,24,24,0.8) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,24,24,0)), color-stop(70%,rgba(24,24,24,0.8)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 0%,rgba(24,24,24,0.8) 70%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 0%,rgba(24,24,24,0.8) 70%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 0%,rgba(24,24,24,0.8) 70%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 0%,rgba(24,24,24,0.8) 70%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00181818", endColorstr="#181818",GradientType=0 );
}


audio{
width: 300px;
margin-bottom:10px;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #5b84ad;
-webkit-box-shadow:  2px 2px 4px 0px #5b84ad;
box-shadow: 2px 2px 4px 0px #5b84ad;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}	

audio:hover 
{
-webkit-box-shadow: 15px 15px 20px rgba(255,255,255, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(255,255,255, 0.4);
box-shadow: 15px 15px 20px rgba(255,255,255, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

#pdf {
	width: 1000px;
	height: 800px;
	margin: 1em auto;
	border: 6px solid #91c7a9;
}
#pdf p {
   padding: 1em;
}
#pdf object {
   display: block;
   border: solid 1px #91c7a9;
}
	
	
/* 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:#1a1a1a;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 h3 {color:#91c7a9;}
body.inverted h4 {color:#91c7a9;}
body.inverted #home h1 {color:#ddd;text-shadow:0 1px 0 #111;}
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;}