/* General */

@import "http://fonts.googleapis.com/css?family=Lato:300,400,700";

body {
  background: #304357;
  font-family: 'Lato',sans-serif;
  font-size: 1em;
  font-weight: 300;
  color:#eeeeee;
  }
a:hover {
  text-decoration:underline;
  }
.clear:before,
.clear:after {
  content: " ";
  display: table;
  }
.clear:after {
  clear: both;
  }

/* Header */

.header {
  background:#29394a url('../img/re_header_bg.png') no-repeat scroll center center;
  }
.max-grid {
  width:800px;
  margin:0 auto;
  padding:28px 0;
  }
.max-grid-left {
  float:left;
  width:300px;
  }
.max-grid-right {
  float:right;
  /*margin-top:5px;*/
  width:380px;
  line-height: 1.1em;
  }
.controls .filters {
  background:#2d3f52;
  padding:8px 60px;
  color:#307db2;
  font-weight:300;
  font-size:0.85em;
  }
.controls a:link, .controls a:visited {
  color:#3190d0;  
  }
.controls a:link.highlight {
  text-decoration:underline;
  }
.controls .slash {
  padding:0 2px;
  }

/* Grid */

#container {
  margin:44px auto;
  width:800px; 
  }
.box { 
  -webkit-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -moz-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
      -ms-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
       -o-transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
          transition: all 300ms cubic-bezier(1.000, 0.000, 0.000, 1.000);      
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
  }
.box_hide{
  display: none;
  }
.size11 a {
  background:transparent url(../img/1x1_bg.png) no-repeat scroll left top;
  width:160px;
  height:160px;
  }
.size12 a {
  background:transparent url(../img/1x2_bg.png) no-repeat scroll left top;
  width:160px;
  height:321px;
  }
.size21 a {
  background:transparent url(../img/2x1_bg.png) no-repeat scroll left top;
  width:321px;
  height:160px;
  }
.size22 a {
  background:transparent url(../img/2x2_bg.png) no-repeat scroll left top;
  width:321px;
  height:321px;
  }
.size11 a .item_title, .size12 a .item_title {
  max-width:120px;
  }
.size21 a .item_title, .size22 a .item_title {
  max-width:280px;
  }
.box.light-blue {
  background:#3498db;
  }
.box.dark-blue {
  background:#2678ad;
  }
.box.red {
  background:#e74c3c;
  }
.box img {
  position:absolute;
  z-index:10;
  }
.box a {
  float:left;
  color:#eeeeee;
  font-weight:400;
  font-size:0.95em;
  }
.box a .item_title {
  position:absolute;
  left:20px;
  bottom:20px;
  }
.box a:hover .item_title {
  z-index:16;
  }
.box a .cover {
  width:100%;
  height:100%;
  background:none;
  position:absolute;
  z-index:15;
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
  }
.box a:hover .cover {
  background:rgba(0,0,0,0.2);
  }
.item_title{
  text-transform:uppercase;
  }
.is_new_box {
  position:absolute;
  right:0;
  top:0;
  }

/* Sub Page */

.row {
  max-width:800px;
  }
.row.sub {
  padding:18px 0;
  }
.row.pad-top {
  margin-top:29px;
  }
.row.pad-bottom {
  padding-bottom:44px;
  }
#main_content {
  margin-top:29px;
  }
h2.title {
  color:#EEEEEE;
  font-size:2.2em;
  line-height:1em;
  }
#article_content {
  color:#EEEEEE;
  }
#article_content .caption {
  color:#919ba5;
  font-size:0.8em;
  padding-top:6px;
  font-style:italic;
  }
#article_content .caption a:link, #article_content .caption a:visited {
  color:#919ba5;
  }
#article_content p, #article_content ol {
  font-weight:300;
  font-size:0.95em;
  line-height:1.2em;
  margin-top:23px;
  }
#article_content ol li {
  margin-bottom:20px;
  }
#article_content ol strong {
  font-size:1.2em;
  }
.controls.side {
  margin:4px 0 0 0;
  }
.controls.sort {
  margin:16px 0 0 0;
  }
.controls .logo {
  background:#253443;
  padding:5px 12px;
  color:#e74c3c;
  font-weight:400;
  font-size:0.8em;
  position:relative;
  display:inline-block;
  }
.related_article {
  background:#253443;
  margin-top:2px;
  padding:15px;
  }
.related_article a.related_article_title {
  color:#eeeeee;
  font-size:1.35em;
  line-height:1.25em;
  margin:0 0 40px 0;
  display:block;
  }
.related_article a.related_article_category {
  color:#8b939b;
  font-size:0.9em;
  font-weight:300;
  }
.related_article a.sort_article_title {
  color:#8B939B;
  font-size:0.9em;
  line-height:1.25em;
  margin:0 10px 0 0;
  display:inline-block;
  }
.related_article ul {
  font-size:0.9em;
  line-height:1.15em;
  margin-bottom:0;
  }

/* Footer */

.footer {
  color:#4b6987;
  font-size:11px;
  }
.max-grid.bottom {
  padding:0;
  }
.sponsors {
  padding:0 0 44px 0;
  }
.sponsors img {
  padding-top:14px;
  }

/* Responsive */

@media only screen and (min-width: 658px) and (max-width: 799px) { 
  #container, .max-grid {
    width:640px;
    }
  .row {
    width:640px;
    }
  .max-grid-right {
    line-height:1.3em;
    width:275px;
    margin-top:0;
    }
  .controls .filters {
    padding:8px 25px;
    }
  }
@media only screen and (min-width: 498px) and (max-width: 657px) {
  #container, .max-grid  {
    width:480px;
    }
  .row {
    width:480px;
    }
  .header {
    background-image: none;
    }
  .column, .columns {
    float: left;
    width:100%;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    position: relative;
    }
  .max-grid-right {
    float:left;
    width:100%;
    margin-top:28px;
    }
  .controls .filters {
    padding:8px 25px;
    }
  }
@media only screen and (max-width: 497px) { 
  #container, .max-grid  {
    width:320px;
    }
  .row {
    width:320px;
    }
  .max-grid-right {
    float:left;
    width:100%;
    margin-top:28px;
    line-height:1.3em;
    }
  .controls .filters {
    padding:8px 25px;
    }
  .controls.side {
    margin:0;
    }
  .controls.sort {
    display:inline-block;
    }
  .controls .logo.side {
    padding:8px 12px;
    }
  .other_articles {
    float:left;
    width:100%;
    }
  .related_article a.related_article_title {
    margin:0 0 5px 0;
    }
  h2.title {
    padding-bottom:14px;
    }
  }
@media only screen and (max-width: 320px) {
  .max-grid  {
    width:310px;
    padding-right:5px;
    padding-left:5px;
    }
  #container {
    margin:0 auto 44px auto;
    width:320px;
    overflow:hidden;
    }
  #main_content {
    margin-top:20px;
    }
  }