/* 
    Document   : custom
    Created on : May 2, 2013, 1:25:27 PM
    Author     : nirmallamatitung
    Description:
        Purpose of the stylesheet follows.
*/
.wrapper{  margin: 2px auto; font-family: Helvetica; font-size: 13px;}
ul,li{ list-style: none; margin: 0;}

.navigation{ background: #7d7c81; color: #fff;  margin-bottom: 2px; line-height: 28px; overflow: hidden;}
.navigation ul{ width: 410px; margin: 0 auto;}
.navigation li{ display: inline;}
.navigation li a{ color: #fff; padding: 0 10px;}
.navigation li a.active,.navigation li a:hover{ color: #0d0d0e; text-decoration: none;}

#navigation select{ display: none;}


.header img{ display: block; margin-bottom: 2px;}

.content{ background: #7d7c81; padding: 25px; margin-bottom: 2px;}
.content .centerDiv{  margin: 0 auto;}
.content .centerDiv p{ color: #fff; margin-bottom: 10px;}
.home .content .centerDiv p{ text-align: center;}
.content .centerDiv p.more a{ color: #fff; padding: 0 5px; }
.content .centerDiv p.more{margin: 0;}
.content ul{ overflow: hidden; text-align: center;}
.content ul li{  margin-right: 30px; margin-bottom: 15px; width: 123px; display: inline-block;}
.content ul li.last{ }
.content ul li img{ display: block;}

.business li{ overflow: hidden; padding-bottom: 15px; border-bottom: 2px solid #fff; margin-bottom: 15px;}
.business li a{ text-decoration: underline; color: #fff; font-weight: bold; display: block; float: left; }
.business li a:hover{ text-decoration: none; }
.business li.last{ margin: 0; border: 0; padding: 0;}
.business li img{ display: block; float: left; margin-right: 15px;}
.business li p a{ display: inline }



@media(max-width: 767px){

    .business li a{
        float: none;
    }
    .business li p{
        width: 100%;
        margin-top: 1rem;
        text-align: left;
    }
}

@media(max-width: 480px){
    .business li p{
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }
}


em.error, em.success{ display: none;}

#contactForm ul li{ float: none;}

#contactForm { border: 2px solid #fff; padding: 10px; width: 290px; margin-left: 30px;}
#contactForm li{ margin: 0;}
#contactForm  label{ color: #fff; font-size: 13px;}

#contactForm input.submit{ background: none !important; color: #fff; font-family: helvetica; font-size: 13px; width: 50px; display: block; float: right; text-decoration: underline;}
#contactForm input.submit:hover{ text-decoration: none;}

input,textarea{ width: 279px; padding: 3px !important; border: 0!important; background: #bebec0!important; border-radius: 0!important;}

#contactForm label.error{ color: red; font-style: italic;}

.projectList {}
.projectList li a{ background: url(../img/links.jpg) no-repeat 0 0; width: 123px; height: 123px; display: block; text-indent: -999em;}
.projectList li a.cart{ background: url(../img/new/Cartwheel_Off.jpg) no-repeat center;}
.projectList li a.cart:hover{ background: url(../img/new/Cartwheel_On.jpg) no-repeat center;}


.projectList li a.ego{ background: url(../img/new/Ego_Off.jpg) no-repeat center; background-size: cover; }
.projectList li a.ego:hover{ background: url(../img/new/Ego_On.jpg) no-repeat center white; background-size: cover}


.projectList li a.corazon{ background: url(../img/new/Corazon_Off.jpg) no-repeat center; }
.projectList li a.corazon:hover{ background: url(../img/new/Corazon_On.jpg) no-repeat center white; }

.projectList li a.notescoffee{ background: url(../img/new/Notes_Off.jpg) no-repeat center; }
.projectList li a.notescoffee:hover{ background: url(../img/new/Notes_On.jpg) no-repeat center;}






.projectList li a.call{ background-position: -272px 0; }
.projectList li a.call:hover{ background-position: -272px -257px; }

.projectList li a.fifty{ background: url(../img/new/FiftyTwenty_Off.jpg) no-repeat; }
.projectList li a.fifty:hover{ background: url(../img/new/FiftyTwenty_On.jpg) no-repeat; }

.projectList li a.luke{ background: url(../img/new/LukeJohnson_Off.jpg) no-repeat; }
.projectList li a.luke:hover{ background: url(../img/new/LukeJohnson_On.jpg) no-repeat;}





.projectList li a.rocket{background: url(../img/roB.jpg) no-repeat;}
.projectList li a.rocket:hover{ background: url(../img/ro.jpg) no-repeat; }

.projectList li a.coal{ background: url(../img/coalB.jpg) no-repeat; }
.projectList li a.coal:hover{ background: url(../img/coal.jpg) no-repeat;}

.projectList li a.severn{ background-position: -272px -134px; }
.projectList li a.severn:hover{ background-position:-272px -391px; }

.projectList li a.leon{ background: url(../img/new/LEON_Off.jpg) no-repeat; }
.projectList li a.leon:hover{ background: url(../img/new/LEON_On.jpg) no-repeat; }

.projectList li a.spring{  background: url(../img/new/Springboard_Off2.jpg) no-repeat; }
.projectList li a.spring:hover{  background: url(../img/new/Springboard_On2.jpg) no-repeat; }


/*New projects*/
.projectList li a.redhot{ background: url(../img/redhotB.jpg) no-repeat; }
.projectList li a.redhot:hover{ background: url(../img/redhot.jpg) no-repeat; }

.projectList li a.pasti{background: url(../img/new/PatisserieValerie_Off.jpg) no-repeat center; }
.projectList li a.pasti:hover{background: url(../img/new/PatisserieValerie_On.jpg) no-repeat center; }

.projectList li a.ping{background: url(../img/new/PingPong_Off.jpg) no-repeat;}
.projectList li a.ping:hover{background: url(../img/new/PingPong_On.jpg) no-repeat; }

.projectList li a.lasala{background: url(../img/lasala.jpg) no-repeat;}
.projectList li a.lasala:hover{background: url(../img/lasala.jpg) no-repeat; }





.footer{ overflow: hidden;}
.footer p{ line-height: 28px; margin-bottom: 2px; text-align: center; background: #7d7c81;}
.footer p.info{ background: #cbcbcd; color: #7d7c81;}
.footer p.info a{ text-decoration: underline; color: #7d7c81;}
.footer p.info a:hover{ text-decoration: none;}
.footer p.copyright{ color: #fff;}
.footer a.twitter{ display: block; float: right;}




.theBusiness .centerDiv{
    width: 400px;
    margin: 0 auto;
}


.content ul.business li{
    display: block;
    width: auto;
    text-align: left
}


.contactPage .centerDiv{
    width: 400px;
    margin: 0 auto;
}

#contactForm ul li{
    width: 100%;
    text-align: left;
}