@charset "utf-8";
/************************
Usman Bashir
http://creative-fuzon.com

Default Stylesheet
http://usmanbashir.com

Version: 1.4.5

Start Date & Time: 11-09-2009 - 07:59:00 PM
Last Build Date & Time: 09-12-2009 - 07:23:00 PM
************************/

/*
 CSS - Table
 
 1) General CSS Tags
 2) Layout
 3) Main Navigation Menu
 4) Pages
 5) Classes
 
 0) Misc CSS
*/


/* General CSS Tags */

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {
    font-family: 'Calluna Regular';
    src: url('http://usmanbashir.com/fonts/Calluna-Regular.eot');
    src: local('Calluna Regular'), local('Calluna-Regular'), url('http://usmanbashir.com/fonts/Calluna-Regular.woff') format('woff'), url('http://usmanbashir.com/fonts/Calluna-Regular.svg#Calluna-Regular') format('svg'), url('http://usmanbashir.com/fonts/Calluna-Regular.otf') format('opentype');
}

html, body { height: 100%; width: 100%; }

body, input, textarea, h1, h2, h3, h4, h5, h6 {
    font-family: Cambria, 'Book Antiqua', 'Palatino', 'Times', 'Times New Roman', serif; /* To be added: Georgia */
    font-size: 12pt;
}

body { background: #111 url('../images/background7.jpg') top left repeat; }

a { background-color: #fff; color: #333; font-style: italic; }

a:hover { color: #ea872c; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p {
    background-color: #fff;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 4px;
}

h1 a {
    font-family: Cambria, 'Calluna Regular', Georgia, 'Times', 'Times New Roman', serif;
    font-size: 22pt;
    font-style: normal;
    text-decoration: none;
}

input, textarea { outline: 0 none; }

p { font-weight: normal; }

p a { color: #555; font-style: normal; }

strong { font-weight: bold; }

img { border: 4px solid #ea872c; float: right; }


/* Layout */

a#download-vCard, 
#twitter, 
#facebook, 
#tumblr, 
#linkedin, 
#lastfm, 
#friendfeed, 
#google-reader, 
#e-mail, 
#tel, 
#skype, 
#google-talk, 
#windows-live, 
#contact-me .work, 
#contact-me .vCard { background: url('../images/icons/sprites.png') -9999px -9999px no-repeat; }

#bookmark {
    background-color: #fff;
    padding: 4px 6px;
    position: fixed;
    right: 20px;
    top: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
}

#nav-misc {
    background-color: #fff;
    padding: 4px 0px;
    position: fixed;
    left: 20px;
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
}

#nav-misc li { border-right: 1px solid #aaa; float: left; padding: 0 10px; }

#nav-misc li:last-child { border-right: 0 none; }

#push { height: 50%; margin-bottom: -200px; }

#page-wrap {
    border: 5px solid #fff;
    margin: auto;
    position: relative;
    height: 400px;
    width: 400px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius: 0 10px 10px 10px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

#transparency {
    background-color: #fff;
    height: 100%;
    opacity: 0.3;
    width: 100%;
}

#hcard-Usman-Bashir {
    color: #000;
    padding: 5px;
    position: absolute;
    top: 0;
    width: 390px;
}

a#download-vCard {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: -6px -6px;
    color: #fff;
    height: 24px;
    margin: -45px 6px 0 0;
    overflow: hidden;
    padding: 4px;
    width: 24px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

a#download-vCard:hover {
    background-color: #ea872c;
    width: 121px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

a#download-vCard:hover span { display: block; width: 999px; }

a#download-vCard span { display: none; font-size: 10pt; margin: 3px 0 0 28px; }

#hcard-Usman-Bashir #content { line-height: 15pt; overflow: hidden; }

#hcard-Usman-Bashir #content,
#about-me,
#networks,
#contact-me,
#colophon { height: 344px; }

/* Main Navigation Menu */

#nav ol,
#website-colophon { float: right; }

#nav ol li,
#website-colophon li { float: left; margin: 5px; }

#nav ol li a,
#website-colophon li a {
    border: 1px solid #fff;
    border-top: 0 none;
    padding: 5px 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

#nav ol li a:hover,
#nav li.current a,
#website-colophon li a:hover {
    background-color: #333;
    border: 4px solid #fff;
    color: #fff;
    text-decoration: none;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
    -moz-border-radius: 0 10px 0 10px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 0;
}

#nav ol li a:hover,
#website-colophon li a:hover { color: #e25e00; }


/* Pages */

/* About Me */

#about-me #skills { background-color: #fff; height: 274px; }

#about-me #skills p { margin-bottom: -4px; }

#about-me #skills ul { padding-left: 4px; }

#about-me #skills li strong {
    clear: both;
    display: block;
    padding-bottom: 4px;
    padding-top: 12px;
}

#about-me #skills li { clear: both; }

#about-me #skills li li {
    background-color: #333;
    clear: none;
    color: #eee;
    float: left;
    margin: 2px;
    padding: 2px 4px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
}


/* Networks */

/* Networks & Contact Me */

#networks ul,
#contact-me ul { clear: both; }

#networks li,
#contact-me li { margin: 0 0 9px 0; }

#networks li a,
#contact-me li a {
    display: block;
    font-style: normal;
    margin-left: 40px;
    padding: 6px 5px;
    text-decoration: none;
    width: 340px;
}

#networks li a span,
#contact-me li a span {
    float: right;
    font-size: 8pt;
    font-style: italic;
    line-height: 10pt;
    padding-top: 3px;
    text-decoration: underline;
}

#networks[id=networks] li a span,
#selector[id=contact-me] li a span {
  padding-top: -13px;
}

#networks li a:hover,
#contact-me li a:hover {
    background-color: #333; color: #fff;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 5px;
}

#twitter { background-position: -10px -53px; }
#facebook { background-position: -10px -105px; }
#tumblr { background-position: -10px -157px; }
#linkedin { background-position: -10px -209px; }
#lastfm { background-position: -10px -261px; }
#friendfeed { background-position: -10px -313px; }
#google-reader { background-position: -10px -365px; }


/* Contact Me */

#e-mail { background-position: -4px -414px; }
#tel { background-position: -4px -458px; }
#skype { background-position: -10px -505px; }
#google-talk { background-position: -10px -557px; }
#windows-live { background-position: -10px -609px; }

#contact-me .work {
    background-position: -10px -658px;
    padding-left: 18px;
}

#contact-me .vCard {
    background-position: -10px -694px;
    margin-left: 2px;
    padding-left: 20px;
}


/* Colophon */

#website-colophon { float: left; }

#acknowledgment { font-size: 9pt; }


/* Classes */

.rounded-corner-items li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.drop-shadow {
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
}


/* Misc CSS */

.float-left { float: left; }
.float-right { float: right; }
.clear-float { clear: both; }