/* DotWeb Software - Main site - HTML & CSS by Mihai Petre - DOTWEB Software Systems */

/* X-browser CSS properties reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
a {outline:none;}
/* /X-browser CSS properties reset */

body {
  color: #b0b8bd;
  background: #020202 url(../images/body-bg.jpg) no-repeat top;
  font-family: Arial, sans-serif; font-size: 13px;
}

input, textarea, select {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: 14px;
}

#wrapper {
  width: 990px;
  margin: 0 auto;
}



/* Header styles */
#header {
  height: 380px;
  position: relative;
}
.home {
  background: url(../images/header-bg-home.jpg) no-repeat bottom right;
}
.portfolio {
  background: url(../images/header-bg-portfolio.jpg) no-repeat 530px 110px ;
}
.portfolio-project {
  background: url(../images/header-bg-portfolio-project.jpg) no-repeat 530px 100px;
}
.services {
  background: url(../images/header-bg-services.jpg) no-repeat 550px 130px;;
}
.tech {
  background: url(../images/header-bg-tech.jpg) no-repeat 560px 155px;
}
.contact {
  height: 330px !important;
  margin-bottom: 20px;
  background: url(../images/header-bg-contact.jpg) no-repeat 680px 100px;
}
.no-result {
  background: url(../images/header-bg-home.jpg) no-repeat bottom right;
}


#header h1 {
  position: absolute;
  top: 26px; left: 0px;
}

#header h1 a {
  display: block;
  width: 230px; height: 72px;
  background: url(../images/header-logo-dw.gif) no-repeat left;
  text-indent: -10000px;
}


#header #lang {
  position: absolute; top: 5px; right: 5px;
  font-family: 'Trebuchet MS';
}

#header #lang a {
  margin-left: 5px;
  padding: 0 2px;
  line-height: 14px;
  color: #878787;
  text-transform: uppercase;
}
#header #lang a.active, #header #lang a:hover {
  color: #282828;
  background: #D9E7F5;
  text-decoration: none;
}


#header ul#nav {
  position: absolute;
  top: 70px; right: -30px;
  font-family: 'Trebuchet MS'; font-size: 14px
}

#header ul#nav li {
  float: left; display: inline;
  margin-right: 25px;
}

#header ul#nav li a {
  display: block;
  padding: 5px 11px 4px 10px; 
  color: #cacaca;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  position: relative;
}
#header ul#nav li a:hover, #header ul#nav li.active a {
  padding: 5px 10px 3px; 
  border-right: 1px dashed #7F868A; border-bottom: 1px dashed #7F868A;
  color: #fff;
  background: #0072B5;
}

#header ul#nav li a span {
  display: none;
  height: 30px; width: 200px;
  padding-right: 42px;
  color: #A6ACAF;
  font-family: 'Trebuchet MS'; font-size: 11px;
  text-align: right; text-transform: none;
  background: url(../images/menu-link-arrow.gif) no-repeat right 5px;
  position: absolute; top: -30px; right: -1px; _right: 0; /* Internet Explorer 6 display bug */
}
#header ul#nav li a:hover span, #header ul#nav li.active a span {
  display: block;
}


#header #section-specific {
  position: absolute;
}

#header.home #section-specific, #header.portfolio #section-specific, #header.services #section-specific,
#header.portfolio-project #section-specific, #header.tech #section-specific {
  width: 430px; height: 179px;
  top: 135px; left: 22px;
  background: url(../images/header-motto-bg.gif) no-repeat center;
}

#header #section-specific #motto {
  padding: 20px 0 0 16px;
}

.contact #section-specific {
  width: 298px; height: 74px;
  background: url(../images/contact-sectionspec-bg.gif) no-repeat 10px bottom;
  top: 170px; left: 20px;
}

.contact #section-specific h2 {
  margin: 17px 0 0 88px;
  font-size: 12px;
}

.no-result #section-specific {
  width: 335px; height: 37px;
  margin: 290px 0 0 100px;
  background: url(../images/header-error404.gif) no-repeat center;
}
/* /Header styles */



/* Content styles */
#content {
  width: 990px;
  position: relative;
  padding-bottom: 50px;
  overflow: hidden;
}

/* Main container styles */
#content #main {
  float: left;
  width: 550px;
  padding-right: 25px;
  border-right: 1px dotted #424243;
  padding-bottom: 3000px; margin-bottom: -3000px;
  position: relative;
}

#content h2 {
  margin-bottom: 25px;
  color: #878787;
  font-family: 'helvetica-lightcondensed', 'Trebuchet MS', sans-serif; font-size: 24px;
  cursor: default;
}

#content h3 {
  margin-bottom: 10px;
  color: #dab581;
  font-size: 16px;
  font-weight: bold;
  cursor: default;
}

#content p {
  margin-bottom: 7px;
  color: #b0b8bd;
}

#content a {
  color: #63AB1F;
}

a.more {
  float: right;
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
}
a.more:hover {
  text-decoration: none;
}

a.back {
  display: inline-block;
  margin: 10px 0 25px 0px;
  padding-left: 18px;
  color: #1E7584 !important;
  text-decoration: none;
  font-family: 'Trebuchet MS'; font-size: 16px;
  background: url(../images/sageata.gif) no-repeat left 5px;
}
a.back:hover {
  color: #2EB5CC !important;
}

h2.one {
  padding: 7px 0 7px 40px;
  background: url(../images/heading-bg-one.gif) no-repeat left;
}

h2.two {
  padding: 7px 0 7px 40px;
  background: url(../images/heading-bg-two.gif) no-repeat left;
}

.article {
  width: 550px;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}

#tech .article {
  margin-bottom: 25px !important;
}

.article h3 {
  float: left;
  width: 200px;
  position: relative;
}

.article h4 {
  margin-bottom: 10px;
  color: #DAB581;
  font-size: 16px; font-weight: bold;
}

.article h3 img {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}

#tech .article h3 img {
  margin-top: 35px;
}

#tech .article h3 {
  margin: 0;
}

.article .description {
  float: right;
  width: 325px;
  margin-bottom: 25px;
  padding-left: 24px;
  border-left: 1px solid #484646;
  font-size: 11px;
}

.article a.prev {
  position: absolute; left: 10px; top: 105px;
}

.article a.next {
  position: absolute; right: 10px; top: 105px;
}

.article ul.service-list {
  clear: both;
  width: 550px;
  margin-bottom: 25px;
  background: url(../images/services-featureslist-bg.gif) no-repeat center 10px;;
  overflow: hidden;
}

.article ul.flip {
  background: url(/dotweb/images/services-featureslist-bg-flip.gif) no-repeat center 10px
}

.article ul.service-list li {
  float: left; margin-right: 4px;
  width: 73px; height: 90px;
}

.article ul.service-list li a {
  display: block;
  width: 73px; height: 90px;
  color: #fff !important;
  font-size: 11px;
  text-decoration: none; text-align: center;
  position: relative;
}

.article ul.service-list li a span {
  display: block;
  width: 73px;
  height: 45px;
  line-height: 13px;
  position: absolute; bottom: 0; left: 0;
}

.article ul.service-list li a .icon {
  display: block;
  height: 45px;
  position: absolute; top: 0; left: 0;
}

.article ul.service-list li a img {
  display: block;
  margin: 0 auto;
}

.article ul.service-list li .tip-content {
  display: none;
}

.tips {
  -moz-border-radius: 5px; background-color: #CCCCCC;
}

.tips ul {
  list-style: disc !important;
  list-style-position: inside !important;
}

.tips ul li ul {
  margin-left: 12px;
  list-style: square !important;
  list-style-position: inside !important;
}


#content #main #slideshow {
  width: 550px;
  position: relative;
  overflow: hidden;
}

#content #main .projects {
  width: 460px !important;
  padding-left: 50px; padding-right: 45px;
}

.projects #gallery {
  width: 460px;
  margin-bottom: 25px;
  overflow: hidden;
}

.project #gallery {
  overflow: hidden;
  margin-bottom: 15px;
}

#gallery ul {
  float: left;
  width: 460px;
}

#gallery ul li {
  float: left; display: inline;
  margin: 0 15px 30px 15px;
}

#gallery ul li a {
  display: block;
  padding: 3px;
  border: 1px dotted #4C4C4C;
}

#gallery ul li a img {
  display: block;
  padding: 2px;
  background: #636363;
}
#gallery ul li a:hover img {
  background: #808080;
}

.projects a.prev {
  position: absolute; left: 20px; top: 160px;
}
.projects a.next {
  position: absolute; right: 20px; top: 160px;
}

.project a.prev, .project a.next {
  clear: both;
  margin: 10px 15px 0;
  position: relative; left: 220px;
}


#content #main .article {
  margin-bottom: 50px;
}

#content #main #branches {
  margin: 50px 0 0;
}

#content #main #branches ul li {
  float: left; display: inline;
  margin: 0 50px 0 0;
}

#content #main #branches ul li a {
  display: block;
  height: 35px;
  color: #fff;
  font-family: 'Trebuchet MS';
  font-size: 32px;
  text-transform: uppercase; text-decoration: none; text-indent: -10000px;
  line-height: 50px;
}

#content #main #branches ul li a.projects {
  width: 141px !important;
  padding: 0;
  background: url(../images/link-projects.gif) no-repeat;
}

#content #main #branches ul li a.services {
  width: 136px;
  background: url(../images/link-services.gif) no-repeat;
}

#content #main #branches ul li a.clients {
  width: 124px;
  background: url(../images/link-clients.gif) no-repeat;
}


#no-result {
  width: 460px; height: 63px;
  margin: 70px 0 0 35px;
  padding-top: 250px; padding-left: 35px;
  background: url(../images/no-result-bg.gif) no-repeat;
}


#content #main #contact-form {
  width: 550px;
  margin-top: 25px;
  overflow: hidden;
}

#content #main #contact-form ul li {
  margin-bottom: 20px;
  position: relative;
}

#content #main #contact-form ul li ul.error_list {
  position: absolute; right: 130px; top: 27px;
  color: #ff0000;
}

#content #main #contact-form ul li.one {
  height: 82px;
  background: url(../images/contactform-listitem-one.gif) no-repeat top left;
}

#content #main #contact-form ul li.two {
  height: 82px;
  background: url(../images/contactform-listitem-two.gif) no-repeat top left;
}

#content #main #contact-form ul li.three {
  height: 82px;
  background: url(../images/contactform-listitem-three.gif) no-repeat top left;
}

#content #main #contact-form ul li.four {
  height: 220px;
  margin-bottom: 10px;
  background: url(../images/contactform-listitem-four.gif) no-repeat top left;  
}

#content #main #contact-form ul li input, #content #main #contact-form ul li textarea {
  width: 350px;
  border: none;
  padding: 7px 3px 7px 20px;
  background: #9FA09E;
  position: absolute; top: 50px; left: 50px;
}

#content #main #contact-form ul li textarea {
  height: 150px;
}

#content #main #contact-form ul li.one input {
  background: #9FA09E url(../images/contactform-input-name-bg.gif) no-repeat 5px center;
}

#content #main #contact-form ul li.two input {
  background: #9FA09E url(../images/contactform-input-email-bg.gif) no-repeat 5px center;
}

#content #main #contact-form ul li.three input {
  background: #9FA09E url(../images/contactform-input-phone-bg.gif) no-repeat 5px center;
}

#content #main #contact-form ul li input.focus, #content #main #contact-form ul li textarea.focus {
  background-color: #BDBEBC;
}

#content #main #contact-form ul li label {
  position: absolute; top: 25px; left: 30px; font-size: 11px;
}

#content #main #contact-form .submit {
  float: left; margin-left: 340px;
}
/* /Main container styles */


/* Side container styles */
#content #side {
  float: right;
  width: 390px;
  margin-top: 40px;
  padding-left: 10px;
  padding-bottom: 3000px; margin-bottom: -3000px;
}

#content #side #meta {
  width: 400px;
  margin-bottom: 50px;
  overflow: hidden;
}

#content #side #meta li {
  float: left; display: inline;
  margin: 0 25px 0 0;
}

#content #side #meta li a {
  display: block;
  width: 98px; height: 98px;
  text-indent: -10000px;
}

#content #side #meta li a.business {
  background: url(../images/meta-business.gif) no-repeat left;
}

#content #side #meta li a.sandbox {
  background: url(../images/meta-sandbox.gif) no-repeat left;
}

#content #side #meta li a.blog {
  background: url(../images/meta-blog.gif) no-repeat left;
}

#content #side #meta li a:hover, #content #side #meta li.active a {
  background-position: right;
}

#content #side #recent ul li {
  float: left;
  margin-right: 10px;
}

#content #side #recent ul li a img {
  border: 2px solid #808080;
}
 /* /Side container styles */
/* /Content styles */



#footer {
  width: 990px;
  margin: 0 auto 10px;
  background: #191919;
  overflow: hidden;
  position: relative;
}

#footer #btm-nav {
  float: right;
  width: 400px; height: 40px;
  padding-top: 26px;
  color: #666666;
  background: url(../images/footer-logo-dw.gif) no-repeat 325px center;
  font-family: 'Trebuchet MS'; font-size: 11px;
  cursor: default;
}

#footer #btm-nav a {
  color: #666666;
  text-decoration: none;
  text-transform: capitalize;
}
#footer #btm-nav a:hover {
  color: #858484
}

#footer #phone-number {
  float: left;
  height: 66px; width: 575px;
  border-right: 1px solid #020202;
  background: #333333 url(../images/footer-phone-bg.jpg) no-repeat left;
}

#footer #phone-number img {
  float: left;
  padding-left: 273px;
}