/*
  Site - thechoppr.com
  --------------------
  Style Index

  $1 - Site Structure Styles
  $2 - Header Styles
  $3 - Sidebar Styles
  $4 - Content Styles
  $5 - Footer Styles
  $6 - SIFR styles
  $7 - Form Styles

*/

/* $1 - Site Structure Styles ///////////////////////////////////////////////////////////////////////////////////*/

BODY {
  margin: 0px;
  padding: 0px;
  background: white url("/layout/images/top-bg.jpg") repeat-x;
  font-size: 12px;
  font-family: "Arial", "Verdana", "Trabuchet MS", sans-serif;
  color: #1A5A7F;
}

#container {
  width: 760px;
  margin: 0 auto;
}

#header-navigation {
  height: 32px;
  padding-top: 18px;
  position: relative;
}

#content-container {
  padding: 20px 0;
}

#main-content {
  position: relative;
  float: left;
  width: 500px;
  margin: 0 0 20px 0;
}

#sidebar {
  font-size: 11px;
  position: relative;
  float: right;
  margin: -98px 0 20px 0;
  padding: 34px 30px 30px 30px;
  width: 190px;
  background: url("/layout/images/sidebar-bg.jpg") 50% 0 no-repeat;
}

#sidebar .dezinehq ul {
    margin-left: 0px;
    padding-left: 5px;
}

#sidebar .dezinehq .feedTitle a {
    color: #1a5a7f;
    font-size: 1.2em;
    text-align: center;
}

#sidebar .dezinehq ul li {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 5px;
    margin-bottom: 15px;
}

#sidebar .dezinehq ul a {
    color: #BD1C1C;
}

#sidebar .dezinehq ul a:hover {
    color: #1a5a7f;
}

#footer {
  clear: both;
  padding: 80px 0 30px 0;
  text-align: center;
  background: #3198D3 url("/layout/images/footer-bg.jpg") repeat-x;
}

/* $2 - Header Styles ///////////////////////////////////////////////////////////////////////////////////*/
#header-banner {
  height: 74px;
  padding: 26px 0 0 0;
  position: relative;
}

#header-banner .gchat {
    position: absolute;
    top: 20px;
    right: 0px;
}

UL#header-nav-ul {
  margin: 0;
  padding: 0;
  height:32px;
  display: inline;
  overflow: hidden;
  list-style: none;
}

UL#header-nav-ul li {
  margin:0;
  padding:0;
  list-style: none;
  display: inline;
}

UL#header-nav-ul A {
  float: left;
  padding: 32px 0 0 0;
  overflow: hidden;
  height: 0px !important;
}

UL#header-nav-ul A:hover {
  background-position: 0 -32px;
}

UL#header-nav-ul A:active, UL#header-nav-ul A.selected {
  background-position: 0 -32px;
}

#nav-home a {
  width: 82px;
  background: url("/layout/images/nav-home.gif") no-repeat;
}

#nav-faqs a {
  width: 82px;
  background: url("/layout/images/nav-faqs.gif") no-repeat;
}

#nav-blog a {
  width: 82px;
  background: url("/layout/images/nav-blog.gif") no-repeat;
}

#nav-get-started a {
  width: 122px;
  background: url("/layout/images/nav-get-started.gif") no-repeat;
}

#nav-contact-us a {
  width: 122px;
  background: url("/layout/images/nav-contact-us.gif") no-repeat;
}

#nav-wordpress a {
  width: 122px;
  background: url("/layout/images/nav-wordpress.gif") no-repeat;
}

#nav-testimonials a {
  width: 122px;
  background: url("/layout/images/nav-testimonials.gif") no-repeat;
}

/* $3 - Sidebar Styles ///////////////////////////////////////////////////////////////////////////////////*/

.rosette {
  position: absolute;
  top: -12px;
  right: -27px;
}

.all-this {
  margin-bottom:22px;
}

.get-started-link {
  margin-bottom:15px;
}

.samples {
  height: 88px;
  padding: 15px 0;
  margin: 0 0 15px 0;
  background: url("/layout/images/sample-bg.gif") no-repeat;
}

.samples-xhtml {
  margin-bottom: 4px;
}

.quote {
  position: relative; /* IE needs this ??????? */
  padding-top: 15px;
  background: url("/layout/images/quote-bg.gif") 0 0 no-repeat;
}

.quote-bg {
  padding: 0 15px 25px 15px;
  background: url("/layout/images/quote-bg-bottom.gif") 0 100% no-repeat;
}

.quotee {
  text-align: right;
  font-weight: bold;
}

.border-bottom {
  padding-bottom: 10px;
  border-bottom: 1px solid #DCEDF8;
}

/* $3 - Content Styles ///////////////////////////////////////////////////////////////////////////////////*/

#main-content a:link, #main-content a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #ccc;
  padding: 1px;
  color: #BD1C1C;
}

#main-content a:active, #main-content a:hover {
  text-decoration: none;
  border-bottom: 1px dotted #BD1C1C;
  padding: 1px;
}

#main-content A IMG {
}

P {
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 20px;
}

P.p-space {
  margin: 0 0 40px 0;
  padding: 0;
}

#main-content p.index-p {
  padding: 10px;
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  line-height: 20px;
  background: #ECF5FB;
  border-top: 1px solid #ACD2EA;
  border-bottom: 1px solid #ACD2EA;
}

IMG {
  border: 0px;
  vertical-align: middle;
}

H1, H2, H3, H4, H5, H6 {
  margin: 0 0 8px 0;
  padding: 0;
}

H1 {
  margin-top: 40px;
  font-size: 26px;
  font-weight: normal;
}


H2 {

  font-size: 20px;
  font-weight: normal;
}



H3 {

  font-size: 15px;
  font-weight: normal;
  margin-bottom: 14px;

}



.ie-margin {

  margin-bottom: -2px;

}



HTML>BODY .ie-margin {

  margin-bottom: 0;

}





.index-steps {

  position: relative;

  left: -15px;

  margin: 0 -15px 30px 0;

}



#main-content UL {

  margin: 0 0 15px 0;

  padding: 5px 0 0 10px;

  list-style: none;

}



#main-content LI {

    line-height: 1.6em;    

}



UL.tick-ul LI {

  position:relative; /* IE needs this for the BG image ?????? */

  margin: 0 0 6px 0;

  padding: 2px 0 2px 20px;

  list-style: none;

  background: url("/layout/images/tick.gif") 0 50% no-repeat;

}



UL.samples-ul LI {

  position: relative; /* IE needs this for the BG image ?????? */

  margin: 0 0 6px 0;

  padding: 2px 0 2px 24px;

  list-style: none;

  background: url("/layout/images/sample-page.gif") 0 50% no-repeat;

}

    

.divider {

  margin: 0 0 20px 0;

  padding: 0 0 50px 0;

  line-height: 20px;

  background: url("/layout/images/divider.jpg") bottom no-repeat;

}



.clearfix:after {

  content: "."; 

  display: block; 

  height: 0; 

  clear: both; 

  visibility: hidden;

}



/* Hides from IE-mac \*/

* html .clearfix {

  height: 1%;

}



.clearfix {

  display: block;

}

/* End hide from IE-mac */



.faq-button {

  margin-right: 10px;

}



/* $5 - Footer Styles ///////////////////////////////////////////////////////////////////////////////////*/

#footer P {

  color: white;

  font-size: 11px;

}



#footer P A {

  color: white;

}



/* $6 - SIFR Styles ///////////////////////////////////////////////////////////////////////////////////*/

.sIFR-flash {

  visibility: visible !important;

  margin: 0;

}



.sIFR-replaced {

  visibility: visible !important;

}



span.sIFR-alternate {

  position: absolute;

  left: 0;

  top: 0;

  width: 0;

  height: 0;

  display: block;

  overflow: hidden;

}



/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */

.sIFR-flash + div[adblocktab=true] {

  display: none !important;

}



/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter 

spacing in this case is used to make the browser text metrics match up with the sIFR text metrics 

since the sIFR text in this example is so much narrower... your own settings may vary... any weird 

sizing issues you may run into are usually fixed by tweaking these decoy styles */

/* $7 - Form Styles ///////////////////////////////////////////////////////////////////////////////////*/

FIELDSET {

  margin: 0;

  padding: 0;

  border: none;

}

LABEL {

  display: block;

  margin: 0 0 5px 0;

  padding: 0;

  font-weight: bold;

}



INPUT {

  margin: 0 0 10px 0;

  padding: 8px;

  background: #EDF7FC;

  border: 1px solid #AEDBF0;

  font: bold 11px Verdana, Arial, Helvetica, sans-serif;

  color: #267DAC;

}

SELECT {

  margin: 0 0 10px 0;

  padding: 8px;
    width: 239px;
  background: #EDF7FC;

  border: 1px solid #AEDBF0;

  font: bold 11px Verdana, Arial, Helvetica, sans-serif;

  color: #267DAC;

}



TEXTAREA {

  margin: 0 0 15px 0;

  padding: 8px;

  background: #EDF7FC;

  border: 1px solid #AEDBF0;

  font: bold 11px Verdana, Arial, Helvetica, sans-serif;

  color: #267DAC;

}



SPAN.required {

  color: #CC0000;

}



INPUT {

  width: 220px;

  margin-bottom: 15px;

}



.input-upload {

  margin-bottom: 10px;

}



HTML>BODY .input-upload {

  font-size: 150%;

  margin-bottom: 10px;

}



TEXTAREA {

  width: 470px;

}



FORM {

  margin: 0;

  padding: 0;

}

    

.border-p {

  padding-bottom: 20px;

  border-bottom: 1px solid #eaeaea;

}

    

.confirmation {

  color: #81A74E;

  background: #CCDDB5;

  border-top:  1px solid #B3CC91;

  border-bottom:  1px solid #B3CC91;

  padding: 10px;

  font: bold 11px Verdana, Arial, Helvetica, sans-serif;

}





.error {

  background: red;

  color:  #fff;

  padding-top: 10px;

}



.image-submit-get-started {

  width: 190px;

  border: none;

  background: none;

  padding: 0;

}



.image-submit-email {

  width: 150px;

  border: none;

  background: none;

  padding: 0;

}    



#loadBar {

  padding: 10px;

  text-align: center;

  background: #E4F2FA;

  border-top: 1px solid #AED8F0;

  border-bottom:  1px solid #AED8F0;

  color:  #1D6D9E;

  font-weight:  bold;

  margin-bottom:  20px;

}



#loadBar P {

  color:  #1D6D9E;

  font-weight:  bold;

}



#emailSuccess {

  padding:  10px;

  text-align:  center;

  background:  #D8F2C8;

  border-top:  1px solid #7FD74A;

  border-bottom:  1px solid #7FD74A;

  color:  #59AA28;

  font-weight:  bold;

  margin-bottom:  20px;

}



div#quotes {

    background: url("/layout/images/quoted-back.gif") no-repeat center center;

    width: 471px;

    height: 115px;

    padding: 10px 10px 0px 10px;

    font-size: 11px;    

}



/* Blog Sidebar */

blockquote {

margin-left: 0;

padding-left: 1em;

border-left: 5px solid #ddd;

}



pre {

font-size: 11px;

line-height: 200%;

width: 100%;

max-height: 400px;

overflow: auto;

padding: 10px;

background: #eee;

}



code, pre {

font-family: Courier, 'Lucida Console','Courier New', Sans-Serif;

}



#searchform label {

font-weight: 700;

}



#searchform input.submit {

width: 100px;

}



#blog-sidebar {

background: #fff;

color: #111;

width: 25%;

float: right;

margin: 25px 0;

padding: 5px 0;

  color: #1A5A7F;

  font-size: 11px;

}



#blog-sidebar ul {

list-style-type: none;

margin: 2px;

padding: 0;

}



#blog-sidebar ul li ul li {

list-style: circle inside;

padding: 2px 0;

margin-bottom: 5px;

line-height: 1.6em;

}



#blog-sidebar h2 {

font-size: 100%;

margin: 20px 0 0 0;

padding: 4px 0;

}



.h2sidebar {

font-size: 100%;

font-weight: 900;

font-family: Georgia,'Trebuchet MS', 'Lucida Sans', 'Lucida Grande', 'Bitstream Sans Vera', Verdana, Arial, Tahoma, Helvetica, Sans-Serif;

color: #333;

}



#blog-sidebar li a {

border: none;

}



#blog-sidebar li li li {

list-style: circle inside;

border: none;

}



#blog-sidebar a:link, #blog-sidebar a:visited {

  text-decoration: none;

  border-bottom: 1px dotted #ccc;

  padding: 1px;

  color: #BD1C1C;

}



#blog-sidebar a:active, #blog-sidebar a:hover {

  text-decoration: none;

  border-bottom: 1px dotted #BD1C1C;

  padding: 1px;

}

