screen.scss

@import "blueprint/reset";
@import "blueprint";
@import "partials/base";
@import "partials/page";
@import "partials/form";
@import "partials/two_col";

body.bp {
  color: $txt_color;
  position: relative;
  background: $bg_color url("/theme/images/magnetic-bg.jpg");
  a, a:visited {
    color: $link_color; }
  a:hover {
    color: $hover_color; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h1, h2, h3 { 
    text-shadow: #000 2px 2px 3px;
    color: $header_color;
  }
  #header { 
    margin: 10px 0;
    height: 120px;
    position: relative;
    z-index:100;
    top: 0px;
    left: 0px;  }
  #logo {
    float: left;
    margin: 0 0 10px 0;
  }
  #container {
    @include container;
    width: 920px;
    margin: auto;
    padding: 0 60px;
    h1.page_title {
      padding: 16px;
      background-color: #012;
      border: 1px solid #015;
      @include rounded_corners;
      @include drop_shadow;
      font-family: Futura Medium, Century Gothic, AppleGothic, sans-serif;
    }
  }
  #facebox .popup { 
    color: #eee;
    background-color: #ccc; 
    .close { background-color: #333; }
    .content { background-color: #333; } }
  #footer {
    clear: both;
    padding: 20px 0;
    #links {
      padding: 10px 40px;
      color: #AAF;
      background: #333; // url(/theme/images/black50.png);
      @include rounded_corners;
    }    
    text-align: center; 
    position: relative;} }

#site_bar {
  background-color: #000;
  padding: 10px;
  font-size: 14px;
}
#site_bar_content {
  position: relative;
}
#site_bar_branding {
  float: right;
}

#logo {
  margin-top: 50px;
  position: relative;
}

#content {
  margin-top: 20px;
  background: #666; // url("/theme/images/black50.png");
  min-height: 450px;
  padding: 15px;
  @include rounded_corners;
  @include drop_shadow;  }

#site_bar { @include rounded_bottom_corners; }

#menu, #social_media {
  float: right;
  margin: 60px 0 0 0;
  @include drop_shadow(5px);
  position: relative;
  z-index: 10;
}
#menu {
  @include rounded_corners;
  float: right;
  padding: 10px 20px;
  background: #333;
  font-face: Futura, Arial, Verdana, sans-serif;
  font-weight: bold;
  text-shadow: #000 3px 3px 4px;
  ul {
    padding: 0;  
    margin: 0 0 0 10px;
    float: left;
  }
  ul li {
    list-style: none;
    font-size: 18px;
    display: block;
    border-right: #111 1px solid;
    padding: 0 10px;
    float: left;
    display: inline-block;
    a {
      color: $menu_link; 
      text-decoration: none; 
      display: block; 
      padding: 0; } 
  }    
  ul li.last { border-right: none; }
  ul li a:hover {
    color: $menu_hover; }  
}

#social_media {
  width: 120px;
  height: 19px;
  float: right;
  #facebook, #twitter {
    margin: 4px 10px 4px 4px;
    float: right;
    display: inline-block;
  }
  #facebook img, #twitter img {
    @include drop_shadow;    
  }
}

body.bp #body_content {
  display: inline-block;
}

body.bp #container #body_content_page_title {
  position: fixed;
  top: 0;
  right: 0px;
  padding: 8px;
  text-align: right;
  color: #666;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 14px;
  display:none;
}

body.bp #content { position: relative; }

body.bp #new_inquiry {
  margin: 20px 0;
  padding: 20px;
  @include rounded_corners;
  .field {
    margin-bottom: 10px;
    input[type=text], textarea {
      font-size: 16px;
      background-color: #333;
      padding: 8px;
      color: #ddd;
    }
    label {
      display: block;
      font-size: 14px;
      color: $label_color;
    }
  }
  input[type=submit] {
    @include rounded_corners;
    background: url(/theme/images/black50.png);
    color: $link_color;
    padding: 8px;
    font-size: 18px;
  }
  input[type=submit]:hover {
    background-color: $link_color;
    color: black;
    cursor: pointer;
  }
}

body.bp p {
  font-size: 14px;
}

#pages-home #body_content_left p {
  font-size: 12px;
  font-weight: normal;
  font-family: "Verdana", "Arial", "Helvetica", "Gill Sans", sans-serif;
  img {
    float: left;
    margin-right: 15px;
  }
}

#body_content_left {
  float: left;
  color: #fff;
  display: inline-block;
  width: 70%;
  background-color: #333;
  @include rounded_corners;
  padding: 15px 10px;
  .spotlight {
    display: inline-block;
    float: left;
    padding: 10px;
    width: 275px;
    min-height: 120px;
    margin-right: 10px;
    margin-bottom: 25px;
    @include rounded_corners;
    background-color: #333;
    border: #666 10px solid;
  }
  .spotlight.right { margin-right: 0; }
  .spotlight.top { 
    border: #666 10px solid;
    margin-top: 25px;
    width: 600px;
  }
}

#body_content_right {
  float: left;
  display: inline-block;
  margin-left: 10px;
  padding: 10px;
  width: 180px;
  background-color: #333;
  color: #eee;
  @include rounded_corners;

  .filter {
    width: 140px;
    padding: 20px;
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
    background-color: #444;
    @include rounded_corners;
  }
  .filter:hover { cursor: pointer; background-color: #222; }

  .filter.theatre { color: $theatre_color; }
  .filter.comedy { color: $comedy_color; }
  .filter.music { color: $music_color; }
  .filter.other { color: $other_color; }

  .filter.active:hover { background-color: #444; }
  .filter.theatre:hover { color: $theatre_color - 50; }
  .filter.comedy:hover { color: $comedy_color - 50; }
  .filter.music:hover { color: $music_color - 50; }
  .filter.other:hover { color: $other_color - 50; }

  .filter.active { background-color: #222; }

  .filter.active.theatre { color: $theatre_color - 50; }
  .filter.active.comedy { color: $comedy_color - 50; }
  .filter.active.music { color: $music_color - 50; }
  .filter.active.other { color: $other_color - 50; }

  .filter.active.theatre:hover { color: $theatre_color; }
  .filter.active.comedy:hover { color: $comedy_color; }
  .filter.active.music:hover { color: $music_color; }
  .filter.oactive.ther:hover { color: $other_color; }


}

#body_content_left {
  width: 640px;
  margin-right: 20px;
}

#body_content.no_body_content_right #body_content_left {

  width: 870px;
}

body.bp ul#events {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #eee;
  li {
    list-style: none;
    border: 1px solid #000;
    @include drop_shadow;
    margin: 0 0 5px 0;
    overflow: hidden;
    padding: 8px 5px 3px 8px;
    .logo, .description {
      float: left;
      display: inline;
    }
    .logo {
      width: 100px;
      img {
        width: 100px;
      }
    }
    .description {
      margin-left: 30px;
      width: 480px;
    }
    .title {
      font-size: 14px;
      display: block;
      margin-bottom: 4px;
      cursor: pointer;
    }
    .title:hover {
      color: #aaa;
    }
    .more {
      border-top: #999 1px dotted;
      padding-top: 10px;
      margin-top: 4px;
    }
    .tag_marker {
      width: 18px;
      height: 18px;
      float: left;
      display: inline-block;
      margin-right: 10px;
      @include rounded_corners;
    }
    .tag_marker.theatre { background-color: $theatre_color; }
    .tag_marker.comedy { background-color: $comedy_color; }
    .tag_marker.music { background-color: $music_color; }
    .tag_marker.other { background-color: $other_color; }
    .tickets {
      float:right;
      margin-top:-20px;
      margin-right: 20px;
      font-size: 12px;
      a {
        text-decoration: none;
      }
    }
  }
  li.even { background-color: #222; }
  li.odd { background-color: #333; }
}

body.bp #event_gallery {
  width: 100%;
  #events {
    padding: 0px;
    overflow: hidden;
    .event {
      .title {
        font-size: 24px;
      }
      .tickets {
        float:right;
        margin-top:-50px;
        a {
          font-size: 20px;
          text-decoration: none;
        }
      }
      .logo {
        clear:both;display:inline-block;float:left;
        background-color: #000;
        width: 250px;
        padding: 8px 4px;
        border: 1px solid $copy_bg;
        @include rounded_corners;
        @include drop_shadow;
        text-align: center;
        img {
          max-width: 250px;
        }
      }
      .info {
        padding: 10px 15px;
        width: 640px;
        @include rounded_corners;
        background-color: #000;
        color: #ffffff;
        display:inline-block;
        float:right;
        margin-left:20px;
        overflow: auto;
      }
    }
  }
  
  #event_picker {
    margin: 40px auto;
    padding: 10px;
    text-align: center;
    @include rounded_corners;
    background-color: #000;
    .event_icon {
      display: inline-block;
      height: 60px;
      padding: 0 10px;
      position: relative;
      .logo {
        max-width: 100px;
        overflow: hidden;
        cursor: pointer;
        img {
          height: 70px;
          position: relative;
        }
      }
      .info {
        position: absolute;
        top: -66px;
        margin-bottom: -56px;
        padding: 8px;
        background: url(/theme/images/black70.png);
        border: 2px solid #000;
        color: $link_color;
        letter-spacing: .3ex;
        @include rounded_corners;
        width: 200px;
        z-index: 80;
      }
    }
    .picker-left {
      float: left;
    }
    .picker-right {
      float: right;
    }
  }
}

body.bp #body_content_right {
  h1 { font-size: 16px; }
  h2 { font-size: 14px; }
  h3 { font-size: 13px; }
  h4 { font-size: 12px; }
  h5 { font-size: 11px; }
  h6 { font-size: 10px; }
  h1,h2,h3,h4,h5,h6 { font-weight:bold; }
  margin-bottom: 40px;
}

body.bp .article {
  border-bottom: 1px solid white;
  margin-bottom: 40px;
  padding: 0 0 20px 0;
  background: url('/theme/images/black70.png');
  @include drop_shadow;
  @include rounded_bottom_corners;
  border: 1px solid $border_color;
  .article-body {
    padding: 30px 10px 10px 10px;
  }
  p.article-pub-date {
    display: inline-block;
    float: right;
    margin: 5px 15px 0 0;    
    padding: 0 10px 0 0;
    color: $link_color;
  }
  h3 {
    padding: 10px;
    margin: 0;
    font-size: 24px;
    @include rounded_top_corners;
    a {
      color: $link_color + 50;
    }
  }
}

body.bp {
  ul.sidebar_events {
    margin: 0;
    padding: 0;
    list-stlye: none;
    li {
      list-style: none;
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: #ccc 1px dotted;
      line-height: 14px;
      a { color: white; text-decoration: none; }
    }
  }
  .side_body p { font-size: 11px; }
}