@charset "UTF-8";
/* CSS Document */

/******************* DittoCreative.com - main.css *******************/



/***** Global Settings *****/

body  
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  padding: 0px;
  margin : 0px; /*it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  color: #625647;
  background-color: #f6f6f0;
}


/***** Headings *****/

h1
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 25px;
  color: #28231d;
  font-weight: normal;
  line-height: 40px;
  margin: 0;
  padding: 15px 0px 0px 0px;
}

h2 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 25px;
  color: #28231d;
  font-weight: normal;
  line-height: 40px;
  margin: 0;
  padding: 0px;
}

h3 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #625648;
  margin: 0;
  padding: 13px 0px 0px 0px;
}

h4 
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 17px;
  color: #28231d;
  text-decoration: none;
  margin: 0;
  line-height: 30px;
}

h5 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #625648;
  margin: 0;
  padding: 13px 0px 30px 0px;
}

.container 
{
  width: 900px;  
  margin: 0 auto; 
  text-align: left; 
  position: relative;
}

#wrapmasthead
{
  min-width: 900px;
  background-image: url(img/bkgd_masthead15.jpg);
  background-repeat: repeat-x;
  height: 153px;
  background-color: #fff;
  background-position: center;
}

#wrapcontent
{
  min-width: 900px;
  /* background-color: #f6f6f0;*/
  background-image: url(img/bkgd_content4.gif);
  background-repeat: repeat-x;
}

#wrapbrands
{
  min-width: 900px;
  background-color: #f4f4f3;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #bcbcbc;
}

#wrapfooter
{
  min-width: 900px;
  background-color: #e6e6da;
}

#wrapfooter_bottom
{
  min-width: 900px;
  background-color: #f6f6f0;
  margin-bottom: 25px;
  background-repeat: repeat-x;
  background-image: url(img/bkgd_footer3.gif);
}

.col1text
{
  float: left; /* since this element is floated, a width must be given */
  width: 260px;
  padding: 0px 30px 15px 0px;
  margin: 0px;
}

.col1text a
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA637;
  text-decoration: none;
}

.col1text a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.col1thumb
{
  float: left; /* since this element is floated, a width must be given */
  width: 260px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
  padding: 10px 30px 5px 0px;
  margin: 0px;
}

.col1thumb a:hover 
{
  text-decoration: none;
}

.col2text 
{
  float: left;
  width: 260px;
  padding: 0px 30px 15px 30px;
  margin: 0px;
}

.col2text a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA636;
  text-decoration: none;
}

.col2text a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.col2thumb 
{
  float: left;
  width: 260px;
  padding: 10px 30px 5px 30px;
  margin: 0px;
}

.col2thumb a:hover 
{
  text-decoration: none;
}

.col3text 
{
  float: left;
  width: 260px;
  padding: 0px 0px 15px 30px;
  margin: 0px;
}

.col3text a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA635;
  text-decoration: none;
}

.col3text a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.col3thumb 
{
  float: left;
  width: 260px;
  padding: 10px 0px 5px 30px;
  margin: 0px;
}

.col3thumb a:hover 
{
  text-decoration: none;
}

ul
{
  padding:0;
  margin:0;
}

/*li
{
padding:0;
}*/ 

#contact a:hover
{
  color: #829C35;
  text-decoration: none;
  padding-bottom:1px;
  border-bottom:1px solid #f6f6f0;
}

.devider
{
  float: left;
  width: 900px;
  border-top: solid 1px #c0b7ab;
  margin: 0px;
  padding: 0px;
}

.devider a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA639;
  text-decoration: none;
}

.devider a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.devider-feature
{
  float: right;
  width: 590px;
  border-top: solid 1px #c0b7ab;
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.devider-feature a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA639;
  text-decoration: none;
}

.devider-feature a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.devider2
{
  float: left;
  width: 900px;
  margin: 15px 0px 0px 0px;
  padding: 0px;
}

.devider3
{
  float: left;
  width: 900px;
  border-top: solid 1px #c0b7ab;
  margin: 0px;
  padding: 20px 0px 0px 0px;
}

.devider3_work
{
  float: left;
  width: 610px;
  margin: 0px;
  padding: 0px
}


/*.devider3_work
{
  float: right;
  width: 580px;
  border-top: solid 1px #c0b7ab;
  margin: 0px;
  padding: 20px 0px 0px 0px;
}*/

/*.devider_footer
{
  float: left;
  width: 900px;
  margin: 0;
  padding: 5px 0px 0px 0px;
}*/

.devider_header
{
  float: left;
  width: 400px;
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.devider_header a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA639;
  text-decoration: none;
}

.devider_header a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}


#error_left
{
  float: left;
  width: 125px;
  margin: 20px 25px 10px 0px;
} 

#error_right
{
  width: 900px;
  float: left;
  margin: 0px 0px 10px 0px;
}

#flag 
{
  position:absolute;
  background:none;
  left:0px;
  top:0px
}

#footer_left 
{
  float: left;
  width: 270px;
  margin-top: 20px;
  padding: 0px 20px 0px 0px;
  background-color: #e6e6da;
} 

.footer_left-inner
{
  width: 270px;
  margin: 5px 0px 10px 0px;
  padding: 5px 0px 0px 0px;
  border-top: solid 1px #cecec1;
}


#footer_left p 
{
  margin-top: 0px;
  margin-bottom: 20px;
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height:19px;
}


#footer_left a 
{
  font-weight: normal;
  font-size: 12px;
  color: #625647;
  text-decoration: none;
}

#footer_left a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #8BA637;
  border-bottom:1px solid #cecec1;
  padding-bottom:1px;
} 

#footer_middle
{
  float: left;
  width: 300px;
  padding: 0px 0px 0px 20px;
  border-right: solid 1px #cecec1;
  margin: 20px 0px 30px 0px;
}

#footer_middle p
{
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height:19px;
}

#footer_right
{
  float: left;
  width: 260px;
  padding: 0px 0px 20px 30px;
  margin-top: 20px;
}

#footer_right p
{
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height:19px;
}

#footer_right a
{
  font-weight: normal;
  font-size: 12px;
  color: #829C35;
  text-decoration: none;
}

#footer_right a:hover
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #333;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.footer_bottom-left
{
  float: left;
  width: 225px;
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.footer_bottom-right
{
  float: right;
  width: 675px;
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: right;
}

.footer_bottom-left p, .footer_bottom-right p
{
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #9a9989;
  line-height:20px;
}

.footer_bottom-left a, .footer_bottom-right a
{
  font-weight: normal;
  font-size: 12px;
  color: #9a9989;
  text-decoration: none;
}
.footer_bottom-left a:hover, .footer_bottom-right a:hover
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #8BA636;
  border-bottom:1px solid #cecec1;
  padding-bottom:1px;
}


/***** Used for the Form to Email PHP page and 404 error page - Start *****/

.formtoemail-textbox
{
  width: 900px;
  margin: 0px;
  padding: 75px 0px 75px 0px;
}

.formtoemail-textbox p
{
  color: #625647;
}    

/***** Used for the Form to Email PHP page and 404 error page - End *****/



/***** Footer list - Start *****/

#listcontainer 
{
  width: 260px;
  margin: 0;
  float: left;
  margin: 20px 0px 35px 0px;
  padding: 0px 0px 0px 28px;
}

#listcontainer ul
{
  font-family: "Lucida Grande", sans-serif;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  border-bottom: 1px solid #cecec1;
}

#listcontainer a
{
  display: block;
  padding: 5px 5px 5px 10px;
  width: 245px;
  font-size: 12px;
  border-top: 1px solid #cecec1;
}

#listcontainer a:link, #list a:visited
{
  color: #625647;
  text-decoration: none;
}

#listcontainer a:hover
{
  background-color: #ddddd1;
  color: #625647;
}

.static
{
  display: block;
  padding: 3px 3px 3px 10px;
  width: 250px;
  font-size: 12px;
  background-color: #fdfbf6;
  border-bottom: 1px solid #e3ded3;
  color: #AEAAA2; 
}

.static_bottom
{
  display: block;
  padding: 3px 3px 3px 10px;
  width: 250px;
  font-size: 12px;
  background-color: #fdfbf6;
  color: #AEAAA2;
}

/***** Footer List - End *****/



/***** Form elements - Start *****/

fieldset
{
  border: 0px;
}

.form_label 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #8B8B8B;
  line-height: 19px;
  text-align: right;
}

.form_text 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height: 19px;
  width:250px;
}

textarea 
{
  background-color: #f6f6f0;
  border: none;
  color: #ffffff;
  padding: 3px 5px 3px 5px;
}

textarea:focus { outline: none; }

input 
{
  background-color: #f6f6f0;
  border: none;
  padding: 3px 5px 3px 5px;
}

input:focus { outline: none; }

/***** Form elements - End *****/


.frame 
{
  border: 1px solid #c0b7ab;
  padding: 4px;/***** Rounded corner frames - Start *****/
 /* text-decoration: none;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;*/
  /*background-color: #f4f1ea;*/
  
/***** Rounded corner frames - End *****/

}

.frame:hover
{
  border: 1px solid #28231d;
  padding: 4px;
  text-decoration: none;
}

.frame2
{
  border: 5px solid #d5d5ca;
  text-decoration: none;
  margin-right: 10px;
}

.frame3 
{
  border: 5px solid #e6e2d3;
  text-decoration: none;
  margin-right: 10px;
}


#header 
{
  padding: 60px 20px 30px 0px;
} 

#header h1 
{
  margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
  padding: 10px 0; 
}


#highlite 
{
  float: right;
  width: 520px;
  margin: 0px;
  padding-top: 10px;
}

.intro
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #625647;
  line-height: 19px;
}


#intro 
{
  float: left;
  width: 600px;  
  margin: 0px 0px 20px 0px;
} 

#intro a 
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #5791BC;
  text-decoration: none;
}

#intro a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

#logo
{  
  float: left;
  width: 350px;
  margin: 52px 0px 0px 0px;
  border: 0px;
}

/*a.logo
{
  display: block;
  width: 277px;
  height: 43px;
  color:#fff;
  text-decoration: none;
  background-image: url(img/logo_ditto6.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  float: left;
}*/

/*a.logo:hover
{
  width: 277px;
  color:#fff;
  text-decoration: none;
  background-image: url(img/logo_ditto6.png);
  background-repeat: no-repeat;
  background-position: 0px -43px;
  float: left;
}*/


/***** MENU STRUCTURE - start *****/

#mainNav 
{
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 550px;
  height: 153px;
  position: relative;
}

#mainNav a 
{
  display: block;
  /*text-indent: -1000%;*/
  position: absolute;
  /*outline: none;*/
  /*background-color: #27231c;*/
  /*text-align: center;*/
  text-decoration: none;
  font-family: "Lucida Grande", sans-serif;
  font-size: 14px;
  padding: 5px 0px 3px 0px;
  color: #dad2c2;
 /* -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;*/
}

#mainNav a:hover 
{
  background-position: left bottom;
  color: #dad2c2;
  border-bottom:2px solid #625648;  /*background-color: #8BA638;*/
}

#mainNav .home 
{
  left: 251px;
  top: 75px;
}

#mainNav .work 
{
  left: 330px;
  top: 75px;
}

#mainNav .blog 
{
  left: 398px;
  top: 75px;
}

#mainNav .contact 
{
  left: 463px;
  top: 75px;
}

#mainNav li#active   a   
{
 /* left: 321px;
  top: 75px;*/
  background-position: left bottom;
  color: #E4DDCF;
  /*background-color: #8BA638;*/
  border-bottom:2px solid #8BA635;
}

/***** MENU STRUCTURE - end *****/

.more-sm
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: normal;
  color: #625649;
  line-height: 18px;
  font-style: italic;
}

.more
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: normal;
  color: #625649;
  line-height: 18px;
  font-style: italic;
}
.more-big
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: normal;
  color: #625650;
  line-height: 24px;
  font-style: italic;
}
.more-footer
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: normal;
  color: #9a9989;
  line-height: 18px;
  font-style: italic;
}

.more_green
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  font-weight: normal;
  color: #829C35;
  line-height: 18px;
  font-style: italic;
}

p 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625648;
  line-height: 18px;
}

.porttext 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #666;
  line-height: 18px;
}

.shadow
{
  float: left;
  width: 900px;
  margin: 0px;
  padding: 20px 0px 0px 0px;
  background: url(img/shadow.png) no-repeat;
}


.sidebar
{
  float: right; /* since this element is floated, a width must be given */
  padding: 0px 0px 5px 20px;
  margin: 0px;
  width: 268px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
  /* Fix for min-height issues in IE*/
  min-height: 1450px;
  height:auto !important; /* understood by all browsers */ 
  height: 1450px; /* IE6 incorrectly uses this value /* 
  /*border-right: solid 1px #c0b7ab;*/
}

  
.sidebar-inner
{
  width: 268px;
  padding: 15px 0px 0px 0px;
  margin: 25px 0px 0px 0px;
  border-top: solid 1px #cecec1;
}

.sidebar-inner p
{
  margin: 0px;
}


.sidebar-inner a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA636;
  text-decoration: none;
}

.sidebar-inner a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
  text-decoration: none;
}


.sidebar-inner2
{
  width: 268px;
  padding: 5px 0px 0px 0px;
  margin: 0px;
}

.sidebar-inner2 p
{
  margin: 0px;
}


.sidebar-inner2 a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA636;
  text-decoration: none;
}

.sidebar-inner2 a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
  text-decoration: none;
}



/***** Sidebar list - Start *****/

.sidebar-listcontainer 
{
  width: 268px;
  margin: 0;
  /*float: left;*/
  margin: 0px 0px 0px 0px;
  padding: 6px 0px 20px 0px;
}

.sidebar-listcontainer ul
{
  font-family: "Lucida Grande", sans-serif;
  margin-left: 0;
  padding: 0;
  list-style-type: none;
}

.sidebar-listcontainer a
{
  /*display: block;*/
  /*padding: 5px 5px 5px 20px;*/
  /*width: 243px;*/
  font-size: 13px;
}

.sidebar-listcontainer a:link, .list a:visited
{
  color: #8BA635;
  /* color: #625647;*/
  text-decoration: none;
}

.sidebar-listcontainer a:hover
{
  /* background-color: #ddd6c9;*/
  /*color: #625647;*/
  color: #28231d;
 /* border-bottom:1px solid #c0b7ab; */
  padding-bottom:1px;
  text-decoration: none;
}


#welcome 
{
  float: left;
  width: 340px;
  margin: 0;
  padding: 0px 20px 10px 0px;
} 

.welcome     
{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  font-weight: normal;
  color: #8BA639;
  line-height: 19px;
  font-style: italic;
}

#welcome p
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height:18px;
}

#welcome a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA635;
  text-decoration: none;
}

#welcome a:hover 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

#work_nav 
{
  list-style: none;
  padding: 30px 0px 0px 0px;
  margin: 0;
  width: 500px;
  text-align: right;
  position: relative;
  height: 35px;
  float: right;
}

#work_nav ul 
{
  list-style-type:none; 
}

#work_nav li 
{ 
  display:inline;
}

#work_nav a 
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 13px;
  color: #8BA639;
  text-decoration: none;
}

#work_nav a:hover 
{
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.work_main
{
  float: right;
  width: 582px;
  margin: 10px 0px 40px 20px;
}
#work_copybar
{
  width: 270px;
  float: left;
  margin: 0px 20px 30px 0px;
}
.work_copybar
{
  font-family: "Lucida Grande", sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #625647;
  line-height: 19px;
  width: 450px;
}
.work_copybar-inner
{
  width: 270px;
  padding: 15px 0px 0px 0px;
  border-top: solid 1px #cecec1;
}

.work_copybar-inner p
{
  margin: 0px;
}

#work_copybar a
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #8BA637;
  text-decoration: none;
}

#work_copybar a:hover
{
  font-family: "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 12px;
  color: #28231d;
  border-bottom:1px solid #c0b7ab;
  padding-bottom:1px;
}

.work_visit
{
  width: 450px;
  float: right;
  margin: 0px 0px 25px 25px;
}

#mainContent 
{ 
	margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 0 10px; 
}

/*.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	/*float: right;
	margin-left: 8px;
}*/

/*.fltlft { /* this class can be used to float an element left in your page */
	/*float: left;
	margin-right: 8px;
}*/

.clearfloat 
{ /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}