/************************************/
/* RESET DEFAULTS AND BODY SETTINGS */
/************************************/

html, body, div, span, p, blockquote, pre, code, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, label, input, img, textarea, table, caption, tbody, tfoot, thead, tr, th, td, blockquote, cite {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 81.25%;    /* 13px */
  font-weight: normal;
  width: 100%;
  height:100%;
  color: #000;
  background-color: #eaeaea;
}

/***************/
/* PAGE LAYOUT */
/***************/

#page-wrapper-1 {
  width: 980px;
  margin: 0 auto;
  background: url('../img/bg-page.jpg') no-repeat 0 0;
  min-height: 670px;
}

#header-wrapper-1 {
  position: relative;
  width: 980px;
  height: 110px;
  clear: both;
}

#main-wrapper-1 {
  position: relative;
  width: 980px;
  height: 460px;
  clear: both;
}

#footer-wrapper-1 {
  position: relative;
  width: 980px;
  height: 60px;
  clear: both;
}

/************/
/* TOP MENU */
/************/

#top-menu-wrapper { z-index: 3000; }
#top-menu { position: absolute; top: 30px; left: 550px; list-style: none; }
#top-menu li { float: left; height: 23px; }
#top-menu li a { 
  display: block;
  height: 23px;
  line-height: 23px;
  background: url('../img/bg-semi-black.png') repeat;
  font-size: 100%;
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  outline: none;
  text-transform: uppercase;
  text-align: center; 
}

#top-menu li a:hover {
  color: #DC0026;
  text-decoration: none;
} 

#menuitem-1 { width: 110px; }
#menuitem-2 { width: 80px; }
#menuitem-3 { width: 100px; }
#menuitem-4 { width: 125px; }
/****************/
/* LIST STYLES  */
/****************/

#work-list {
  list-style: none;
}

#work-list li {
  margin: 0 0 8px 0;
}

#work-list li a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

#work-list li a:hover {
  color: #DD0125;
  text-decoration: none;
}

#work-list li a.active {
  color: #DD0125;
  font-weight: bold;
  text-decoration: none;
}

/*****************/
/* PAGE ELEMENTS */
/*****************/

#logo {
  position: absolute;
  width: 160px;
  height: 70px;
  left: 35px;
  top: 30px;
}

#page-title-1 {
  position: absolute;
  left: 40px;
  top: 230px;
  text-transform: uppercase;
  text-align: left;
  font-size: 95%;
}

#legend {
  position: absolute;
  width: 380px;
  height: 24px;
  left: 35px;
  top: 10px;
}

#link-facebook {
  position: absolute;
  width: 100px;
  height: 25px;
  left: 430px;
  top: 10px;
}

#link-twitter {
  position: absolute;
  width: 100px;
  height: 25px;
  left: 430px;
  top: 10px;
}

.semi-black {
  padding: 2px 5px 2px 5px;
  background: url('../img/bg-semi-black.png') repeat 0 0;
}

.link-location {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  font-size: 1px;
}

.bubble-location {
  position: absolute;
  width: 230px;
  height: 50px;
  left: 0;
  top: 0;
  display: none;
  z-index: 5;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 7px;
  color: #fff;
  text-align: left;
}

.strategy { background: url('../img/icon-strategy.png') no-repeat -1px -1px; z-index: 4 }
.development { background: url('../img/icon-development.png') no-repeat -1px -1px; z-index: 1 }
.client { background: url('../img/icon-client.png') no-repeat -1px -1px; z-index: 2 }
.design { background: url('../img/icon-design.png') no-repeat -1px -1px; z-index: 3}

.bubble-strategy { background: url('../img/bubble-strategy.png') no-repeat 0 0; }
.bubble-development { background: url('../img/bubble-development.png') no-repeat  0 0; }
.bubble-client { background: url('../img/bubble-client.png') no-repeat  0 0; }
.bubble-design { background: url('../img/bubble-design.png') no-repeat  0 0; }

#strategy-01 { left: 285px; top: 120px; }

#development-01 { left: 274px; top: 127px; }
#development-02 { left: 305px; top: 350px; }
#development-03 { left: 520px; top: 105px; }
#development-04 { left: 515px; top: 93px; }
#development-05 { left: 500px; top: 106px; }
#development-06 { left: 683px; top: 200px; }
#development-07 { left: 771px; top: 211px; }

#design-01 { left: 263px; top: 120px; }
#design-02 { left: 163px; top: 154px; }
#design-03 { left: 464px; top: 130px; }

#client-01 { left: 274px; top: 114px; }
#client-02 { left: 260px; top: 172px; }
#client-03 { left: 495px; top: 96px; }


/*****************/
/* ABOUT US      */
/*****************/

.popup {
  width: 715px;
  height: 400px;
  margin-top: 10px;
}

#about-us-wrapper {
  background: url('../img/title-about-us.jpg') no-repeat 0 20px;
}

#about-us-wrapper p {
  margin-bottom: 15px;
}

#about-us-left {
  float: left;
  width: 43%;
  padding: 100px 0px 20px 40px;
}

#about-us-right {
  float: right;
  width: 43%;
  padding: 100px 40px 20px 0px;
}

/*****************/
/* WORK          */
/*****************/

#work-left {
  float: left;
  width: 140px;
  padding: 10px 0px 10px 30px;
}

#work-right {
  float: left;
  position: relative;
  width: 530px;
  padding: 10px 0px 10px 10px;
  height: 380px;
}

#work-display {
  position: absolute;
  top: 5px;
  left: 0px;
  width: 530px;
  height: 340px;
  z-index: 100;
}

#work-describe {
  position: absolute;
  top: 360px;
  left: 0px;
  width: 400px;
  height: 40px;
  z-index: 101;
}

#work-launch-site {
  position: absolute;
  top: 360px;
  left: 440px;
  width: 90px;
  height: 17px;
  z-index: 101;
  text-align: right;
}

#work-display-controls {
  position: absolute;
  top: 380px;
  left: 400px;
  width: 130px;
  height: 20px;
  z-index: 101;
}

.slide_control {
  float: right;
  padding-left: 5px;
  display: block;
  width: 14px;
  height: 14px;
}
 
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li{ 
	width:530px;
	height:345px;
	overflow:hidden; 
}

#work-display img {
  border: 2px solid #8A3322;
}

#work-describe p {
  margin: 0;
  padding: 0;
}

/****************/
/* GENERAL FORM */
/****************/

.form-wrapper {
  margin: 0;
  padding: 0;
}

.form-wrapper p {  margin-bottom: 0px; }
.form-wrapper p.w-25p {  float: left; width: 25%; }
.form-wrapper p.w-50p { width: 50%; }
.form-wrapper p.w-75p { width: 75%; }
.form-wrapper p.w-100p { width: 100%; }

.form-wrapper input.text-box { width: 250px; padding: 5px;}
.form-wrapper select { width: 250px; }
.form-wrapper textarea { width: 250px; padding: 5px; }

.warning { 
  display: none;
  margin: 0;
  padding: 5px 5px 5px 35px;
  margin-bottom: 10px;
}

.error { 
  background: #FBE3E4 url('../img/error.gif') no-repeat 10px center;
  border: 1px solid #FBC2C4;
  color:#8a1f11;
}

.success { 
  background: #accef9 url('../img/success.gif') no-repeat 10px center;
  border: 1px solid #3172c2;
  color:#03336f;
}

/*****************/
/* CONTACT US    */
/*****************/

#contact-us-wrapper {
  background: url('../img/title-contact-us.jpg') no-repeat 0 20px;
}

#contact-us-left {
  float: left;
  width: 370px;
  padding: 110px 0px 10px 30px;
}

#contact-us-right {
  float: left;
  position: relative;
  width: 260px;
  padding: 20px 0px 10px 30px;
}

#contact-warning { 
  width: 220px;
}

/*****************/
/* QUOTE         */
/*****************/

#quote-wrapper {
  background: url('../img/title-quote.jpg') no-repeat 0 15px;
}

#quote-left {
  float: left;
  width: 380px;
  padding: 85px 0px 10px 30px;
}

#quote-right {
  float: left;
  position: relative;
  width: 220px;
  padding: 130px 0px 10px 60px;
}

#quote-warning { 
  width: 300px;
}

#quote-form-wrapper-1 input.text-box { width: 330px; padding: 5px;}
#quote-form-wrapper-1 textarea { width: 330px; padding: 5px; }
#quote-form-wrapper-1 input.check-box { outline: none; margin-right: 10px; border: 0; }

#quote-form-wrapper-2 input.text-box { width: 330px; padding: 5px;}
#quote-form-wrapper-2 textarea { width: 330px; padding: 5px; }
#quote-form-wrapper-2 input.check-box { outline: none; margin-right: 10px; border: 0; }