/*----------------------------------+
 | Site: Particulate Matters to Me! |
 | Part: Master styles              |
 +----------------------------------*/

/* Imports
=====================================================================*/
@import "reset.css"; /* Reset styles */
@import "ie.css"; /* Internet Explorer */


/* Fonts
======================================================================*/
h1, h2 { font-family: Georgia, "Times New Roman", Roman, serif; }
body, input, select, textarea { font-family: Arial, sans-serif; }


/* Basics
======================================================================*/
a, h1, h2 { color: #0075ba; }
blockquote, dl, ol, p, table, ul { margin-bottom: 1em; }
body { font-size: 1.05em; line-height: 1.4; padding-bottom: 2em; }
cite, em { font-style: italic; }
h1 { font-size: 2.1em; line-height: 1.1; margin-bottom: 0.25em; }
h1, h2 { font-weight: normal; }
h2 { font-size: 1.7em; margin-bottom: 0.25em; }
h3 { color: #3d691e; font-size: 1.1em; }
h3, h4, h5, h6, strong { font-weight: bold; }
ol { list-style: decimal; margin-left: 1.5em; }
ol li { margin-bottom: 0.5em; }
ol ol { list-style: lower-alpha; }
table { border-collapse: collapse; }
table p { margin: 0; }
td { vertical-align: top; }
thead th { font-size: 1em; padding: 0 0.4em 0.25em; }
ul { list-style: disc; margin-left: 1.5em; }
ul ol li { background: none; padding: 0; }


/* Core layout
======================================================================*/
.clear { clear: both; }

/* Content */
#content { margin: 0 auto; padding: 2em 0; width: 960px; }
#content-primary-secondary { float: right; width: 100%; }

  /* Home */
  #home { background: url(/images/city.png) repeat-x 50% 0; }
  #home #content { font-size: 0.8em; padding: 2em 0 7em 400px; width: 560px; }
  #home #content .primary, #home #content .secondary { margin-bottom: 1.5em; }


/* Content
======================================================================*/
/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
img.call-l { margin-right: 1em; }
img.call-r { margin-left: 0.5em; }
.call-l { float: left; margin: 0.5em 2em 0.5em 0; }
.call-r { float: right; margin: 0.5em 0 0.5em 1em; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }

/* Feature */
#feature { background: #4d7423 url(/images/land.png); padding: 1.5em 0; }
#feature, #feature * { color: #fff; }
#feature h2 { font-size: 2em; line-height: 1.2; margin-bottom: 0.25em; }
#feature-content { margin: 0 auto; padding-left: 400px; width: 560px; }
#feature .primary { float: right; width: 58.8%; }

/* Footer */
#footer { border-top: 1px solid #ddd; clear: both; padding-top: 1em; }
#footer-content { color: #777; font-size: 0.7em; margin: 0 auto; text-align: right; width: 960px; }

  /* Partners */
  #partners { margin: 0; }
  #partners a { opacity: 0.5; }
  #partners a:hover { opacity: 1; }
  #partners li { margin-right: 1.5em; }
  #partners, #partners li { float: left; list-style: none; }

/* Forms */
.form { margin-bottom: 2em; }
.form dt { clear: both; margin: 0; padding: 0.5em 0 0 20%; }
.form .label { float: left; margin-left: -23%; text-align: right; width: 29%; }
.form .field { padding-left: 28%; }
.form p { margin-bottom: 0.25em; }
  
  /* Entry form */
  #entry {
    background: #eefae2;
    border: 7px solid #fff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 6px #999;
    -webkit-box-shadow: 0 0 6px #999;
    float: left;
    font-size: 0.75em;
    margin-bottom: 2em;
    padding: 1.3em 2% 0.5em;
    position: relative;
    width: 32.2%;
  }
  
  #entry h3 { font-size: 1.5em; }
  
  #entry-flare {
    background: url(/images/plants.png) no-repeat 0 0;
    height: 239px;
    left: -88px;
    position: absolute;
    top: -60px;
    width: 237px;
  }
  
    /* Questions */
    .questions { list-style: none; margin-left: 0; }
    .questions input { margin-left: 0; }
    .questions li { margin-bottom: 1.5em; padding-left: 3.3em; }
    
    .questions .num {
      background: #487523;
      border: 3px solid #94b876;
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px;
      color: #fff;
      float: left;
      font-size: 1.35em;
      font-weight: bold;
      line-height: 1;
      margin-left: -2.6em;
      padding: 0.3em 0;
      text-align: center;
      width: 1.7em;
    }
    
    .questions ul { list-style: none; margin-left: 0; }
    .questions ul li { height: 1%; margin: 0; padding-left: 20px; text-indent: -20px; }
    
      /* Answers */
      .answers .correct { background-image: url(/images/correct.png); color: green; }
      .answers .correct, .answers .incorrect, .answers .not-chosen { background-position: 0 2px; background-repeat: no-repeat; padding: 1px 0 1px 20px; text-indent: 0; }
      .answers .correct input, .answers .incorrect input { display: none; }
      .answers .incorrect { background-image: url(/images/incorrect.png); color: red; }
      .explanation { background: #ffc; border: 1px solid #ddd; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 0.5em 1em; }
      .not-chosen { background-image: url(/images/not-chosen.png); color: #999; }
      .not-chosen input { left: -9999em; position: absolute; top: 0; }
  
  /*--- Help text ---*/
  .field-help { color: #555; font-size: 0.9em; font-weight: normal; }
  
  /* Notifications */
  div.alert, div.confirm, div.notice { color: #000; margin-bottom: 1em; padding: 0.5em 1em 0.5em 43px; }
  div.alert *, div.confirm *, div.notice * { margin: 0; }
  div.alert a, div.confirm a, div.notice a { text-decoration: underline; }
  div.alert a:hover, div.confirm a:hover, div.notice a:hover { text-decoration: none; }
  div.alert .mute, div.confirm .mute, div.notice .mute { font-size: 1em; }
  div.alert li, div.confirm li, div.notice li { background: none; padding: 0; }
  div.alert ul, div.confirm ul, div.notice ul { list-style: disc outside; margin-left: 2em; }
  
    /* Alerts */
    .alert { color: #e30013; }
    div.alert { background: #ffd4d4; border: 3px solid #dd9898; }
    
    /* Confirmations */
    div.confirm { background: #d8ffd4 url(/images/admin/notify-confirm.gif) no-repeat 10px 0.6em; border: 3px solid #9edd98; }
    
    /* Validation Error */
    label.error { color: #e30013; }
    input.error, select.error { border: 2px solid #e30013; }
    
    /* Notices */
    div.notice { background: #fff6d3 url(/images/admin/notify-notice.gif) no-repeat 10px 0.5em; border: 3px solid #ffe27e; }
  
  /* Options */
  .options-h, .options-v { list-style: none; margin-left: 0; }
  td .options-h, td .options-v { margin: 0; }
  .options-h input, .options-v input { margin-bottom: -0.05em; }
  .options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
  .options-h li, .options-v li { background: none; margin-bottom: 0.3em; padding: 0; }
  .options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
  .options-v li { padding-left: 25px; text-indent: -25px; }
  .options-v li p { margin: 0; text-indent: 0; }
  
  /* Text boxes */
  textarea.txt { font-size: 1em; height: 1%; padding: 0.3em 0 0 0.3em; width: 98%; }
  .txt { width: 98%; }
  .txt-med { margin-right: 0.5em; width: 47%; }
  .txt-sm { width: 7em; }
  .txt-tiny { width: 3em; }
  
  .txt, .txt-sm, .txt-med, .txt-tiny {
    background: #fff url(/images/field-bg.gif) repeat-x 0 0;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    border-top: 0;
    padding: 0.3em;
  }

/* Header */
#header { background: url(/images/city.png) repeat-x 50% 0; }
#header-content { margin: 0 auto; position: relative; width: 960px; }
#logo { float: left; padding-top: 53px; }
#utilities { float: right; font-size: 0.65em; margin-top: 25px; }
#lang { position: absolute; right: 120px; top: 20px; }

/* Intro */
#intro { clear: both; margin: 0 auto; position: relative; width: 960px; }
#intro-content { float: right; width: 58.8%; }
#intro-content p { margin-bottom: 0.5em; }
#intro-content .secondary { font-size: 0.8em; }

  /* Home */
  #home #intro { height: 378px; }
  
  /* Zoom zoom */
  .zoom { background-position: 0 0; background-repeat: no-repeat; height: 68px; position: absolute; width: 159px; }
  #zoom1 { background-image: url(/images/car-blue.png); right: 200px; top: 303px; }
  #zoom2 { background-image: url(/images/car-yellow.png); right: 380px; top: 273px; }
  #zoom3 { background-image: url(/images/car-green.png); right: 0; top: 273px; }

/* Muted text */
.mute { color: #7f8183; font-size: 0.85em; line-height: 1.3; }