/*  
Theme Name: Far Side Radio
Theme URI: http://farsideradio.com/
Description: Specialized for radio broadcaster, tailored to specific request.
Version: 1.0
Author: Tyler Winfied
Author URI: http://minded.ca/
Tags: Custom theme for Far Side Radio in Winnipeg, MB, Canada
      Colors: #2e4811, #ffffff, #436217, #293c0f, #016674, #01b8de, #808080

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

@import url(css/reset.css); 

@import url(css/sidebar.css);
@import url(css/audio-player.css); 
@import url(css/calendar.css); 

* {
   margin: 0px;
   padding: 0px;
}

.left {
   float: left;
}

.right {
   float: right;
}

.nofloat {
   clear: both;
}

h1 {
   font-size: 1.5em;
   font-weight: bold;
   padding: 4px 16px;
}

h2 {
   font-size: 1.3em;
   font-weight: bold;
   padding: 4px 16px;
}

h3 {
   font-size: 1.1em;
   padding: 3px;
}

p {
   margin-bottom: 13px;
   margin-top: 7px;
}

a:link, 
a:visited {
   color: #01b8de;
   text-decoration: none;
}

a:active, 
a:hover {
   color: #0188a5;
}

ul {
   list-style-type: square;
   margin-bottom: 13px;
}

ul li {
   margin-left: 40px;;
}

em {
   font-style: italic;
}

body {
   background-image: url(images/window-bg.jpg);
   background-repeat: repeat-x;
   background-position: top left;
   background-color: #eaeaea;
   color: #ffffff;
   font-size: 1.0em;
   line-height: 21px;
   font-family: Arial, sans-serif;
}

#page-frame {
   width: 910px;
   text-align: left;
   margin-left: 62px;
}

#page-header {
   width: 100%;
   height: 125px;
   background-image: url(images/header-bg.png);
   background-repeat: no-repeat;
   background-position: bottom center;
   background-color: transparent;
}

   #page-header .logo {
      margin-top: 35px;
      margin-left: 26px;
   }
   
   #page-header .social-media {
      float: right;
      margin-top: 14px;
      margin-right: 8px;
   }
   
      #page-header .social-media img {
         padding: 0px 5px;
         float: left;
      }
      
#page-content {
   min-height: 600px;
   background-image: url(images/page-bg.png);
   background-repeat: repeat-y;
   background-position: top center;
   background-color: transparent;
   color: #ffffff;
}

   #page-content h3 {
      color: #01b8de;   
   }

   #page-content #media-player-links {
      position: absolute;
      top: 145px;
      left: 0px;
      width: 320px;
      height: 80px;
      background-image: url(images/media-icons-bg.png);
      background-repeat: no-repeat;
      background-position: top left;
      background-color: transparent;
      padding-left: 10px;
   }
   
      #page-content #media-player-links img {
         padding-right: 10px;
         float: left;
      }
      
      #page-content #media-player-links div {
         display: inline-block;
      }

      #page-content #media-player-links a {
         float: left;
      }

      #page-content #media-player-links .winamp {
         width: 70px;
         height: 60px;
         background-image: url(images/player-icons/winamp.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-color: transparent;
      }

      #page-content #media-player-links .winamp:hover {
         background-image: url(images/player-icons/winamp-hover.png);
      }
      
      #page-content #media-player-links .wmplayer {
         width: 70px;
         height: 60px;
         background-image: url(images/player-icons/wmplayer.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-color: transparent;
      }
      
      #page-content #media-player-links .wmplayer:hover {
         background-image: url(images/player-icons/wmplayer-hover.png);
      }

      #page-content #media-player-links .itunes {
         width: 70px;
         height: 60px;
         background-image: url(images/player-icons/itunes.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-color: transparent;
      }

      #page-content #media-player-links .itunes:hover {
         background-image: url(images/player-icons/itunes-hover.png);
      }
      
      #page-content .menu-header div {
         display: inline-block;
         padding: 0px 12px;
         padding-bottom: 16px;
      }

      #page-content .menu-header div:first-child {
         padding-top: 18px;
      }
      
      #page-content .menu-header .short-menu {
         width: 442px;
         height: 29px;
         line-height: 29px;
         padding-left: 40px;
         overflow: hidden;
         margin: 1px;
         background-image: url(images/short-menu-bg.png);
         background-repeat: no-repeat;
         background-position: top left;
         background-color: transparent;
         font-size: 1.3em;
         vertical-align: center;
      }

         #page-content .menu-header .short-menu ul {
            list-style-type: none;
            width: 100%;
         }
         
            #page-content .menu-header .short-menu a, 
            #page-content .menu-header .short-menu a:visited {
               color: #ffffff;
               text-decoration: none;
            }
            
            #page-content .menu-header .short-menu a:active, 
            #page-content .menu-header .short-menu a:hover {
               color: #284e11;
            }

            #page-content .menu-header .short-menu ul li {
               color: #ffffff;
               float: right;
               padding: 0px 20px;
               font-weight: bold;
            }      

            #page-content .menu-header .short-menu ul li:hover {
               color: #284e11;
               border-bottom: 2px solid #284e11;
            }
            
   #page-content .news-mini {
      width: 91%;
      border: 1px solid #eaeaea;
      padding: 9px;
      margin: 6px 0px;
   }
   
   #page-content .comment {
      padding: 0px 30px;
      padding-top: 10px;
      margin: 8px 20px;
      background-color: #6a9a4e;
      border: 2px solid #284e11;
   }
   
   #page-content h3.comment {
      padding-left: 60px;
      background: none;
      border: none;
   }
   
      #page-content .comment a, 
      #page-content .comment a:link, 
      #page-content .comment a:visited {
         color: #284e11;
      }
   
      #page-content .comment a:active, 
      #page-content .comment a:hover {
         color: #ff9900;
      }
      
   #page-content #comment-form {
      padding: 0px 30px;
   }
   
      #page-content #comment-form input,
      #page-content #comment-form textarea {
         font-family: Arial, sans-serif;
         font-size: 1.3em;
      }

      #page-content #comment-form input.button {
         font-size: 0.8em;
         padding: 4px 8px;
      }
   
      #page-content #comment-form textarea {
         width: 100%;
      }
   
      #page-content #comment-form label {
         padding: 0px 10px;
         color: #6a9a4e;
      }
   
   
   #page-content .box-full {
      width: 100%;
   }
   
   #page-content .box-100 {
      width: 888px;
      display: inline-block;
      padding: 10px 20px;
   }
   
   #page-content .box-70 {
      width: 598px;
      display: inline-block;
      padding: 10px;
   }
   
   #page-content .box-60 {
      width: 518px;
      display: inline-block;
      padding: 10px;
   }
      
   #page-content .box-50 {
      width: 423px;
      display: inline-block;
      padding: 10px;
   }
   
   #page-content .box-30 {
      width: 248px;
      display: inline-block;
      padding: 10px;
   }
   
   #page-content .box-40 {
      width: 328px;
      display: inline-block;
      padding: 10px;
   }
   
#page-bottom {
   background-image: url(images/page-bottom.png);
   background-repeat: no-repeat;
   background-position: top: center;
   background-color: transparent;
   width: 100%;
   height: 36px;
   margin-bottom: 10px;
}

#page-footer {
   width: 100%;
   border-top: 2px solid #666666;
   background-color: #dbdbdb;
   color: #666666;
}

   #page-footer .size-wrap {
      width: 910px;
      margin-left: 97px;
      padding: 0px 10px;
      text-align: center;
      align: center;
   }
   
      #page-footer .size-wrap .widget {
         float: left;
         width: 289px;
         text-align: left;
      }
      
   #page-footer h3 {
      width: 240px;
      height: 40px;
      overflow: hidden;
      font-weight: bold;
      line-height: 40px;
      color: #666666;
   }

      #page-footer h3 span.rss {
         float: right;
         margin: 12px 4px;
      }

   #page-footer ul {
      width: 240px;
      margin-left: -25px;
      list-style-type: none;
   }
   
      #page-footer ul li:first-child {
         border-top: 1px solid #666666;
      }
   
      #page-footer ul li {
         width: 100%;
         height: 40px;
         line-height: 40px;
         overflow: hidden;
         border-bottom: 1px solid #666666;
      }
      
         #page-footer ul li a, 
         #page-footer ul li a:visited {
            color: #666666;
            text-decoration: none;
         }
         
         #page-footer ul li a:active, 
         #page-footer ul li a:hover {
            color: #000000;
         }
         

.media-links-indent {
   padding-left: 265px;
}

.event-details {
   width: 248px;
   text-align: left;
   border: 1px solid #ffffff;
   padding: 10px;
   font-size: 1.1em;
   margin: 12px 0px 5px 10px;
}

.event-details .time {
   width: 100%;
   font-size: 1.2em;
   font-weight: bold;
}

.event-details .time span {
   display: block;
   width: 100%;
   text-align: right;
   border-bottom: 1px solid #ffffff;
   padding-bottom: 10px;
}

.event-details .time span:first-child {
   text-align: left;
   border-bottom: none;
   padding-bottom: 0px;
}

.event-details .address {
   line-height: 16px;
   font-size: 0.8em;
}

.event-details .ticket-price {
   margin-bottom: 3px;
}

.ticket-locations {
   width: 100%;
   font-size: 0.9em;
   padding-left: 15px;
}

.ticket-locations ul {
   width: 100%;
   list-style-type: none;
   margin-bottom: 0px;
}

.ticket-locations ul li {
   padding-left: 20px;
   line-height: 18px;
   margin-left: 0px;
}

.cyan {
   color: #01b8de;
}

.orange {
   color: #ff9900;
}

.ec3_schedule {
   display: none;
}