/* 
    Document   : style
    Created on : Mar 1, 2009, 3:54:11 AM
    Author     : Sadiq Mohammed
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


html,body{background: url(../images/bodybg.jpg) top center repeat-y; margin: 0 auto;}
.CopperplateGothicLight {font-family:"Copperplate Gothic Light";}
.ArialRoundedMtBold {font-family:"Arial Rounded Mt Bold";}
.tahoma {font-family:"Tahoma";}

.color1 {color:#a1a0a0 }
.color2 {color:#ffffff }
.size_120 {font-size:120%;}
.size_110 {font-size:110%;}
.left{float:left}
.right{float:right}
.txt_left{text-align:left}

.bold{font-weight:bold;}

a:focus{outline:none}

h2{font-size:160%; font-weight:bold; padding:4px;}

#logo{text-align:center}
/**<<<Navigation**/
#nav{background:url(../images/navigationbg.png) no-repeat bottom center;height:104px;text-align:center;/* background-color:#ff0000; background-image:none;*/ font-size:0px;}
#nav img,#nav a img {border:none;margin:0px; padding:0px; margin:0px 0 0 0}

#nav a:link,#nav a:active,#nav a:visited,#nav a:hover{display:inline-block;border:0px solid #ffffff; margin:12px 0 0 0;color:#000}

#nav a:active#portfolio,#nav a:visited#portfolio,#nav a:link#portfolio{background:url(../images/portfolio.png) no-repeat; width:196px; height:58px;}
#nav a:hover#portfolio{background:url(../images/portfolio-active.png) no-repeat;}

#nav a:active#aboutus,#nav a:visited#aboutus,#nav a:link#aboutus{background:url(../images/aboutus.png) no-repeat; width:169px; height:58px;}
#nav a:hover#aboutus{background:url(../images/aboutus-active.png) no-repeat;}

#nav a:active#services,#nav a:visited#services,#nav a:link#services{background:url(../images/services.png) no-repeat; width:145px; height:58px;}
#nav a:hover#services{background:url(../images/services-active.png) no-repeat;}

#nav a:active#contact-us,#nav a:visited#contact-us,#nav a:link#contact-us{background:url(../images/contact-us.png) no-repeat; width:196px; height:58px;}
#nav a:hover#contact-us{background:url(../images/contact-us-active.png) no-repeat;}
#nav a.divider{background:url(../images/divider.png) no-repeat;height:58px; width:40px;cursor:default;}
/**Navigation>>>**/

#content{background:url(../images/container-bg.png) top center no-repeat; margin: 0 auto;  padding:0 0 0 2%;text-align:center;display:block; width:856px; min-height:580px;}

#left-block{float:left; width:360px;margin:0 3% ;}
#right-block{float:left;margin:0 2%}
#main-block{width:800px;margin:0 0; text-align:left;}


div.box{}
div.box div.bx-header{background:url(../images/t-h.png) top center no-repeat;height:11px; width:371px;}
div.box div.bx-content{background:url(../images/m-b.png) top center repeat-y;width:351px;color:#ffffff; padding:0 10px; text-align:left}
div.box div.bx-footer{background:url(../images/b-h.png) top center no-repeat;height:16px; width:371px;}
div.box div.bx-content p{padding:4px}

div.designbox{
	width:371px;
	text-align: center;
}
div.designbox div.bx-header{background:url(../images/designer-top-box.png) top center no-repeat;height:66px; width:371px;}
div.designbox div.bx-content{background:url(../images/designerbg-box.png) top center repeat-y;width:351px;color:#ffffff; padding:0 10px; text-align:left}
div.designbox div.bx-footer{background:url(../images/designer-bottom-box.png) top center no-repeat;height:61px; width:371px;}
div.designbox div.bx-content h2{font-size:140%;text-align:center;padding:12px;word-spacing:-0.1em;}
div.designbox div.bx-content h3{background:url(../images/phone-icon.png) no-repeat  100% 20%;font-size:260%;text-align:center;padding:12px;word-spacing:2em;font-weight:bold }
div.designbox div.bx-content p{padding:4px; }
div.designbox p{padding:4px;word-spacing:-0.1em;}


div.designbox2{width:371px;}
div.designbox2 div.bx-header{background:url(../images/designer-top-box2.png) top center no-repeat;height:66px; width:371px;}
div.designbox2 div.bx-content{width:351px;padding:0 10px; text-align:left}
div.designbox2 div.bx-footer{background:url(../images/designer-bottom-box2.png) top center no-repeat;height:61px; width:371px;}
div.designbox2 div.bx-content h2{font-size:140%;text-align:center;padding:12px;word-spacing:-0.1em;}
div.designbox2 div.bx-content h3{background:url(../images/phone-icon.png) no-repeat  100% 20%;font-size:260%;text-align:center;padding:12px;word-spacing:2em;font-weight:bold }
div.designbox2 div.bx-content p{padding:4px;text-align:center;}


div.designbox3 {width:360px;}
div.designbox3 div.bx-header{background:url(../images/box-header-3.png) top center no-repeat;height:10px; width:334px;}
div.designbox3 div.bx-content{background:url(../images/box-bg3.png) top center repeat-y;width:314px;padding:0 10px; text-align:left}
div.designbox3 div.bx-footer{background:url(../images/box-footer-3.png) top center no-repeat;height:10px; width:334px;}
div.designbox3 div.bx-content h2{font-size:140%;text-align:center;padding:12px;word-spacing:-0.1em;}
div.designbox3 div.bx-content h3{background:url(../images/phone-icon.png) no-repeat  100% 20%;font-size:260%;text-align:center;padding:12px;word-spacing:2em;font-weight:bold }
div.designbox3 div.bx-content p{padding:4px; }
div.designbox3 p{padding:4px;word-spacing:-0.1em;}


div.designbox4 {width:840px;margin:0 0 0 0%}

div.designbox4 div.bx-header{background:url(../images/designer-top-box2.png) top center no-repeat;height:66px; width:840px;}
div.designbox4 div.bx-content{background:url(../images/box-bg4.png) top center repeat-y;width:674px;padding:0 10px; text-align:left}
div.designbox4 div.bx-footer{background:url(../images/box-b-4.png) top center no-repeat;height:12px; width:694px;}
div.designbox4 h2 {position:relative;color:#ffffff; text-align:center;font-size:80%}





.clr{clear:both;}

input,textarea {width:100%;padding:5px;}
label{text-align:right;color:inherit; float:right}
.button{width:97px; height:35px;background:url(../images/submit.png) top center no-repeat;border:none; float:right; cursor:pointer; margin-top:10px;}
.button:focus{outline:none}
span.status{float:left}
label.error{float:left; color:#f2d3d3}

.carousel  {
    position: relative;
}

.carousel li {background:url(../images/placeholder.png) no-repeat;text-align:center; margin:10px 10px;width:145px; height:90px; padding-top:4px;}
.carousel li img {width:130px;height:80px;cursor:pointer;padding-top:2px;}


.carousel a{font-size: 100%;text-decoration: none;color: inherit;}

.carousel a.next, .carousel a.prev{
	position: absolute;
	width: 39px;
    height: 90px;
    display:block;
    float:left;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
}

.carousel a.next, .carousel a.prev
{
	filter:alpha(opacity=50);
}

.carousel a.next:hover, .carousel a.prev:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
   

}

.carousel a.prev
{
	left: 5px;
	top: 10px;
	background: url('../images/fleche1.png') no-repeat center left;
}

* html .carousel a.prev { background: url('../images/fleche1.gif') no-repeat center left; }

.carousel a.next
{
	right: -2px;
	top: 10px;
	background: url('../images/fleche2.png') no-repeat center right;
}

* html .carousel a.next { background: url('../images/fleche2.gif') no-repeat center right; }