/*
ProFolio vcard
Copyrights- istoredesigns.com - PremiumFreebies.eu
made by: Oussama Afellad

July - 2011
*/

@import "reset.css";

/*----------------------------------General Styles----------------------------------*/
body{font-size:11px;font-family:"Lucida Grande",Verdana,sans-serif;background:#000 url(../images/vcard/wrapper.jpg) center}
a{color:#6aa2c5}
p{padding:10px 15px 0 0;color:#777;text-shadow:1px 1px 1px #fff;line-height:16px}
p img{background:#eee; border:5px solid #e6e6e6; float:left;margin:0 10px 10px 0}
h1{color:#555;font-size:26px;font-weight:normal;text-shadow:1px 1px 1px #fff;margin-bottom:10px}
h2{color:#636363;font-size:19px;font-weight:normal;text-shadow:1px 1px 1px #fff;padding:0;margin-bottom:15px}
ul,ol{margin-top:10px}
ul li,ol li{padding:5px 0 5px 0;color:#777;text-shadow:1px 1px 1px #fff;list-style:square inside}
ol li{list-style-type:lower-alpha}
li span{display:block}
.li-moreinfo{padding:5px 0 5px 0;color:#777;text-shadow:1px 1px 1px #fff;list-style:none}
hr{height:2px;border:none;background:url(../images/vcard/hr.gif) repeat-x;margin:0 30px}
hr.spacer{clear:both;height:25px;background:none}
input{font-family:Arial;padding:8px 0 8px 5px;margin:0 0 10px 0;width:420px;background:#fff;border:1px solid #dbdbdb;color:#999;font-size:13px;display:block;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
textarea{font-family:Arial;padding:8px 0 8px 5px;margin:0 0 10px 0;width:420px;background:#fff;border:1px solid #dbdbdb;color:#999;font-size:13px;display:block;height:45px;resize:none;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.clear{clear:both}
.clearpx{height:1px}
.spacer{height:15px}
.small{position:absolute;font-size:11px;color:#777;padding-top:4px}
.small a{color:#777;text-decoration:none}
.pagetitle{display:none}
.nopadding{padding:0}

/*----------------------------------Items----------------------------------*/
#wrapper{min-width:800px;min-height:500px}
#vcard{display:none;z-index:2;position:relative;margin:auto;width:800px;height:450px;background:url(../images/vcard/wrapper.png);-webkit-box-shadow:0 0 0px #000;-moz-box-shadow:0 0 0px #000;box-shadow:0 0 0px #000}
.main{float:right;width:480px;margin-right:20px;background:url(../images/vcard/sidebar.png) repeat-y;padding-left:40px}
.sidebar{float:left;margin:0px;width:170px;height:240px;}
.button{padding:6px 8px;border:1px solid #09a0ff;background:url(../images/vcard/button.gif) repeat-x;color:#fff;text-shadow:1px 1px 1px #1069a1;text-transform:uppercase;font-size:9px;font-weight:bold;text-decoration:none;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.button:hover{background-position-y:-24px;border-color:#1e8dff;text-shadow:1px 1px 1px #3284ff}

/*----------------------------------Header----------------------------------*/
#header{margin:30px 30px 0 30px;height:100px}
#header .profilepicture{float:left}
#header .profilepicture img{width:80px;height:80px}
#header #logo{float:left;text-indent:-9999px;background:url(../images/vcard/logot.png);margin:7px 0 0 20px;width:300px;height:80px}
#header ul#menu{float:right;height:45px;margin:14px 20px 0 0;padding:0 15px 0 0;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
#header ul#menu li{float:left;padding:16px 0 0 15px;font-weight:bold;font-size:13px;text-transform:uppercase;color:#999;text-shadow:1px 1px 1px #fff;list-style:none}
#header ul#menu li a{color:#999;text-decoration:none}
#header ul#menu li a:hover{color:#555; border-bottom:2px solid #e3e3e3; border-margin:10px;}
#header ul#menu li.active a{color:#555;}

/*----------------------------------Content----------------------------------*/
#content{position:relative;margin:25px 30px 0 50px;height:240px;overflow:hidden}
#scroller{position:relative;height:240px}
#scroller .contentitem{width:710px;height:240px;float:left;display:none;margin-right:30px}

/*----------------------------------Skills----------------------------------*/
ul.skills{margin:10px 0 0 0}
ul.skills li{padding:15px 10px 14px 0;border-bottom:1px solid #ddd;color:#888;text-shadow:1px 1px 1px #fff;list-style:none}
ul.skills li:last-child{border-bottom:none}
ul.skills li .topic{float:left;width:160px;font-weight:bold;color:#777;font-size:14px;text-shadow:1px 1px 1px #fff;height:7px}
ul.skills li .stars{float:left;width:120px}

/*----------------------------------Work----------------------------------*/
#workmask{
    width:710px;
    height:210px;
    position:relative;
    margin-top:25px;
    overflow:hidden
}

#workscroller{
    width:710px;
    position:absolute;
    margin-top:0
}
.work-item-preview {
    display:block;
    background:url(../images/vcard/bg-fade.png) no-repeat center center;
}
ul.work{margin-top:20}
ul.work a{color:#4d4d4d}

ul.work li{
    padding:0;
    position:relative;
    float:left;
    display:block;
    list-style:none;
    width:130px;
    height:180px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    background:url(../images/vcard/workbg.png);
    overflow:hidden
}
ul.work li a{
    text-decoration:none
    }
ul.work li.last{
    margin:0 0 0 0
    }
ul.work li .worktitle{
    font-family:Verdana;
    position:relative;
    margin:-100px 0 0 0;
    margin: 0 0 0 0;
    text-align:center;
    padding:7px 7px 7px 7px;
    width:116px;
    height:16px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background:#dedede;
    font-weight:bold;
    font-size:11px;
    text-transform:uppercase;
    list-style:none
}
ul.work li img{
    width:130px;
    height:180px;
    overflow:hidden;
}
ul.navigation
{
    float:right;
   margin:0px 0 5px 0
}
ul.navigation li{
    float:left;
    margin-left:5px;
    padding:3px 5px 3px 6px;
    background:#ddd;
    color:#777;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border-radius:3px; 
    list-style:none; 
    cursor:pointer
}

ul.navigation li.active
{
    background:#ccc;
    color:#555;
    text-shadow:1px 1px 1px #eee;
    border:none;
    padding:3px 6px 4px 6px
}
ul.navigation li:hover{background:#ccc;border:none;padding:3px 6px 4px 6px}

/*----------------------------------Networks----------------------------------*/
ul.networks li{float:left;width:254px;height:138px;padding:15px 25px 15px 0;list-style:none;cursor:pointer}
ul.networks .last{width:186px}
ul.networks li a{text-decoration:none}
ul.networks li .background{width:210px;height:166px;background:url(../images/vcard/networksbg.png);position:absolute;display:none}
ul.networks li .content{position:absolute;display:block;z-index:2;margin:3px 0 0 3px}
ul.networks li img{float:left;padding-right:8px;width:107px;height:37px;border:0}
ul.networks li .title{float:left}
ul.networks li .title .sname{color:#555;font-size:15px;text-shadow:1px 1px 1px #fff;height:7px;font-stretch:expanded}
ul.networks li .title .surl{width:200px;height:100px;clear:both;color:#888;font-size:11px;margin:0;padding:0 0 0 0;text-align:justify;text-shadow:1px 1px 1px #fff}
ul.networks li p{color:#999;font-size:11px;margin:0;padding:0}

/*----------------------------------Contact----------------------------------*/
.contact .sendbutton{float:right;width:auto;padding:4px 20px;background:#cfcfcf;color:#858585;text-shadow:1px 1px 1px #fff;border:none;text-transform:uppercase;font-weight:bold;font-size:10px;cursor:pointer}
.contact .error{background:#feeded;border-color:#fcd5d5}
#email_form{margin-top:25px;width:427px}
#email_send{margin-top:25px;width:427px;display:none}