/* ------ NOTES ----------------------------------------------------------------

Master screen style for Burt.

--------- CONTENTS -------------------------------------------------------------

1: BODY AND UNIVERSAL RESET
2: PAGE STRUCTURE
3: START PAGE STYLES
4: FORMS
5: ERRORS AND NOTICES
6: GLOBALS
7: MISC
8: OVERLAYS
9: BUTTONS

----------------------------------------------------------------------------- */



/* 1: BODY AND UNIVERSAL RESET
============================================================================= */

body {
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  color: #4c4c4c;
  font: 12px/160% "Helvetica Neue", Arial, Verdana, sans-serif;
  text-align: center;
  }

/* Reset margin and padding for all elements */

* {margin: 0; padding: 0;}

/* Remove outline for link tags */

a {outline: none;}

/* 2: PAGE STRUCTURE
============================================================================== */

/* Containers */

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

/* Header */

#header {
  float: left;
  width: 100%;
  height: 45px;
  margin: 0 0 30px;
  background: #20201f url(../images/top-shadow.png) bottom left repeat-x; 
  }

/* Main content */

#main {float: left; width: 950px; padding: 0 15px 30px;}
#main {padding-bottom: 0;}
#main .red {color: #d31900;}
#main .green {color: #056b00;}
#main .blue {color: #007cc3;}
#main .orange {color: #ff7e00;}
#main .box-content {padding: 20px;}
  
.blackbox-big {
  position: relative;
  float: left;
  width: 910px;
  min-height: 327px;
  padding: 20px 20px 0;
  margin-bottom: 10px;
  color: #ccc;
  background: #000 url(../images/bg-bigbox.png) top left repeat-x;
  font-size: 14px;
  -webkit-text-stroke: 1px transparent;
  }
.blackbox-big img {position: absolute; bottom: 0; left: 7px;}
.blackbox-big h1 a:hover {background: none; border: none;}

.info {float: right; width: 425px;}
.info h1 {
  margin: 10px 0;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px #000;
  font-size: 28px;
  font-weight: bold;
  font-family: Gotham, Avenir, "Helvetica Neue", Arial, sans-serif;
  line-height: 120%;
  }
.info ul {list-style: disc inside;}
.info form {
  float: left;
  position: relative;
  width: 390px;
  padding: 10px 15px 0; 
  height: 60px;
  margin-top: 22px;
  background: url(../images/bg-form.png) top left no-repeat;
  }
.info label {
  float: left;
  margin: 10px 10px 0 0;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px #333;
  font-size: 11px;
  font-weight: bold;
  font-family: Gotham, Avenir, "Helvetica Neue", Arial, sans-serif;  
  }
.info .text {
  float: left;
  width: 187px;
  height: 21px;
  margin-top: 4px;
  padding: 7px 6px 1px;
  color: #333;
  background: url(../images/bg-textinput.png) center left no-repeat;
  border: none;
  outline: none;
  }
.info .submit {position: absolute; top: 14px; right: 11px;}

.blackbox {
  float: left;
  width: 430px;
  padding: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #ccc;
  background: #000 url(../images/bg-box.png) top left repeat-x;
  -webkit-text-stroke: 1px transparent;
  }
.blackbox img {float: left; margin-right: 30px;}
.blackbox img a {border: none; background: none;}
.blackbox div {margin: 5px 0 0;}
.blackbox h2 {
  display: inline;
  padding: 3px 26px 0 0;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px #000;
  font-size: 22px;
  font-weight: bold;
  font-family: Gotham, Avenir, "Helvetica Neue", Arial, sans-serif;
  line-height: 120%;
  background: url(../images/link-arrow.png) right center no-repeat;
  }
.blackbox h2 a {color: #fff; background: none; border: none;}
.blackbox p {margin: 5px 0 0;}

#introduction {
  float: left;
  padding: 20px 20px 20px 20px;
  background-color: white;
  }
#introduction h1 {margin: 20px 0 20px; text-transform: uppercase;}
#introduction p {
  font-size: 16px; 
  text-shadow: 0 1px 1px #fff;
  line-height: 150%;
  }
#introduction img {
  float: left;
  margin-right: 1em;
  margin-top: 0.5em;
  }

.sidebar {
  padding: 8px 0;
  background-color: white;
  margin-bottom: 10px;
  }
.sidebar h3 {
  margin: 0 0 15px;
  padding: 0 20px 8px;
  color: #de4400;
  border-bottom: 1px solid #e5e5e5;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  }
.sidebar h4 {padding: 0 20px 5px;}
.sidebar p {
  padding: 0 20px 0;
  margin: 0 0 13px;
  font-size: 13px;
  }
.sidebar a {font-weight: bold;}
.sidebar ul {list-style: none; padding: 0 20px 10px;}
.sidebar dl {padding: 0 20px 0; margin: 0 0 10px;}
.sidebar dt {font-size: 13px;}
.sidebar dd {margin: 0 0 10px; color: #999;}
.sidebar .about {
  background: url(/images/icon-information.gif) 275px 2px no-repeat;
  }
.sidebar .products {
  background: url(/images/icon-bricks.gif) 275px 2px no-repeat;
  }
.sidebar .tweets {
  background: url(/images/icon-comments.gif) 275px 2px no-repeat;
  }
.sidebar .blog {
  background: url(/images/icon-pencil.gif) 275px 2px no-repeat;
  }

/* Columns */

.one-col, .two-col, .three-col, .four-col, .five-col, .six-col,
.seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col {
  float: left; margin-right: 10px;
  }

.one-col {width: 70px;}
.two-col {width: 150px;}
.three-col {width: 230px;}
.four-col {width: 310px;}
.five-col {width: 390px;}
.six-col {width: 470px;}
.seven-col {width: 550px;}
.eight-col {width: 630px;}
.nine-col {width: 710px;}
.ten-col {width: 790px;}
.eleven-col {width: 870px;}
.twelve-col {width: 950px; margin-right: 0;}

.last {margin-right: 0 !important;}

/* Boxes */

.flat-white {
  float: left;
  margin-bottom: 10px;
  background: #fff;
  }

.box {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  background: url(http://burt-assets.s3.amazonaws.com/box-repeat.png) left top repeat-y;
  }
.box .right {
  float: right;
  background: url(http://burt-assets.s3.amazonaws.com/box-right-repeat.png) right top repeat-y;
  width: 100%;
  }
.box .bottom {
  float: left;
  width: 100%;
  background: url(http://burt-assets.s3.amazonaws.com/box-bottom.png) left bottom no-repeat;    
  }
.box .bottom-right {
  float: right;
  background: url(http://burt-assets.s3.amazonaws.com/box-bottom-right.png) bottom right no-repeat; 
  width: 100%;
  }

.box-content {padding: 14px;}

.box-content-big {padding: 24px;}

/* Footer */

#footer {
  position: relative;
  float: left;
  width: 910px;
  margin: 10px 15px 20px;
  padding: 20px;
  background: #000;
  color: #898989;
  font-weight: bold;
  font-size: 11px; 
  text-transform: uppercase;
  text-shadow: 0 1px 1px #20201f;
  }
#footer div {float: left; width: 130px; margin: 0 20px 0 0;}
#footer h3 {
  margin-bottom: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid #373736;
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  }
#footer ul {list-style: none;}
#footer li a {color: #898989;}
#footer li a:hover {border: none; color: #fff; background-color: transparent;}
#footer .logo {position: absolute; top: 20px; right: 20px;}
#footer .copy {
  position: absolute;
  bottom: 20px;
  right: 20px;
  margin: 0;
  }


/* 4: FORMS
============================================================================= */

fieldset {border: none;}

label {font-weight: bold;}

fieldset.thanks {
  display: none;
  width: 100%;
  text-align: center;
  }
  
fieldset.thanks label {
  width: 100%;
  }
  
input.disabled {
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  }

/* 5: ERRORS AND NOTICES
============================================================================= */

.flash, .big-flash {
  float: left;
  width: 940px;
  margin: 0 19px 20px;
  text-align: center;
  }
.flash span, .big-flash span {
  width: 916px;
  float: left;
  padding: 8px;
  background: transparent;
  border: 4px solid #fff;
  }

.big-flash {margin: 0 4px 20px; text-align: left;}
.big-flash span {width: 900px; padding: 16px 16px 16px;}
  
body .big-flash {
  width: 950px;
  margin-left: -1px;
  margin-right: 0;
  }
body .big-flash span {
  width: 910px;
  }
  
.notice, .failure, .error, .success, .note {
  color: #085500;
  background: #cfeacc;
  border: 1px solid #0f9800;
  font-weight: bold;
  }
.failure, .error {
  color: #b00000;
  background: #f6d3cc;
  border-color: #d22300;
  }
.note {
  color: #414141;
  background: #fef9d5;
  border-color: #e9c8a2;
  font-weight: normal;
  }

#errorExplanation {
  margin: 0 0 2em;
  width: 600px;
  color: #555;
  }
#errorExplanation h2 {
  margin: 0 0 .7em;
  padding: 0;
  color: #c00;
  font-size: 18px;
  }
#errorExplanation p {margin: 0 0 .5em;}
#errorExplanation ul {list-style: square inside; margin-left: 10px;}

.no-data {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-style: italic;
  font-size: 16px;
  }


/* 6: GLOBALS
============================================================================= */

/* Links */

a:link, a:visited {color: #007cc3; text-decoration: none; font-weight: bold;}
a:hover {border-bottom: 1px solid #7dbce0; margin-bottom: -1px; background: #dcf1ff;}

a.edit, a.delete {border: none !important;}

/* Typography */

h1, h2 {
  display: block;
  margin: 20px 0 15px;
  font-size: 28px;
  }
h2 {margin: 1.5em 0 .8em; font-size: 22px;}

p {margin: 0 0 1em;}

img {border: none;}

.right {float: right !important;}


/* 7: MISC
============================================================================= */

/* Clear floats (http://positioniseverything.net/easyclearing.html) */

.clear:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: ".";
  }
.clear {display: inline-block;}
.clear {display: block;}

* html .clear {height: 1px;}

.clearall {
  clear: both;
  display: block;
  font-size: 1px;
  height: 1px;
  line-height: 1px;
  margin: 0;
  }

.hide {display: none;}

/* Force scrollbar, avoid annoying side jumping on short pages */

html {height: 100%; margin-bottom: 1px;}


/* 8: OVERLAYS
============================================================================= */

div.overlay {
  display: none; 
  z-index: 10000;
  padding: 25px 20px;
  min-height: 200px;  
  background: #fff;
  background-image: url(/images/blank.gif) !important; 
  text-align: left;
  -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25); 
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

div.overlay h1 {
  margin-left: 0; font-size: 22px
}
    
div.loading {
  background: #fff url('/images/spinner_big.gif') center no-repeat;
  height: 200px;
  display: block;
}

div.overlay div.close {
  background-image: url(/images/overlay/rich-close2.png);
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  height: 24px;
  width: 67px;
}

div.overlay div.close:hover {
  background-position: 0 -24px;
}

div.overlay div.close:active {
  background-position: 0 -48px;
}


/* 9: BUTTONS
============================================================================= */
.btn, .btn-onwhite, .btn-gray {
  display: block;
  float: left;
  height: 32px;
  padding-right: 18px;
  border: none;
  background: transparent url(/images/btn-right.png) top right no-repeat;
  color: #ffffff !important;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px #36843d;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

.btn span {
  background: transparent url(/images/btn-left.png) top left no-repeat;
  display: block;
  padding: 0 0 0 18px;
  line-height: 32px;
}
.btn-onwhite span {
  background: transparent url(/images/btn-left.png) top left no-repeat;
  display: block;
  padding: 0 0 0 18px;
  line-height: 32px;
}
btn-gray span {
  background: transparent url(/images/btn-left.png) top left no-repeat;
  display: block;
  padding: 0 0 0 18px;
  line-height: 32px;
}
.btn-onwhite {
  height: 26px;
  background: transparent url(/images/btn-right-onwhite.png) top right no-repeat;
}
.btn-onwhite span {
  background: transparent url(/images/btn-left-onwhite.png) top left no-repeat;
  line-height: 26px !important;
}
.btn-gray {
  float: right;
  height: 20px;
  padding-right: 8px;
  background: transparent url(/images/btn-right-gray.png) top right no-repeat;
  text-shadow: 0 1px 1px #ffffff;
  color: #666666 !important;
  text-transform: none;
}
.btn-gray span {
  padding: 0 0 0 8px !important;
  background: transparent url(/images/btn-left-gray.png) top left no-repeat;
  line-height: 20px !important;
  display: block;
}
.btn:hover {
  color: #ffffff !important;
  text-decoration: none;
  border: none;
  margin-bottom: 0px;
  background-position: center right;
}
.btn-onwhite:hover {
  color: #ffffff !important;
  text-decoration: none;
  border: none;
  margin-bottom: 0px;
  background-position: center right;
}
.btn-gray:hover {
  color: #ffffff !important;
  text-decoration: none;
  border: none;
  margin-bottom: 0px;
  background-position: center right;
}
.btn:hover span {
  background-position: center left;
  display: block;
  line-height: 32px;
}
.btn-onwhite:hover span {
  background-position: center left;
  display: block;
  line-height: 32px;
}
.btn-gray:hover span {
  background-position: center left;
  display: block;
  line-height: 32px;
}
.btn:active { background-position: bottom right; }
.btn-onwhite:active { background-position: bottom right; }
.btn-gray:active { background-position: bottom right; }
.btn:active span { background-position: bottom left; }
.btn-onwhite:active span { background-position: bottom left; }
.btn-gray:active span { background-position: bottom left; }
.btn-gray:hover { color: #007cc3 !important; }
.btn-onwhite, .btn-gray { margin-bottom: 1px !important; }
.disabled { opacity: 0.5 !important; }