/*
 * CSS for promise.tv website
 * 2011 Dominic Ludlam
 */

/* global page styles */
body {
  background: #ddd;
  color:      #333;
  font:       12pt sans-serif;
  margin:     0;
  padding:    0;
}

/*a       { color: #3D83C4; }*/
a       { color: #37B; }
a:hover { color: #900;    }

h1 { font: 22pt "Museo-700";  color: #ff2712; margin: 1.1em 0 0.2em; }
h2 { font: 20pt "Museo-700";  color: #ff2712; margin: 1.1em 0 0.2em; }
h3 { font: 18pt "Museo-700";  color: #ff2712; margin: 1.1em 0 0.2em; }
p  { font: 10pt sans-serif; color: black;   margin: 1em 0; line-height: 1.5em; }

h1:first-child { margin-top: 18px; }
h2:first-child { margin-top: 18px; }
h3:first-child { margin-top: 18px; }

h1 > a { color: inherit; text-decoration: none; margin: inherit; }
h2 > a { color: inherit; text-decoration: none; margin: inherit; }
h3 > a { color: inherit; text-decoration: none; margin: inherit; }

h1 > a:hover { color: #ff2712; text-decoration: none; }
h2 > a:hover { color: #ff2712; text-decoration: none; }
h3 > a:hover { color: #ff2712; text-decoration: none; }

a > img        { border: none; outline: none; }
a > img:hover  { border: none; outline: none; }

dl { font: 10pt sans-serif; color: black; margin: 1em 3em; }
dt { font-weight: bold; }
dd { margin: 0.3em 0 1.2em 2em; line-height: 1.5em; }

ul { font: 10pt sans-serif; color: black; }
li { line-height: 1.7em; }

table { border-collapse: collapse; }
td { font: 10pt sans-serif; color: black; padding: 0.5em 1.5em 0.5em 0.5em; }


/* drop shadow */
.shadow_blue {
  background: transparent url('/images/bg_blue.png') repeat-y;
  width: 984px;
  margin: 0 auto;
  padding: 0;
}

.shadow_white {
  background: transparent url('/images/bg_white.png') repeat-y;
  width: 984px;
  margin: 0 auto;
  padding: 0;
}

.shadow_grey {
  background: transparent url('/images/bg_grey.png') repeat-y;
  width: 984px;
  margin: 0 auto;
  padding: 0;
}

.shadow_footer {
  background: transparent url('/images/bg_footer.png') no-repeat;
  width: 984px;
  height: 20px;
  margin: 0 auto;
}

.shadow_inner     { padding: 0 25px; }
.shadow_inner_2px { padding: 1px 25px; }


/* buy area price and button */
.buy {
  width: 280px;
  margin: 40px auto 0 auto;
  text-align: center;
}

.price { 
  font: 22pt "Museo-700";
  color: #ff2712;
  margin: 1.1em 0 0.2em;
}

.price:first-child { margin-top: 18px; }

.button a {
  color: white;
  text-decoration: none;
}

.button {
  color: #338ef3;
  font: 22pt Museo-700, sans-serif;
  text-align: center;
  padding: 7px 25px;
  cursor: pointer;
  margin-top: 9px;

  background: #ff2712;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa), color-stop(100%,#e22));
  background: -webkit-linear-gradient(top, #faa 0%, #e22 100%);
  background:    -moz-linear-gradient(top, #faa 0%, #e22 100%);
  background:     -ms-linear-gradient(top, #faa 0%, #e22 100%);
  background:      -o-linear-gradient(top, #faa 0%, #e22 100%);
  background:           linear-gradient(top, #faa 0%, #e22 100%);

  border: 2px solid black;

  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
}

.button:hover {
  background: #f44;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcc), color-stop(100%,#f44));
  background: -webkit-linear-gradient(top, #fcc 0%, #f44 100%);
  background:    -moz-linear-gradient(top, #fcc 0%, #f44 100%);
  background:     -ms-linear-gradient(top, #fcc 0%, #f44 100%);
  background:      -o-linear-gradient(top, #fcc 0%, #f44 100%);
  background:    -moz-linear-gradient(top, #fcc 0%, #f44 100%);
  background:         linear-gradient(top, #fcc 0%, #f44 100%);
}

.button:active {
  background: #f44;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f66), color-stop(100%,#f44));
  background: -webkit-linear-gradient(top, #f66 0%, #f44 100%);
  background:    -moz-linear-gradient(top, #f66 0%, #f44 100%);
  background:     -ms-linear-gradient(top, #f66 0%, #f44 100%);
  background:      -o-linear-gradient(top, #f66 0%, #f44 100%);
  background:         linear-gradient(top, #f66 0%, #f44 100%);
}

/* containers */
#main {
  clear: both;
  width: 940px;
  margin: 0;
  padding: 1em 0 1em 0;
}


/* top logo and page image */
#header {
  padding-top: 1.5em;
  height: 180px;
}

#header_logo {
  float: left;
  padding-left: 0.7em;
}

#logo {
  width: 500px;
  height: 128px;
}

#tagline {
  margin: -1em 0 1.2em 1.6em;
  font-size: 1.45em;
  font-family: "Museo-700";
  font-weight: bold;
}

#tagline > a {
  color: #000;
  text-decoration: none;
  letter-spacing: 6px;
}


/* column containers */
.col-left {
  display: inline;
  float: left;
  margin: 0 60px 0 0;
  width: 440px;
  /* outline: 1px solid blue; */
}

.col-right {
  display: inline;
  float: left;
  width: 380px;
  margin: 0 10px 0 50px;
  /* outline: 1px solid green; */
}

.clear { clear: both; margin: 0; height: 0px; }


/* navigation buttons */
#header_nav {
  float: right;
  margin: 58px 2.3em 0 0;
}

#header_nav a {
  font: 13pt Museo-700 sans-serif;
  text-decoration: none;
  color: black;
  padding: 0 0.6em;
}

#header_nav a:hover {
  text-decoration: underline;
}


/* footer section */
#footer {
  width: 984px;
  margin: 0 auto;
  padding: 20px 0 2em;
  font: 9pt sans-serif;
  color: #777;
}

#footer p { margin: 1em 0; font: inherit; }

#footer li { list-style: none; margin: 0.6em 0; }

#footer li > a       { color: black; text-decoration: none; }
#footer li > a:hover { color: black; text-decoration: underline; }

#footer_group {
  display: inline;
  float: left;
  width: 300px;
  margin-left: 10px;
  margin-right: 10px;
}


/* Image captions */
.caption {
  font: 9pt sans-serif;
  /* font-weight: bold; */
  text-align: center;
  line-height: 1.5em;
}


/* FAQ */
dl.faq { font: 9pt sans-serif; margin: 0 0 0 1.5em; }
dl.faq dt { display: list-item; list-style-type: disc; margin: 0.5em 0; cursor: pointer; /*font-weight: normal;*/ }
dl.faq dt:hover { text-decoration: underline; }
dl.faq dd { /* display: none; */ margin-left: 0; }


/*
 * Page specific styles
 */

/* front page floating elements */
#me_with_box {
  float: right;
  width: 380px;
  margin-top: -80px;
  margin-left:  80px;
}

#me_with_box > p {
  color: #ff2712;
  font: 15pt "Museo-700";
  font-weight: bold;
  text-align: center;
  margin: 1em 1.6em 0 3em;
}

#buy_now {
  float: right;
  margin-top: -65px;
  margin-right: -190px;
}


/* what-is-it page */
.col-right > img:first-child {
  margin-top: 25px;
  text-align: right;
}


/* product details pages */
.limited-supply {
  background: #fdd;
  border: 2px solid red;
  padding: 0 1em;
/*  margin-right: -50px;*/
}