/* common */
*{padding:0;margin:0;}
img{border:0; margin:0;}
p{padding:0 0 25px 0; line-height: 18px; }
.clear{clear:both;}
.wrap { width: 922px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }
a { color: #1C62CC; text-decoration: none; }
a:hover { text-decoration: underline; }

/* BASE */
html { height: 100%; }
body { font-family: "Trebuchet MS",calibri,arial, verdana, helvetica, sans-serif; font-size: 85%; color: #626262; height: 100%; background: url(images/bg-top.png) repeat-x; }

#header { height: 360px; }
  #mainmenu { height: 45px; }
    #mainmenu ul { padding: 0; }
    #mainmenu li { margin: 0; float: left; list-style: none none; margin: 0; position: relative; }
    #mainmenu li a { height: 36px; display: block; text-decoration: none; }
    #mainmenu li a span{visibility: hidden;}   
    #mainmenu #home, #mainmenu #home a{background: url(images/mainmenu_home.png) no-repeat; width: 116px; margin:0;}
    #mainmenu #my-work, #mainmenu #my-work a{background: url(images/mainmenu_my-work.png) no-repeat; width: 114px;}
    #mainmenu #services, #mainmenu #services a{background: url(images/mainmenu_services.png) no-repeat; width: 116px;}
    #mainmenu #blogs, #mainmenu #blogs a{background: url(images/mainmenu_blogs.png) no-repeat; width: 116px;}
    #mainmenu #articles, #mainmenu #articles a{background: url(images/mainmenu_articles.png) no-repeat; width: 115px;}
    #mainmenu #testimonials, #mainmenu #testimonials a{background: url(images/mainmenu_testimonials.png) no-repeat; width: 115px;}
    #mainmenu #faqs, #mainmenu #faqs a{background: url(images/mainmenu_faqs.png) no-repeat; width: 115px;}
    #mainmenu #contact, #mainmenu #contact a{background: url(images/mainmenu_contact.png) no-repeat; width: 112px;}
      .submenu { width: 255px; background-color: #fff; position: absolute; left: 0px; top:36px; z-index: 50; padding: 0; }
        .submenu ul li { height: 28px; }
        #my-work-menu li a, #services-menu li a, #articles-menu li a, #blogs-menu li a { color: #fff; font-size: 11px; display: block; padding: 7px 5px 7px 5px; height: 13px; border-top: 1px solid #fff; }
        #my-work-menu ul li a:hover, #services-menu li a:hover, #articles-menu li a:hover, #blogs-menu li a:hover { color: #000; font-size: 11px; }
      #my-work-menu, #services-menu, #articles-menu, #blogs-menu { display: none; }
      #mainmenu #my-work ul li, #mainmenu #my-work ul li a { background: url(images/mainmenu_my-work-bg.gif); width: 245px;  }
      #mainmenu #services ul li, #mainmenu #services ul li a { background: url(images/mainmenu_services-bg.gif); width: 245px;  }
      #mainmenu #articles ul li, #mainmenu #articles ul li a { background: url(images/mainmenu_articles-bg.gif); width: 245px;  }
      #mainmenu #blogs ul li, #mainmenu #blogs ul li a { background: url(images/mainmenu_blogs-bg.gif); width: 245px;  }
  #phone-number { text-align: right; height: 45px; }
  #logo { height: 60px; }
  
  #map { position: absolute; top: 45px; padding: 0 0 0 200px; z-index: 3; }

#leftcontent { width: 285px; float: left; padding: 106px 0 0 0; font-size: 14px; position: relative; z-index: 4; }
  #leftpush { width: 280px; height: 100px; }
  #leftcontent p { line-height: 24px; }
  #leftcontent h3 { font-size: 18px; color: #414242; font-weight: normal; padding: 20px 0 10px 0; }
  #sidemenu { width: 215px; }
    #sidemenu h3 { border-bottom: 1px solid #E3E3E3; }
    #sidemenu li { list-style: none none; background: url(images/sidemenu.png) no-repeat bottom left; padding: 7px 15px 7px 5px; }
      #sidemenu li a { color: #4C4C4C; font-weight: normal; }
#content { width: 570px; float: left; padding: 210px 20px 0 47px; }
  #content ul { padding: 0 0 18px 0; }
  #content li { list-style: none none; background: url(images/arrow3.gif) no-repeat 0px 4px; padding: 0px 5px 5px 35px; }
  #box { width: 220px; color: #000; margin: 0 0 15px 15px; padding: 17px 10px 17px 10px; background: url(images/box-top.png) #DEDEDE no-repeat; float: right; position: relative; }
    #box p { padding: 0 0 8px 0; font-size: 14px; line-height: 1.4; }
    #box a { color: #2D4165; font-size: 11px; font-weight: bold; }
    #boxend { width: 240px; background: url(images/box-bottom.png) #DEDEDE no-repeat bottom left; height: 17px; position: absolute; bottom: 0; left: 0; }
h1 { font-family: "Trebuchet MS", Georgia, sans; color: #273957; font-size: 175%; font-weight: bold; padding: 0 0 20px 0; width: 100%; }
	#leftcontent #box { margin: 0 0 15px 0; float: none; }
	#leftcontent #box a { color: 	#2D4165; font-size: 11px; font-weight: bold; }

#footer { background: url(images/bg-footer.png) no-repeat 10px 0; font-size: 10px; color: #000;  padding: 5px; height: 47px; margin-top: 10px; }
  #footer a { color: #000; }
  #footer ul { width: 250px; padding: 12px 0 0 0; list-style: none; margin: 0 auto; }
  #footer ul li { float: left; padding: 0; } 
  #footer ul .separator { padding: 0 16px 0 16px; }
  
  
/************ templates *******************/
#templates-main{
  padding: 0 0 0 5px;
  
}

#templates-main h4{
  font-size: 1.8em;
}
  
/************* contact form ***************************/
form{
	width: 400px;
	margin: 15px 0 40px 0;
	clear: left;
}

#form-left{
	width: 200px;
	float: left;
}

#form-right{
	width: 200px;
	float: right;
}

.formfield, #messagediv label{
	padding: 0 0 10px 0;
}

input, select, textarea{
	border: solid 1px #666;
	background: #fff;
	width: 180px;
}

textarea{
	width: 380px;
}

#submitdiv input{
	float: right;
	margin: 0 20px 0 0;
	background: #eee;
}

#errormsg{
	width: 270px;
	padding: 10px 10px 10px 70px;
	background: url(images/problem.jpg) #fff no-repeat 10px 10px;
	color: red;
	border: solid 1px red;
	clear: left;
	height: 60px;
}

/****************** TEMPLATES ******************/
#confirmright{
  float: right;
  width: 425px; 
  position: relative; right: 80px;
}

#confirmright img{
  border: solid 1px #ddd;
  position: relative; left: 25px;
  float: left;
}

#confirmleft{
  float: left;
  width: 410px;
}

#confirmleft #contactwrap{
  width: 400px;
}

#confirmleft #contactwrap form{
  width: 400px;
  position: relative; bottom: 20px;
}

#confirmleft #contactwrap #submitdiv input{
  position: static; margin: 10px 10px 0 0;
}

#confirmleft #contactwrap textarea{
  width: 390px;
}



