@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300|Open+Sans:400,400italic,700,700italic&subset=latin,latin-ext);
@import url(font-awesome.css);

html, body { margin: 0; padding: 0; font: 15px/1.4 Oswald, Tahoma, serif; background: #EFEFEF; }
body { padding-top: 80px; }

a { text-decoration: none; color: #111; }
a:hover { color: #34495E; }
img { max-width: 100%; }
i[class^="icon-"], i[class*=" icon-"] { font-size: 0.75em; vertical-align: middle; margin: 0 0.1em; }
hr { border: 0; height: 1px; border-top: 1px solid #777; }

.ad { margin: 0 auto; text-align: center; padding: 0 !important; }
.ad.ad-billboard > * { margin: 20px auto !important;  }
.ad iframe { margin: 0 auto !important;  }
.ad .banLabel { text-align: center; }

.alignRight { text-align: right; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.page { max-width: 1400px; margin: 0 auto; }
#page { position: relative; }

#nav { width: 200px; background: #2c3e50; float: left; } 
#nav ul { list-style-type: none; margin: 0; padding: 0; } 
#nav ul ul { background: #34495e; padding: 5px 0; } 
#nav ul a { text-decoration: none; color: #FFF; display: block; padding: 5px 10px; font-size: 18px; text-transform: uppercase; border-bottom: 1px solid #34495e; }
#nav ul ul a { padding: 5px 10px; font-size: 13px; text-transform: none; }
#nav a:hover { color: #F8B32C; transition: color ease-in 0.2s; }

#section { overflow: hidden; background: #E4E5E7;}

.middle { margin-right: -300px; width: 100%; float: left; background: #FFF;  }
.middle > div { margin-right: 300px; }

.side { width: 300px; float: right; background: #E4E5E7; }
.side > * { padding: 20px 20px 0; }
.side > div { overflow: hidden; }
.side a { color: #444; }
.side a:hover { color: #000; }
.side .title { text-transform: uppercase; }
.side .lead { font-weight: 300; }
.side .f { float: left; margin-right: 15px; }
      
.more { display: inline-block; padding: 4px 8px; background: #C2C4C6; color: #FFF; font-size: 13px; border-radius: 3px; margin: 0; font-weight: 300; vertical-align: middle; margin: 0 10px; } 
.h { text-transform: uppercase; font-size: 20px; font-weight: 500; color: #333; border-bottom: 1px solid #B5B5B5; margin: 0 0 20px 0; padding: 0 0 10px 0; box-shadow: 0 1px 0 #FFF; }
.h a { color: #222; }
.b { color: #333; font-weight: 300; color: #333; }

.main { position: relative; overflow: hidden; background: #000; }
.main .entry { height: 0; background: #27ae60; overflow: hidden; color: #FFF; opacity: 0; transition: opacity ease-in 0.2s; margin-bottom: 0; } 
.main .entry.current { height: auto; opacity: 1; } 
.main .entry a { color: #FFF; text-decoration: none; } 
.main .entry .f { float: left; max-width: 67%; margin-bottom: 0; }  
.main .entry div { overflow: hidden; padding: 20px 30px; } 
.main .entry .date { display: inline-block; padding: 4px 8px; background: #333; color: #FFF; font-size: 13px; border-radius: 3px; margin: 0; } 
.main .entry .title { font-size: 30px; text-transform: uppercase; margin: 10px 0; padding: 0; max-height: 144px; line-height: 36px; overflow: hidden; } 
.main .entry .lead { font-weight: 300; margin: 0; max-height: 66px; } 
.main .navigate { position: absolute; right: 0; bottom: 0; height: 40px; width: 40px; text-align: center; line-height: 30px; color: #FFF; font-size: 20px; text-decoration: none; }
.main .navigate:hover { color: #111; }
.main .navigate.prev { right: 40px; }

.articles { padding: 20px; overflow: hidden; }
.articles a { color: #111; } 
.articles .entry { margin-bottom: 20px; } 
.articles .entry .date { display: inline-block; padding: 4px 8px; background: #333; color: #FFF; font-size: 13px; border-radius: 3px; margin: 0; } 
.articles .entry .title { font-size: 20px; text-transform: uppercase; margin: 10px 0; padding: 0; max-height: 145px; overflow: hidden; } 
.articles .entry .lead { font-weight: 300; margin: 0; max-height: 125px; overflow: hidden; } 
.articles .entry .f { float: left; margin: 0 20px 0 0; border-radius: 2px; max-width: 40%; overflow: hidden; } 
.articles .entry .f img { max-width: none; } 
.articles ul { list-style-type: none; margin: 0; padding: 0; }
.articles li { margin: 0; padding: 0 0 10px; text-transform: uppercase; }
.articles li span { font-size: 11px; font-weight: 300; }
.articles a:hover { color: #34495E; }

.entry { overflow: hidden; margin: 0 0 10px; }
.entry .title { margin: 0 0 10px; } 
.f { position: relative; margin: 0 0 10px; }
.f i { color: #FFF; color: rgba(255,255,255,0.8); position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; font-size: 40px; line-height: 40px; height: 40px; text-align: center;  }
.f i:hover { color: #16a085; }

.plebiscite { margin: 0; padding: 0; list-style-type: none; } 
.plebiscite li { margin: 0; padding: 20px 0; border-bottom: 1px solid #789; overflow: hidden; } 
.plebiscite li > img { float: left; margin-right: 20px; max-width: 50%; } 
.plebiscite li h3 { font-size: 20px; text-transform: uppercase; color: #333; font-weight: 400; font-family: Oswald; margin: 0; } 
.plebiscite li p { font-size: 16px; color: #555; font-weight: 300; overflow: hidden; } 


.tags { margin-bottom: 20px; font-weight: 300; }

span.comments { background: #d35400; display: inline-block; position: relative; border-radius: 2px; width: 30px; text-align: center; vertical-align: middle; margin: 0 5px 5px 0; font-weight: 500; color: #FFFFFF; height: 18px; font-size: 12px; line-height: 18px; }
span.comments:before { border-style:solid; border-color: transparent #d35400; border-width: 0 0 5px 5px; bottom: -5px; content: ""; position: absolute; right: 5px; }


.splitted { margin-right: -250px; width: 100%; float: left; }
.splitted .entries { margin-right: 250px; }

.short { width: 250px; float: right; background: #EFEFEF; margin: -20px -20px -20px 0; }
.short > * { margin: 20px !important; }

.media { background: #FFF; padding: 20px; }
.media ul { list-style-type: none; margin: 0 -10px 0 0; padding: 0; overflow: hidden; }
.media li { float: left; margin: 0 10px 10px 0; width: 150px; background: #484B57;  }
.media li * { display: block; }
.media li span { color: #FFF; margin: 10px 20px; height: 44px; overflow: hidden; }

.leagues { padding: 20px;  }
#league { overflow: hidden; }
#league .h { border: 0; font-size: 16px; margin: 0; }
#league .left { width: 50%; margin-bottom: 15px; }
#league .right { width: 45%; margin-bottom: 15px; }

.league { font-weight: 300; font-size: 13px; width: 100%; }
.league thead { font-weight: 500; color: #555; }
.league .favourite * { color: #c0392b; font-weight: 500; }

.matches { font-weight: 300; list-style-type: none; margin: 10px 0; padding: 0; }
.matches li { margin-bottom: 5px; }
.matches li a { display: block; padding: 3px 0; }
.matches li .date { color: #16a085; margin-right: 5px; }
.matches li .score { margin: 0 5px; display: inline-block; background: #555; color: #FFF; padding: 0 4px; border-radius: 3px; }
.matches li.t { margin-top: 20px; font-weight: 500; color: #444; }
.matches i[class^="icon-"] { font-size: 20px; margin-right: 5px; }
.matches i.icon-thumbs-up { color: #27ae60; }
.matches i.icon-thumbs-down { color: #c0392b; }
.matches i.icon-circle { color: #f39c12; }


.forum { font-weight: 300; margin-bottom: 20px; }
.forum ul { margin: 0; padding: 0; list-style-type: none; }
.forum li { margin: 0 0 7px; padding: 0; }
.forum a { color: #333; }
.forum em { color: #555; }
.forum strong { color: #3D5482; }

.buttons a { float: left; margin: 0 10px 10px 0; padding: 5px; background:#FFF; border-radius: 3px;  }
.buttons img { float: left; }
.patrons .h { font-size: 15px; color: #555; }
.patrons img { vertical-align: middle; margin: 0 10px 20px 0; }

.wrap { padding: 20px; }

.article { padding: 20px; }
.article .title { font-size: 30px; font-weight: 500; text-transform: uppercase; }
.article .details { font-weight: 300; text-transform: uppercase; color: #27ae60; }
.article .details a { color: #16a085; }
.article .details span { margin-right: 20px; }
.article .picture { margin-bottom: 20px; }
.article .picture p { margin: 5px 0 0 0; font-weight: 300; text-align: right; }
.article .content { font: 15px/1.4 'Open Sans', serif; }
.article .hg { font: 300 14px Oswald; margin: 0 0 10px; padding: 5px 0; border-bottom: 1px solid #AAA; }
.article .hg a { color: #333; }
.article blockquote { border-left: 5px solid #16a085; margin: 10px 0; padding: 0 10px; font-style: italic; }
.article ul { list-style-type: square; margin: 10px 0; padding: 0 0 0 15px; }  
.article .author { background: #16a085; color: #FFF; display: inline-block; padding: 3px 6px; border-radius: 2px; font-size: 14px; }    
.article .author:hover { background: #c0392b; }    
                       
.gallery { padding: 20px; background: #333; }
.gallery .h { color: #EEE; border-color: #777; box-shadow: none; }

.comments ol { list-style-type: none; padding: 0; margin: 0 0 20px 0; }
.comments li { margin-bottom: 15px; overflow: hidden; }
.comments li p { overflow: hidden; font: 13px/1.3 'Open Sans', serif; }
.comments li strong { float: left; font: 15px/18px Oswald, serif; text-transform: uppercase; }
.comments li small { float: left; font: 300 12px/18px Oswald, serif; color: #777; margin: 0 5px; }
.comments li .options { float: right; text-align: right; font: 300 13px/18px Oswald, serif; color: #444; padding: 0 10px; }
.comments li .options > * { display: inline-block; background: #EEE; height: 24px; line-height: 24px; margin: 0 5px; border: 0; text-decoration: none; padding: 0 5px; border-radius: 5px; color: #777; font-size: 11px; }

.zend_form dt { margin: 0; padding: 10px 0; text-transform: uppercase; color: #444; }
.zend_form dd { margin: 0; padding: 0 0 10px; }
.zend_form input[type=text],
.zend_form input[type=password] { border: 1px solid #CCC; height: 30px; font: 13px/30px 'Open Sans', serif; padding: 0 10px; border-radius: 5px; }
.zend_form textarea { border: 1px solid #CCC; font: 13px/1.4 'Open Sans', serif; padding: 10px; border-radius: 5px; }
.zend_form input[type=submit] { height: 40px; font: 18px/40px Oswald, serif; padding: 0 25px; text-transform: uppercase; border-radius: 5px; border: 0; background: #8e44ad; color: #FFF; cursor: pointer; }
.zend_form select { padding: 4px 8px; }
.zend_form .description { font-weight: 300; font-style: italic; }
.zend_form pre { font-size: 11px; line-height: 10px; }

.galleries { list-style-type: none; margin: 0 -15px 0 0; padding: 0; overflow: hidden; text-align: center; }
.galleries li { display: inline-block; background: #FFF; border: 1px solid #DDD; padding: 10px; width: 150px; vertical-align: top; font-size: 13px; font-weight: 300; margin: 0 10px 10px 0; }

.paginator { padding: 20px 0; text-align: center; font-weight: 500; color: #CCC; font-size: 13px; }
.paginator * { display: inline-block; min-width: 20px; padding: 3px; border: 1px solid #DDD; border-radius: 3px; }
.paginator .current,
.paginator a:hover { color: #16a085; }
.paginator a { color: #111; }

.list { margin: 0; padding: 0 0 30px 18px; list-style-type: square; color: #888; }
.list .active a { color: #16A085; }
.list .t { list-style-type: none; padding: 10px 0 4px; color: #16a085; }

dl.team dt { margin: 0; padding: 10px 0 2px; }
dl.team dd { margin: 0; padding: 0 0 2px; font-weight: 300; font-size: 16px; }

#header { position: fixed; z-index: 200; background: #FFF; overflow: hidden; margin: 0; padding: 0; width: 100%; top: -1px; left: 0; z-index: 100; height: 80px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); line-height: 80px;  } 
#header a { color: #111; height: 80px; float: left; min-width: 30px; padding: 0 15px; text-align: center; font-size: 30px; }
#header img { vertical-align: middle; }
#header a.logo { display: block; width: auto; float: none; overflow: hidden; text-align: left; }
#header a.social { float: right; line-height: 80px; cursor: pointer; }
#header a.social:hover { color: #c0392b; }
#header a.toggleNav { background: #3D5482; background: #2C3E50; display: none;  color: #FFF;  }
#header .baloon { max-width: 410px; }

#footer { text-align: center; background: #3D5482; color: #FFF; padding: 20px 20px 10px; clear: both; }
#footer p { margin: 0 0 5px; font-weight: 300; }
#footer p a { color: #FFF; }

#map { height: 300px; margin-bottom: 20px; }
#map img { max-width: none; }

.alert { border: 1px solid #f39c12; margin: 20px 0; padding: 10px; color: #d35400; background: #f1c40f; font-weight: 300; }
.baloon { background: #16a085; color: #FFF; font-size: 15px; display: inline-block; height: 30px; line-height: 30px; font-family: Oswald; font-weight: 500; padding: 0 10px; vertical-align: middle; border-radius: 3px; margin: 0 0 0 15px; position: relative; top: -3px; }
.baloon:after { content: ''; position: absolute; right: 100%; top: 0; bottom: 0; margin: auto; width: 0; height: 0;  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #16a085; }             
.baloon.twitter { font-size: 13px; font-style: italic; background: #0084B4; font-weight: 300; }  
.baloon.twitter:after { border-right-color: #0084B4; }  
          
.errorPage > i { float: left; font-size: 150px; margin-right: 20px; color: #2c3e50; }          
.errorPage { color: #333; font-weight: 300; }          
  
.poll { background: #2ecc71; padding: 20px 30px; color: #FFF; margin-bottom: 20px; }   
.poll > p { font: 300 18px Oswald; margin: 0 0 10px; }   
.poll .progress { background: #27ae60; height: 20px; margin: 4px 0 10px; border-radius: 2px; overflow: hidden; }
.poll .progress > div { background: #c0392b; height: 100%; box-shadow: 3px 3px 3px rgba(0,0,0,0.1) inset; }
.poll dl { margin: 0; }
.poll #vote-label { display: none; }
.poll pre { font-size: 6px; line-height: 6px; }  
.poll .percent { font-weight: bold; color: #C0392B; }  
.poll li, .poll dd { margin-bottom: 15px; }

@media screen and (max-width: 1400px) {
  .logo { margin: 0 20px; }                                            
}

@media screen and (max-width: 1250px) {
  .main .entry .title { font-size: 24px; line-height: 28px; max-height: 112px; }
  .splitted, .splitted .entries { float: none; margin: 0; width: auto; }
  .short { float: none; margin: 0; width: auto; padding: 10px 0; }     
}


@media screen and (max-width: 1100px) {
  .main .entry.current { padding-bottom: 40px; }
  .main .entry .f { float: none; margin: 0 0 10px 0; max-width: 100%; }
  .galleries li { width: 110px; } 
  #header .baloon { display: none; }
}

@media screen and (max-width: 900px) {
  .ad.ad-billboard, .ad.ad-menu { display: none; }
  #nav { position: absolute; top: 0; left: -200px; z-index: 99; }
  #header { height: 60px; line-height: 60px; position: fixed; }
  #header a { display: block; height: 60px; width: 60px; line-height: 60px !important; }
  #header a.toggleNav { display: block; }
  body { padding-top: 59px; } 
  #nav ul a { padding: 10px; }
  #nav ul ul a { font-size: 15px; }
  .leagueWrapper { overflow: scroll; }
  .leagueWrapper .league { width: 700px; }  
}

@media screen and (max-width: 790px) {
  .entry .lead { display: none; }
  #header a { display: none; }
  #header a.logo { display: block; padding: 0 0 0 10px; }
  .left, .right { float: none; width: auto !important; }
}

@media screen and (max-width: 660px) {
  .middle, .middle > div { float: none; margin: 0; width: auto; }
  .side { float: none; margin: 0; width: auto; padding: 10px 0; }
  .short { margin: 0 -20px; }
  .matches strong { display: block; font-size: 11px; }
  .middle .media { margin: 10px -30px 10px 0; }
  .errorPage > i { font-size: 50px; }
}


@media screen and (max-width: 320px) {
  .middle .media { margin: 10px -30px 10px -15px; }
}