/* Global Margin & Padding Defaults for Browser Compatibility */

body, div, span, a, h1, h2, h3, h4, h5, h6, br, img {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
}

input:focus {
    outline: none;
}

a {
    color: #999999;
    text-decoration: none;
}

a:hover {
    color: #999999;
    text-decoration: underline;
}

ul {
    list-style-type: none;
}

.link:hover {
    color: #999999;
    text-decoration: underline;
}

a img {
    border: none;
}

body {
    background-color: #FFFFFF;
    color: #777777;
    font-family: verdana, sans-serif; /* also use: arial, helvetica, sans-serif; */
    font-size: 12px;
    position: absolute;
    text-align: center;
    width: 100%;
}


/* START: Raw Base CSS Template Designations */

.hidden {
    display: none;
}

.preheader {
    background-color: #8B9298;
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-height: 0px;
    position: relative;
    text-align: center;
    width: 100%;
}

.header {
    background-image: url("http://www.surfacemag.com/static/images/gradient_topdown_bw.gif");
    background-position: top;
    background-repeat: repeat-x;
    display: block;
    float: left;
    min-height: 154px;
    position: relative;
    text-align: center;
    width: 100%;
}

.header_image_container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    min-height: 154px;
    overflow: hidden;
}

.header img {
    padding-top: 20px;
    padding-right: 68px;
}

.subheader {
    display: block;
    float: left;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 100%;
}

.page {
    clear: left;
    display: block;
    min-height: 600px;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 1000px;
}

.left_sidebar {
    display: inline;
    float: left;
    margin-left: 18px;
    position: relative;
    width: 174px;
}

.main_content {
    display: inline;
    float: left;
    margin-left: 28px;
    margin-right: 28px;
    position: relative;
    width: 492px;
}

.right_sidebar {
    display: inline;
    float: right;
    margin-right: 18px;
    position: relative;
    text-align: center;
    width: 240px;
}

.footer {
    background-image: url("http://www.surfacemag.com/static/images/gradient_topdown_wb.gif");
    background-repeat: repeat-x;
    display: block;
    float: left;
    height: 100px;
    line-height: 60px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.footer_text_container {
    margin-left: auto;
    margin-right: auto;
    width: 574px;
    height: 100px;
    overflow: hidden;
    text-align: left;
}

.footer_text {
    color: #000000;
    display: inline;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-left: 0px;
    margin-right: 15px;
    padding-left: 10px;
    padding-right: 5px;
    width: 80px;
}

/* END: Raw Base CSS Template Designations */


/* START: Left Column Base CSS Template Designations */

.navigation {
    color: #000000;
    font-family: helvetica, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 21px;
    margin-bottom: 16px;
    margin-top: 13px;
}

.navigation a {
    color: #000000;
}

.navigation a:hover {
    color: #000000;
    text-decoration: underline;
}

.navigation a:visited {
    color: #000000;
}

.navigation_element_container {
    /* reserved for dropdown reveals */
}

.search {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 5px;
    margin-top: 3px;
    padding-bottom: 10px;
    width: 165px;
}

.search input {
    color: #999999;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
}

.tag_cloud {
    color: #999999;
    display: block;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    padding-bottom: 12px;
}

.tag_cloud p {
    margin-top: 3px;
    margin-bottom: 1px;
}

.tag_cloud_entry {
    float: left;
    padding: 3px 0px 2px 0px;
    margin: 1px 1px 0px 0px; /* Was 1 4 0 0 */
    height: 12px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    /* width: 83px; */
}

.tag_cloud_entry_text {
    background-color: #FF9999;
    color: #FFFFFF;
    font-family: helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0em;
    overflow: hidden;
    padding: 3px 3px 2px 3px;
    color: #FFFFFF;   
}

.archive_navigation {
    color: #999999;
    clear: both;
    display: block;
    float: left;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-top: 17px;
    overflow: hidden;
    position: relative;
    width: 174px;
}

.archive_navigation p {
    margin-top: 3px;
    margin-bottom: 1px;
}

.archive_navigation_entry {
    float: left;
    width: 176px;
    float: left;
    padding: 3px 0px 2px 0px;
    margin: 1px 4px 0px 0px;
    position: relative;
    overflow: hidden;
}

.archive_navigation_entry_text {
    background-color: #FF00FF;
    color: #FFFFFF;
    font-family: helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0em;
    padding: 3px 3px 2px 3px;
    color: #FFFFFF;   
}

/* END: Left Column Base CSS Template Designations */


/* START: Right Column Base CSS Template Designations */

.scroll_text {
    border-bottom: solid #C1C1C1 1px;
    display: none;
    color: #0000FF;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 14px;
    width: 238px;
}

.scroll_text a:hover input {
    border: none;
    color: #0000FF;
    cursor: pointer;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 14px;
    width: 238px;
}

.scroll_text input {
    border: none;
    color: #0000FF;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 14px;
    width: 238px;
}

.countdown {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 0px;
    margin-top: 10px;
    padding-bottom: 0px;
    width: 238px;
}

.avg_clock {
    color: #FF0000;
}

.mailing_list {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 0px;
    margin-top: 10px;
    padding-bottom: 0px;
    width: 238px;
}

.mailing_list input {
    color: #999999;
    margin-top: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 2px;
    width: 180px;
}

.mailing_list p {
    margin-top: 4px;
    margin-bottom: 1px;
}

.the_magazine {
    border-top: solid #C1C1C1 1px;
    border-bottom: solid #C1C1C1 1px;
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 14px;
    margin-bottom: 0px;
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 8px;
    min-height: 20px;
}

.the_magazine p {
    margin-top: 3px;
    margin-bottom: 1px;
}

.advertisement2 {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-bottom: 14px;
    margin-top: 11px;
    min-height: 150px;
}

.advertisement2 p {
    margin-top: 3px;
    margin-bottom: 1px;
}

/* END: Right Column Base CSS Template Designations */


/* START: Main Content Base CSS Template Designations */

.article_container {
    float: left;
    margin: 0px 0px 0px 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 20px;    
    position: relative;
    width: 492px;
}

.article_container p {
    color: #000000;
}

.article_options {
    font-size: 9px;
    overflow: hidden;
    padding-bottom: 4px;
    padding-top: 8px;
    text-align: right;
    width: 492px;
}

.main_content h6 {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

.main_content h5 {
    color: #000000;
    font-family: verdana, sans-serif;
    font-size: 9px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.main_content h4 {
    color: #000000;
    font-family: verdana, sans-serif;
    font-size: 11px;
    font-weight: 900;
    margin-top: 12px;
}

.main_content_thin_h4 {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}

.main_content span {
    color: #999999;
    display: inline;
    font-family: verdana, sans-serif;
    font-size: 9px;
}

.main_content p {
    color: #000000;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 17px;
    margin-top: -4px;
}

.issue_highlight_colour {
    color: #0000FF;
}

.issue_highlight_colour a:hover {
    color: #0000FF;
    text-decoration: underline;
}

/* END: Main Content Base CSS Template Designations */


/* START: Flatpage Base CSS Template Designations */

.flatpage {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 17px;
}

.flatpage p {
    color: #999999;
}

.flatpage h3 {
    font-size: 11px;
    font-weight: 700;
}

.flatpage h5 {
    color: #999999;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 12px;
    margin-bottom: 5px;
}

.flatpage a {
    color: #999999;
}

.flatpage a:hover {
    text-decoration: underline;
}

/* END: Flatpage Base CSS Template Designations */


/* START: loopedslider Required CSS */

.container { 
    width:492px; 
    height: 297px; 
    overflow:hidden; 
    position:relative; 
    cursor:pointer; 
}
                
.slides { 
    position:absolute; 
    top:0; 
    left:0; 
}
                
.slides div { 
    position:absolute; 
    top:0; 
    width: 492px; 
    display:none; 
}
 
#loopedSlider { 
    margin:0 auto; 
    width:500px; 
    position:relative; 
    clear:both; 
}

.pagination {
    display: block;
    float: left;
    font-family: verdana, sans-serif;
    font-size: 9px;
    margin-bottom: 7px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 5px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width: 492px;
}

.pagination a {

}

ul.pagination { 
    display: none;
    list-style: none; 
    padding:0; 
    margin:0; 
}

ul.pagination li { 
    float:left; 
}

ul.pagination li a {
    padding:2px 4px; 
}

ul.pagination li.active a {
    background:blue; color:white; 
}

/* END: loopedslider Required CSS */


/* START: Content Pagination (Non Graphic) CSS */

.paginator {
    text-align: center;
    font-size: 9px;
}

.paginator a:active {
    font-size: 9px;
    text-align: center;
    text-decoration: underline;
}

.paginator a:hover {
    font-size: 9px;
    text-align: center;
    text-decoration: underline;
}

/* END: Content Pagination (Non Graphic) CSS */


/* START: Comments CSS */

.comment_navigation {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    padding-bottom: 8px;
    
}

.comment_bottom_navigation {
    font-family: verdana, sans-serif;
    font-size: 9px;
    padding-bottom: 0px;
    padding-top: 8px;
}

.comment_form {
    width: 99%;
}

.comment_form_textarea {
    border: solid #C1C1C1 1px;
    margin-top: 12px;
    width: 99%;
}

.comment_form_input {
    color: #999999;
    float: left;
    font-family: verdana, sans-serif;
    font-size: 9px;
    margin-right: 4%;
    margin-bottom: 6px;
    padding-bottom: 2px;
    padding-top: 2px;
    position: relative;
    width: 45%;
}

.article_comments {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
}

.article_comments_content {
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    padding-top: 8px;
}

/* END: Comments CSS */
 
 
/* START: Mini Calendar CSS */

.calendar_small {
    border-bottom: solid #C1C1C1 1px;
    color: #999999;
    font-family: verdana, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 14px;
    margin-bottom: 5px;
    margin-top: 16px;
    padding-bottom: 14px;
    min-height: 158px;
}

.calendar_small p {
    margin-top: 3px;
    margin-bottom: 1px;
}

div.mini_calendar_month {
    /*
    background-color: #EEEEEE;
    border-left: solid #000000 1px;
    border-top: solid #000000 1px;
    */
    display: inline;
    font-size: 11px;
    float: left;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 10px;
    position: relative;
    width: 232px;
}

div.calendar_title_small {
    /*
    background-color: #666666;
    border-left: solid #000000 1px;
    border-right: solid #000000 1px;
    border-top: solid #000000 1px;
    */
    color: #BBBBBB;
    display: inline;
    float: left;
    margin-left: 1px;
    margin-right: 1px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 233px;
}

div.mini_calendar_weekday {
    /*
    border-bottom: solid #000000 1px;
    border-right: solid #000000 1px;
    */
    display: inline;
    float: left;
    height: 26px;
    overflow: hidden;
    position: relative;
    width: 33px;
}

div.mini_calendar_weekday:hover {
    /* color: #FF0000; */
}

div.mini_calendar_weekend {
    /*
    background-color: #CCCCCC;
    border-bottom: solid #000000 1px;
    border-right: solid #000000 1px;
    */
    display: inline;
    float: left;
    height: 26px;
    overflow: hidden;
    position: relative;
    width: 33px;
}

div.mini_calendar_weekend:hover {
    /* color: #333333; */
}

div.mini_calendar_today {
    background-color: #FFFFFF;
    /*
    border-bottom: solid #000000 1px;
    border-right: solid #000000 1px;
    */
    color: #000000;
    display: inline;
    float: left;
    font-weight: 900;
    height: 26px;
    overflow: hidden;
    position: relative;
    width: 33px;
}

div.mini_calendar_today:hover {
    /* color: #CCCC00; */
}

img.mini_calendar_event {
    margin-right: 7px;
}

/* END: Mini Calendar CSS */


/* START: Events CSS */

.event_title {
    margin-top: 3px;
    margin-bottom: 13px;
    padding-bottom: 10px;
}

.event_title h1 {
    color: #FF0000;
    font-family: helvetica, sans-serif;
    font-size: 20px;
    line-height: 23px;
    font-weight: 900;
    margin-top: 4px;}

.event_title h2 {
    color: #999999;
    font-size: 15px;
    font-weight: 500;
}

.event_title h3 {
    color: #000000;
    font-size: 11px;
    font-weight: 500;
}

.event_title h4 {
    color: #444444;
    font-size: 10px;
    font-weight: 200;
}

/* END: Events CSS */


/* START: Avant Guardian CSS */

.avant_guardian_title {
    margin-bottom: 15px;
}

.avant_guardian_title h6 {
    color: #00FF00;
    font-size: 18px;
    font-weight: 900;
}

.avant_guardian_title h5 {
    color: #999999;
    font-size: 12px;
    font-weight: 500;
}

.avant_guardian_title h4 {
    color: #444444;
    font-size: 10px;
    font-weight: 200;
}

.avant_guardian_title h3 {
    color: #000000;
    font-size: 8px;
    font-weight: 500;
}

/* END: Events CSS */


/* START: Magazine Contents CSS */

.magazine_contents {
  display: inline;
  color: #000000;
  line-height: 17px;
  font-family: verdana, sans-serif;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.magazine_contents h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 11px;
}

.magazine_contents h2 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 9px;
}

.magazine_contents h3 {
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}

.magazine_contents h3 a {
  color: #0000FF;
  font-size: 9px;
  font-weight: 500;
  text-decoration: none;
}

.magazine_contents h3 a:hover {
  text-decoration: underline;
}

.magazine_contents h4 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 9px;
}

.magazine_contents h5 {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 9px;
  font-style: italic;
}

/* END: Magazine Contents CSS */