﻿
/*@import url(reset.css);*/

*
{
    margin: 0px;
    padding: 0px;
}

#body_home, #body_contact, #body_sub, #body_interior
{
   
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bodyHomeBg.jpg);
    background-repeat: repeat-x;
    text-align: center;
    font-family: Georgia, sans-serif;
    font-size: 16px;
    color: #37371C;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.4;
}


/*........PAGE width:1265p and CENTERED ....................*/

#page_home, #page_sub
{
    
    text-align: left;
    margin:0px auto;
    width: 1265px;
    background-image: url(../images/page_home.jpg);
    background-repeat: no-repeat;
}


/*.................................................................*/

#header
{
    margin: 0 auto;
    width: 936px;
}


h1
{
    position: relative;
    height: 103px;
    width: 100%;
    text-indent: -9999px;
}
h1 span
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
}

h2
{
    margin: 15px 0 10px 0;
    font-size: 27px;
    font-weight: 500;
    letter-spacing:.4px;
    line-height:35px;
    background-image: url(../images/H2.png);
    background-repeat: repeat-x;
    color: #984a1b;
    -webkit-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
   
   
}



#home_content
{
    margin: 8px auto 0 auto;
    width: 100%;
    background-image: url(../images/content.jpg);
    background-repeat: repeat-y;
}




#introduction /*.....White Right Side ..............*/
{
    margin: 0px 0px 0px 80px;
    padding-top:15px;
    width: 570px;
    float: left;
    position: relative;
}
#introduction a
{
   
    font-weight: normal;
    color: #993300;
    text-decoration: underline;
}

ul#FiveReasons
{
    height: 58px;
    width: 315px;
    position: relative;
    left:250px;
    top:5px;
    margin: 0px;
    padding: 0 0 10px 0;
    list-style-type: none;
}
ul#FiveReasons li
{
    width: 315px;
}
#FiveReasons li a
{
    position: absolute;
    top: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 58px;
    width:315px;
    background: url(../images/5reasons.jpg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

li#FiveReasons_link a:hover
{
    background-position: 0 -55px;
}

#services /*.....Green Left Side ..............*/
{
    margin: 20px 0px 0px 0px;
    width: 450px;
    float: left;
}

#services h3
{
    position: relative;
    height: 100px;
    width: 100%;
    text-indent: -9999px;
}
#services h3 span
{
    position: absolute;
    left: 164px;
    top: 0px;
    width: 100%;
    background-image: url(../images/services.jpg);
    background-repeat: no-repeat;
    height: 100px;
}

p span
{
    font-weight: bolder;
}


#main_image
{
    position: absolute;
}

#services_design
{
    margin: 0px 0px 0px -40px;
    height: 306px;
    width: 100%;
    background-image: url(../images/services_design.jpg);
    background-repeat: no-repeat;
    position: absolute;
}
#services_software
{
    margin: 0px 0px 0px -40px;
    height: 306px;
    width: 100%;
    background-image: url(../images/services_software.jpg);
    background-repeat: no-repeat;
    position: absolute;
}
#services_content
{
    margin: 0px 0px 0px -40px;
    height: 306px;
    width: 100%;
    background-image: url(../images/services_content.jpg);
    background-repeat: no-repeat;
    position: absolute;
}
#services_training
{
    margin: 0px 0px 0px -40px;
    height: 306px;
    width: 100%;
    background-image: url(../images/services_training.jpg);
    background-repeat: no-repeat;
    position: absolute;
}

#main_content
{
    margin-top: 330px;
}



#introduction h4
{
   
    width: 350px;
    line-height:35px;
    font-size: 27px;
    color: #984a1b;
    -webkit-box-shadow: 0 0px 1px rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    font-weight: 500;
    
}

.design h4
{
    padding: 32px 0px 0px 50px;
   
    
}
.software h4
{
    padding: 60px 0px 0px 50px;
   
}
.content h4, .training h4
{
    padding: 95px 0px 0px 50px;
    
}

.design p, .content p, .software p, .training p
{
    width: 350px;
    padding: 5px 0px 0px 50px;
}

#services h2 
{
    
    margin-left:180px;
    width:270px;
       
    
}
#services p 
{
    
    margin-left:180px;
    width:270px;
  
}

/*........Portfolio Flash  ....................*/
#flash
{
    
    margin-left: 163px;
    padding-top: 20px;
}



/*........FOOTER  ....................*/
#footer
{
    margin: 0px;
    clear: left;
    height: 90px;
    width:970px;
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
    position: relative;
    left: 158px;
   
}



/*...............MAIN MENU.....................*/
ul#nav
{
    height: 47px;
    width: 600px;
    position: relative;
    left: 330px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

ul#nav li
{
    float: left;
    width: 150px;
}


#nav li a
{
    position: absolute;
    top: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 46px;
    background: url(../images/menu.png) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}


li#nav_home a
{
    left: 0px;
    width: 128px;
    background-position: 0px 0px;
}

li#nav_serv a
{
    left: 128px;
    width: 148px;
    background-position: -128px 0;
}
li#nav_blog a
{
    left: 276px;
    width: 148px;
    background-position: -276px 0;
}
li#nav_cont a
{
    left: 424px;
    width: 168px;
    background-position: -424px 0;
}




li#nav_home a:hover
{
    background-position: 0 -46px;
}
li#nav_serv a:hover
{
    background-position: -128px -46px;
}
li#nav_blog a:hover
{
    background-position: -276px -46px;
}
li#nav_cont a:hover
{
    background-position: -424px -46px;
}




#body_home #nav_home a
{
    background-position: 0 -92px;
}
#body_interior #nav_serv a
{
    background-position: -128px -92px;
   
}
#body_blog li#nav_blog a
{
    background-position: -276px -92px;
}
#body_contact #nav_cont a
{
    background-position: -424px -92px;
}



#nav em
{
color: #FFFFFF;
text-align:center;
font-style:normal;
background: url(../images/hover.jpg) no-repeat scroll 0 0;
height:37px;
width:170px;
padding-top: 4px;
position:absolute;
top:-300px;
} 
#nav_home em
{
 left: -25px;
}
   
#nav_serv em {
left:120px;
}
#nav_blog em {
left:250px;
}
#nav_cont em {
left:410px;
}



/*................Vertical Menu Services .......................*/
ul#vertical_nav_serv
{
    width: 291px;
    height: 156px;
    position: relative;
    left: 164px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul#vertical_nav_serv li
{
    width: 291px;
}
#vertical_nav_serv li a
{
    position: absolute;
    top: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 156px;
    background: url(../images/vertical_menu_serv.jpg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}

li#Design_link a
{
    left: 0px;
    width: 291px;
    height: 39px;
    background-position: 0px 0px;
}

li#Programming_link a
{
    left: 0px;
    top: 39px;
    width: 291px;
    height: 39px;
    background-position: 0 -39px;
}
li#Content_link a
{
    left: 0px;
    top: 78px;
    width: 291px;
    height: 39px;
    background-position: 0 -78px;
}
li#Training_link a
{
    left: 0px;
    top: 117px;
    width: 291px;
    height: 39px;
    background-position: 0 -117px;
}




li#Design_link a:hover
{
    background-position: 0 -154px;
}
li#Programming_link a:hover
{
    background-position: 0 -193px;
}
li#Content_link a:hover
{
    background-position: 0 -232px;
}
li#Training_link a:hover
{
    background-position: 0 -271px;
}



/*...............VERTICAL.MENU HOME.....................*/
ul#vertical_nav
{
    height: 243px;
    width: 297px;
    position: relative;
    left: 158px;
    top: 60px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul#vertical_nav li
{
    width: 297px;
    
}
#vertical_nav li a
{
    position: absolute;
    top: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 243px;
    background: url(../images/vertical_menu.jpg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}




li#portfolio_link a
{
    left: 0px;
    width: 297px;
    height: 80px;
    background-position: 0px 0px;
}

li#quote_link a
{
    left: 0px;
    top: 79px;
    width: 297px;
    height: 80px;
    background-position: 0 -80px;
}
li#people_link a
{
    left: 0px;
    top: 158px;
    width: 297px;
    height: 80px;
    background-position: 0 -160px;
}





li#portfolio_link a:hover
{
    background-position: 0 -244px;
}
li#quote_link a:hover
{
    background-position: 0 -323px;
}
li#people_link a:hover
{
    background-position: 0 -403px;
}



/*...............VERTICAL.MENU PORTFOLIO.....................*/

ul#vertical_nav_p
{
    height: 246px;
    width: 292px;
    position: relative;
    left: 163px;
    top: 20px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul#vertical_nav_p li
{
    width: 292px;
     
}
#vertical_nav_p li a
{
    position: absolute;
    top: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 246px;
    background: url(../images/vertical_menu_p.jpg) no-repeat;
    overflow: hidden;
    text-indent: -9999px;
}




li#WhyUs_link a
{
    left: 0px;
    width: 292px;
    height: 80px;
    background-position: 0px 0px;
}

li#What_link a
{
    left: 0px;
    top: 80px;
    width: 292px;
    height: 80px;
    background-position: 0 -80px;
}

li#Redesign_link a
{
    left: 0px;
    top: 162px;
    width: 292px;
    height: 80px;
    background-position: 0 -162px;
}




li#WhyUs_link a:hover
{
    background-position: 0 -248px;
}
li#What_link a:hover
{
    background-position: 0 -327px;
}

li#Redesign_link a:hover
{
    background-position: 0 -408px;
}




/*................Contact Form.....................*/



fieldset
{
    border-style: none;
    position: relative;
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
    float: left;
    clear: both;
   
   
}
fieldset ol
{
    padding: 10px;
    list-style: none;
}
fieldset li
{
    padding: 8px;
    width: 100%;
    float: left;
    clear: left;
}
legend
{
    position: relative;
    left: 10px;
    top: 10px;
    color: #800000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
legendspan
{
    margin-top: 10px;
}


label
{
    display: block;
    float: left;
    width: 150px;
    margin-right: 15px;
}
.Submit_btn
{
    border-style: solid;
    border-width: 1px 1px 2px 2px;
    border-color: #AA5628 #70381B #70381B #AA5628;
    background-color: #954A23;
    display: inline-block;
    padding: 6px 45px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 2px rgba(0,0,0,0.5);
    position: relative;
    cursor: pointer;
    font-family: Georgia;
    font-size: 17px;
    left: 382px;
}
.Submit_btn:hover
{
    background-color: #733415;
}




/*...............VERTICAL INFO PANEL.....................*/

.panel_wrapper
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: url(../images/panelwraper.png);
    width: 100%;
    height: 1000px;
    display:none;
   
}

.panel
{
    position: absolute;
    top: 265px;
    right: 0;
    display: none;
    z-index: 999;
    background: #712c03;
    border: 5px solid #FFFFFF;
    width: 330px;
    height: auto;
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    padding: 35px 30px 30px 30px;
    filter: alpha(opacity=80);
    opacity: .80;
}

.panel p
{
    margin: 0 0 15px 0;
    padding: 0;
    color: #FFFFFF;
    text-align:left;
}
.panel h3
{
    margin: 0 0 15px 0;
    padding: 0;
    color: #FFFFFF;
    text-shadow: 0 -1px 2px rgba(0,0,0,0.9);
    font-size: 20px;
}
.panel a, .panel a:visited
{
    margin:0;
    padding: 20px 0 0 0;
    color: #FFFFFF;
    text-decoration: underline;
    text-shadow: 0 -1px 2px rgba(0,0,0,0.9);
    font-weight: 500;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger
{
    position: absolute;
    text-decoration: none;
    top: 230px;
    right: 0;
    z-index: 99999;
    background-image: url(../images/featured.png);
    background-repeat: no-repeat;
    width:48px;
    height:211px;
    overflow: hidden;
    text-indent: -9999px;
}

a.trigger:hover
{
    background: url(../images/featured_h.png) no-repeat;

    
   
}

a.active.trigger {
    background: url(../images/featured_a.png) no-repeat;
   
  
   
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft
{
    float: left;
    width: 60%;
    line-height: 22px;

}

.colright{
float: right;
padding:40px 0 0 5px;
width: 38%;
line-height: 22px;
}

/*....................Light Box Effect-PORTFOLIO.........................*/
#gallery {
		
		padding: 40px 0 30px 35px;
		margin-left:-50px;
		width: 630px;
		background-image: url(../photos/BG.jpg);
		background-repeat: no-repeat;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline;  }
	#gallery ul img {border:hidden;
	   margin: 3px 5px 0 5px;
	
	}
	#gallery ul a:hover img {
		
	}
	#gallery ul a:hover {}

#lightbox-image-details-caption a
{
    font-size: 14px;
    margin: 0 0 10px 8px;
    color: #828282;
    font-family: georgia;
    border-style: solid;
    border-width: 1px;
    border-color: #DBDBDB #DBDBDB #C0C0C0 #C0C0C0;
    background-color: #FFFFFF;
    display: inline-block;
    padding: 5px 25px;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#lightbox-image-details-caption a:hover
{
    color: #858585;
    background-color: #EFEFEF;
}