/*
Original design: This is me (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/

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 Cabin, 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:Cabin, sans-serif;padding:0 2px 10px;}
h2{color:#333;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;}

#mainwrap{margin:0 auto;overflow:hidden;position:relative;width:640px;}
#cardstyle{background-color:#fff;border:1px solid #d4d4d4;height:320px;margin:125px auto 20px;overflow:hidden;padding:6px;position:relative;width:600px;}
#content{background-color:#fafafa;height:320px;overflow:hidden;position:relative;width:600px;}
#pagecontainer{position:relative;width:9999px;}
.section{float:left;height:275px;margin-right:50px;padding:0 10px 25px;position:relative;width:568px;}

#menuwrap{margin:0 auto;}
#iconmenu{bottom:0;clear:both;height:22px;left:180px;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;}

#start{height:188px;padding:20px 15px 30px;}
#start h1{color:#333;font:normal 56px Cabin, sans-serif;line-height:0.9em;margin:0;padding:10px 0;text-align:center;text-shadow:0 1px 0 #fff;}
p.tagline{color:#666;font-size:16px;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:1px solid #fff;box-shadow:1px 1px 0px #aaa;cursor:pointer;width:200px;margin-left:42px;}
.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;}

#cms ul{padding:2px 0;}
#cms li{display:block;float:left;height:46px;margin:0 14px 12px 0;overflow:hidden;width:252px;}
#cms li a{color:#666;display:block;float:left;height:32px;overflow:hidden;padding:0 0 3px;width:252px;}
#cms li a:hover,#social li a:focus{color:#333;text-decoration:none;}
#cms img{float:left;margin:0 16px 0 10px;}
#cms strong{color:#333;display:block;font-size:14px;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;}

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

body.inverted {background-color:#3f3f3f;}
body.inverted #cardstyle {background-color:#101010;border:1px solid #2a2a2a;}
body.inverted #bio img {border:3px solid #111;box-shadow:0px 0px 2px #000;}

label {
    float: left;
    margin: 11px 10px 0px 0px;
    width: 95px;
    text-align: right;
    font-size: 16px;
    color: #1f6474;
    font-weight:bold;
    font-family: 'Segoe UI Light', 'Segoe UI', Arial, Helvetica, sans-serif;;
}
input[type=text],input[type=password]{
    width: 250px;
    height: 25px;
    padding: 5px 10px 5px 10px;
    margin: 0 0 5px 0;
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-family: sans-serif;
    font-size: 12px;
    color: #000;
    border: 1px solid #82ccdd;
}
.placeholder {
    color: #123a44;
    font-size:12px;
}
input[type=text]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder{
    color: #123a44;
    font-size:12px;
}
input[type=text]:-moz-placeholder,input[type=password]:-moz-placeholder {
    color: #123a44;
    font-size:12px;
}
input[type=text]:focus,input[type=password]:focus {
    border: solid #1f6474 1px;
}
input[type=submit]{
    height: 35px;
    float: right;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-transform: capitalize;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    margin-right: 10px;
    margin-top:10px;
    color: #333;
    border: 1px solid #777;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background: -moz-linear-gradient(top, #fff, #ddd);
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image: -ms-linear-gradient(top, #fff, #ddd);
    background-image: -o-linear-gradient(top, #fff, #ddd);
    background-image: linear-gradient(top, #fff, #ddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#dddddd');
}
input[type=submit]:HOVER{
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(top, #eee, #ccc);
    background-image: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -ms-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(top, #eee, #ccc);
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    text-decoration: none;
}
.bubble {
    background: #fff;
    clear: both;
    margin: 0px auto;
    width: 350px;
    position: relative;
    /*rounded corners and box shadows*/
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -khtml-border-radius: 5px;
    -khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    overflow: visible;
}
.loginForm{
    margin-bottom:10px;
    background-color: #eaeaea;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    width: 300px;
    position: relative;
    z-index: 2;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    height:200px;
    left: -16px;
}
.loginFormafter {
    position: relative;
    height: 0;
    width: 0;
    left: -16px;
    top: 0px;
    border-width: 5px 8px;
    border-style: solid;
    border-color: transparent #555 #555 transparent;
    z-index: 1;
}
.bubble h2 {
    font-size: 30px;
    color: #123a44;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-bottom:solid 2px #82ccdd;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    font-family: 'Segoe UI Light', 'Segoe UI', Arial, Helvetica, sans-serif;;
    padding-bottom: 5px;
    font-weight:lighter;
}