/* ==|== primary styles =====================================================
   Author: Adil Hashem
   ========================================================================== */

html {
    overflow: hidden;
}

html body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    min-width: 980px;
    color: #333333;
    font-family: 'Amaranth', sans-serif;
    font-size: 16px;
}

#wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-width: 980px;
    position: absolute;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

section {
    height: 90%;
    margin: 0;
    position: relative;
    overflow: hidden;
    min-height: 500px !important;
}

.page-container {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    height: 100%;
}

h2 {
    font-size: 46px;
    font-family: 'SquareSlab', serif;
    padding: 20px 0;
    margin: 0;
    text-shadow: 0 0px 5px #999;
}


/* navigatoin helper */
.no-js .navigation-help {
    display: none;
}

.navigation-help {
    position: fixed;
    color: #cecece;
    background-color: #151515;
    padding: 20px 20px 10px;
    margin: 0 0 0 170px;
    width: 262px;
    left: 50%;
    z-index: 999;
}

.ie7 .navigation-help { 
    width: 282px;
}

.navigation-help span {
    display: block;
    float: left;
}

.navigation-help .left, .navigation-help .up, .navigation-help .down, .navigation-help .right {
    background-image: url('../img/sprite.png');
    width: 12px;
    height: 12px;
}

.navigation-help .left {
    background-position: 0 -74px;
    margin: 5px 1px 0 10px;
}

.navigation-help .up {
    background-position: -13px -61px;
    margin: -8px 1px 0 0;
}

.navigation-help .down {
    background-position: -13px -74px;
    margin: 5px 1px 0 -13px;
}

.navigation-help .right {
    background-position: -26px -74px;
    margin: 5px 10px 0 0;
}

.navigation-help .scroll {
    background-image: url('../img/sprite.png');
    background-position: -39px -61px;
    width: 19px;
    height: 25px;
    margin: -8px 10px 0;
}

.navigation-help .swipe {
    background-image: url('../img/sprite.png');
    background-position: -59px -61px;
    width: 40px;
    height: 34px;
    margin: -8px  0 0 10px;
}


/* #home */
#home {
    background: url('../img/bg-home.png');
}

#home header {
    background-color: #151515;
    padding: 20px;
    height: 60px;
}

h1 {
    font-size: 50px;
    background-image: url('../img/sprite.png');
    width: 960px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
}

.bottom-half {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 72%;
    width: 100%;
    overflow: hidden;
}

.intro {
    width: 960px;
    margin: 0 auto;
    font-family: 'SquareSlab', serif;
    font-size: 35px;
    color: #151515;
    text-shadow: 0 0px 5px #999;
    text-transform: uppercase;
    padding: 20px;
    line-height: 29px;
}

.intro p {
    margin: 0;
    text-align: center;
}

.intro p strong {
    color: #b3d340;
}

.about-me {
    width: 100%;
    height: 260px;
    position: absolute;
    bottom: 0;
    background: url('../img/bg-green.png');   
}

.bio {
    width: 960px;
    padding: 20px;
    margin: 0 auto;
    font-size: 18px;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    color: #151515;
}

.bio div {
    float: left;
    width: 720px;
}

.bio p {
    margin: 0 0 10px 0;
}

.bio img {
    border: 4px solid #80992a;
    margin: 16px 0 0 20px;
}


/* #work */
#work {
    background: url('../img/bg-work.png');    
}

#projects {
    position: absolute;
    left: 0;
    width: 5000px;
}

.project 
{
    background: #a0dd0b; 
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
    padding: 10px 0 0 0;
    margin: 10px;
    float: left;
}

h3 {
    margin: 0;
    padding: 0 0 6px 6px;
}

.project a {
    text-align: right;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    margin: 2px 4px 4px 0;
    color: #151515;
    text-decoration: none;
    display: block;
}

.project a:hover {
    color: #ffffff;
}

/* #contact */
#contact {
    background: url('../img/bg-contact.png');    
}

.contact-container {
    width: 100%;
    height: 430px;
    margin: -215px auto 0;
    position: absolute;
    top: 50%;
}

form {
    width: 60%;
    float: left;
}

label {
    width: 14%;
    height: 21px;
    padding: 9px;
    display: block;
    float: left;
    background-color: #151515;
    color: #a0dd0b;
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;
    -webkit-box-shadow:0 1px 0 #151515;
       -moz-box-shadow:0 1px 0 #151515;
            box-shadow:0 1px 0 #151515;
}

input, textarea {
    color: #151515;
    border: 0;
    margin: 0 0 20px 0;
    display: block;
    float: left;
    width: 74%;
    outline: none;
	background: #a0dd0b;
    background-color: #91c509;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#a0dd0b), to(#91c509));
    background-image: -moz-linear-gradient(top, #a0dd0b, #91c509);
    background-image: -ms-linear-gradient(top, #a0dd0b, #91c509);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a0dd0b), color-stop(100%, #91c509));
    background-image: -webkit-linear-gradient(top, #a0dd0b, #91c509);
    background-image: -o-linear-gradient(top, #a0dd0b, #91c509);
    background-image: linear-gradient(top, #a0dd0b, #91c509);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a0dd0b', endColorstr='#91c509', GradientType=0);
    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
    -webkit-box-shadow:0 1px 0 #151515;
       -moz-box-shadow:0 1px 0 #151515;
            box-shadow:0 1px 0 #151515;
}

input:focus, textarea:focus {
	background: #a0dd0b;
}

input {
    height: 30px;
    padding: 4px 20px 5px 20px; 
}

input::-webkit-input-placeholder  {
    color: #151515;
}

input:-moz-placeholder {
    color: #151515;
}

textarea {
    height: 230px; 
    padding: 12px 20px 0 20px; 
}

textarea::-webkit-input-placeholder  {
    color: #151515;
}

textarea:-moz-placeholder {
    color: #151515;
}

input[type=submit] {
    font-family: 'Amaranth',sans-serif;
    font-weight: bold;
    background: #151515 !important;
    color: #a0dd0b;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    width: 81.25%;
    height: 38px;
    text-align: right;
    padding-right: 20px;
    float: right;
    margin-right: 2%;
    filter: none;
}

.contact-info {
    width: 40%;
    float: right;
}

.info-bar {
    width: 100%;
    margin: 0 0 20px;
    padding-top: 0;
    background: none;
}

.info-bar h3{
    width: 18%;
    height: 22px;
    padding: 9px;
    float: left;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    background-color: #151515;
    color: #a0dd0b;
    -webkit-border-radius: 5px 0 0 5px;
       -moz-border-radius: 5px 0 0 5px;
            border-radius: 5px 0 0 5px;
}
.info-bar p {
    float: left;
    width: 74%;
    height: 22px;
    text-align: center;
    font-size: 24px;
    margin: 0;
    padding: 2px 9px 15px 0;
	background: #ffffff;
    -webkit-border-radius: 0 5px 5px 0;
       -moz-border-radius: 0 5px 5px 0;
            border-radius: 0 5px 5px 0;
}
.info-bar span {
    color: #91c509;
}

.info-bar p a.resume {
    background-image: url('../img/sprite.png');
    background-position: center -392px;
    padding-top: 4px;
}

.info-square {
    float: left;
    width: 180px;
    height: 180px;
    background-color: #ffffff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

.info-square h3 {
    display: none;
}

.info-square.left {
    margin-right: 20px;
}

.info-square a {
    display: block;
    width: 150px;
    height: 150px;
    margin: 15px;
    text-align: center;
    border: 0; 
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

.info-square a.twitter {
    background-image: url('../img/sprite.png');
    background-position: 0 -96px;
}

.info-square a.linkedin {
    background-image: url('../img/sprite.png');
    background-position: 0 -247px;
}

.alert-message {
    width: 55.5%;
    position: relative;
    padding: 7px 15px;
    margin: 20px auto;
    color: #404040;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.alert-message.error {
    background-color: #c43c35;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: linear-gradient(top, #ee5f5b, #c43c35);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: #c43c35 #c43c35 #882a25;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.alert-message.success {
    background-color: #57a957;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
    background-image: -moz-linear-gradient(top, #62c462, #57a957);
    background-image: -ms-linear-gradient(top, #62c462, #57a957);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
    background-image: -webkit-linear-gradient(top, #62c462, #57a957);
    background-image: -o-linear-gradient(top, #62c462, #57a957);
    background-image: linear-gradient(top, #62c462, #57a957);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: #57a957 #57a957 #3d773d;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.close {
    float: right;
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    line-height: 13.5px;
    text-shadow: 0 1px 0 #ffffff;
    cursor: pointer;
    filter: alpha(opacity=25);
    -khtml-opacity: 0.25;
      -moz-opacity: 0.25;
           opacity: 0.25;
}

.close:hover {
    color: #000000;
    text-decoration: none;
    filter: alpha(opacity=40);
    -khtml-opacity: 0.4;
      -moz-opacity: 0.4;
           opacity: 0.4;
}

.alert-message .close {
    font-family: Arial, sans-serif;
    line-height: 18px;
    margin-top: 1px;
    *margin-top: 0;
}

.alert-message p {
    color: #151515;
    margin: 0;
}