body {
	margin: 0; padding: 0;
	background: url(/bg2.jpg) fixed no-repeat top center #e0e0e0;
    -webkit-background-size: cover;
       -moz-background-size: cover; 
        -ms-background-size: cover; 
         -o-background-size: cover; 
            background-size: cover;
    background-position: center center;
	color: #000000;
	font: normal 16px/24px "Georgia", sans-serif;
}

h1 { font: bold 2.25rem/2.5rem sans-serif; color: #369; margin: 1rem 0; padding: 0; }
h2 { font: bold 1.25rem/2rem sans-serif; color: #990; }
h1 a, h2 a { color: inherit; text-decoration: inherit; }

hr { clear:both; }

#pagewrap {
	width: 980px;
	margin: 0 auto; padding: 0;
	background-color: #fff;
	border: 0; border-radius: 7px; 
    box-shadow: 0 0 10px #333;
}

#tp, #bp {
    background: #000000;
    color: #ccc;
    display: block; 
    line-height: 1.5em;
    margin: 0; padding: 0;
    text-align: center;
    width: 100%;
}

#bp {
    margin-top: 50px;
}

#atfsocialbuttons {
    padding: 10px; margin: 0;
    height: 16px;
    border: 1px solid #ccc; border-width: 1px 0;
}

#atfsocialbuttons aside {
    opacity: 0.3;
}

#atfsocialbuttons:hover aside {
    opacity: 1;
}

#header {
    display: block; 
	width: 980px;
    margin: 0 auto; padding: 15px 0;
    overflow: hidden; 
}
#col1opener {
    display: none;
}
#headertitle {
    display: block; 
    font-size: 3.5rem;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    width:200px;
    margin: 0; padding: 0 10px; 
    text-align: center;
    float: left;
}

#headertitle a {
    text-decoration: none;
    text-shadow: 0 0 10px #000;
    color: inherit;
}

#nav0 {
    width: 760px; height: 120px;
    overflow: hidden;
    float: left;
}

#nav0 ul {
    list-style: none;
    margin: 0; padding: 0;
    font-size: 0;
    text-align: center;
}

#nav0 ul li {
    display: inline-block;
    font-size: 1rem;
}

#nav0 ul li a {
    display: inline-block;
    padding: 5px; margin: 0 5px 4px 0;
    text-decoration: none;
    background-color: rgba(255,255,255,0.3);
    -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;
}

#nav0 ul li a:hover {
    background-color: rgba(255,255,255,1);
    -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;
}

#above { /* Ad "fc responsive atf header" goes here. */
    width: 100%; max-height: 100px;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}

hr {
    clear: both;
}

#ad-below-text {
    clear: both;
    margin: 0; padding: 0; margin-top: 20px; padding-top: 20px;
    border-top: 1px solid #555;
    width: 336px; height: 280px; 
}

#article {
	float: left;
	width: 560px;
    margin-left:260px;
}

#article a {
    text-decoration: none;
    margin-bottom: 20px;
}

#article a:hover {
    text-decoration: underline;
}

#col1 {
	float: left;
    width: 250px;
    margin-left: -820px;
    margin-bottom: 20px;
    background-color: transparent;
}

#col2 {
	float: right;
    width: 140px;
    margin-bottom: 20px;
    background-color: #fff;
    opacity: 0.6;
    -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;
}

#col2:hover {
    -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;
    opacity: 1;
}

#col2 .ad-button {
    display: block;
    margin: 10px auto; padding: 0;
    width: 125px; height: 125px;
}

#col2 .ad-button.text-ad {
    display:block;
    width: 111px; height: 111px;
    border: 2px solid #77d;
    overflow: hidden; 
    padding: 5px; 
    background: transparent;
    text-decoration: none;
    font: bold 14px/1.15em Arial, sans-serif; 
    color: #00f;
    text-align: left;
}

#col2 .ad-button:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#col2 > .text-ad:nth-child(1) { border-color: blue; color: blue; }
#col2 > .text-ad:nth-child(2) { border-color: green; color: green; }
#col2 > .text-ad:nth-child(3) { border-color: orange; color: orange; }
#col2 > .text-ad:nth-child(4) { border-color: red; color: red; }
#col2 > .text-ad:nth-child(5) { border-color: yellow; color: yellow; }
#col2 > .text-ad:nth-child(6) { border-color: purple; color: purple; }

#col2 .ad-button.image-ad {
}

#col2 .ad-button.image-ad img {
    width: 125px; height: 125px;
    border: 0;
}

/* ---------------------------- */

#nav1 {
    padding-top: 0;
    opacity: 0.7;
    font-family: sans-serif;
    -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;
}

#nav1:hover {
    opacity: 1;
    -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;
}

#nav1 a {
    text-decoration: none;
    display:block; 
    border-bottom: 1px solid transparent;
}

#nav1 a:hover {
    text-decoration: underline;
}

#nav1 ul {
    list-style: none;
    margin: 20px 0; padding: 0;
}

#nav1 > ul > li { 
    margin: 20px 0 0 0; padding: 5px 0;
    background-color: #ddd;
    border-radius: 0 8px 0 0;
}

#nav1 > ul > li > a {
    padding-left: 10px;
}

#nav1 > ul > ul {
    background-color: #eee;
    margin: 0; padding: 10px 0;
}

#nav1 > ul > ul > li > a {
    padding-left: 20px;
}

#nav1 > ul > ul > ul {
    font-size: 0.85rem;
    margin: 0; padding: 5px 0;
}

#nav1 > ul > ul > ul > li > a {
    padding-left: 40px;
}

/* ---------------------------- */

#footer {
    clear: both;
	background-color: transparent;
	padding: 20px; margin: 20px 0 0 0;
	overflow: hidden;
    border-top: 1px solid #999;
}

#footer p {
	margin: 0; padding: 0;
	text-align: center;
    opacity: 0.5;
    -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;
}

#footer:hover p {
    opacity: 1;
    -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;
}

#footer a {
    text-decoration: none;
    color: inherit;
}

#footer a:hover {
    text-decoration: underline;
}

/** Align images */
#article img { border: 1px solid #000; box-shadow: 0 0 5px #999; padding: 5px; background-color: #fff; }
#article .right { float: right; margin: 5px 0 10px 10px; }
#article .left { float: left; margin: 5px 10px 10px 0; }
#article .nobox { border: 0; box-shadow: none; }
#article img.center,
#article img.centered { margin: 0px 0; width: 560px; }

#article .source { font-style: italic; font-size: 0.85rem; color: #999; }
#article .source a { color: inherit; text-decoration: none; }

#article .amznad { float:right; overflow:hidden; box-sizing: padding-box; padding: 10px; margin: 0 0 0 10px; }
#article .amznad h3 { font-size:18px; line-height:20px; margin:0; padding:5px; }
#article .amznad > img { border:0; padding:0; margin:0; opacity:0; }
#article .amznad a {  }
#article .amznad a img { border:0; padding:0; margin:5px; box-shadow: 1px 1px 10px rgba(0,0,0,0.7); }

/* Galleries */
#article .gallery img { border:0; box-shadow: none; padding:0; }
.gallery { width:100%; margin:0; padding:0; border:0; }
.gallery hr { display:none; }
.gallery .item { overflow:hidden; background:#ffffff; margin:0 0 10px 0; padding:0; border-top:1px solid #909090; }
.gallery .item p.foto { margin:0; padding:0; }
.gallery .item p.foto a { margin:0; padding:0; overflow:hidden; outline:0; }
.gallery .item p.foto a:hover { overflow:hidden; border:0; outline:0; }
.gallery .item p.foto a img { border:0; width:125px; height:125px; padding:0; margin:5px 0; float:left; }
.gallery .item p.foto span.keywords { display:block; padding:5px; margin:0; background:#f0f0f0; }
.gallery .item p.foto span.caption { display:block; padding:5px; margin:0 0 0 130px; }
.gallery .item ul.about { list-style-type:none; padding:5px; margin:0 0 0 130px; }
.gallery .item ul.about li { padding:0; margin:5px 0 0 0; }
.gallery .item ul.about li a { }
.gallery .item ul.meta { font-size: 0.8em; padding:5px; margin:0 0 0 150px; }
.gallery .item ul.meta li { margin:0; padding:0; }
.gallery .item ul.meta li a { color:#000; text-decoration:none; }
.gallery .itemclosed { float:left; width:102px; height:102px; margin:0 5px 5px 0; padding:0; border:1px solid #606060; }
.gallery .itemclosed p.foto a img { margin:1px; width:100px; height:100px; }
.gallery .itemclosed p.foto span.keywords { display:none; }


@media only screen and (max-width:850px) {

    body { /* remove background image */
      background: #FFFFFF;
      margin-top: 54px;
    }

    #tp, #bp { /* remove topic at top and bottom of page */
      display: none;
    }

    #header { /* around #headertitle and #nav0: use for "appbar" on mobile */
      background-color: #009;
      color: #FFFFFF;
      overflow: hidden;
      position: fixed; top: 0; left: 0; right: 0; 
      z-index: 999;
      margin: 0 auto; padding: 0;
      width: 100%; height: 54px;
    }
    #col1opener {
      display: block;
      color: transparent;
      content:'';
      font-size: 0px;
      display: block;
      overflow: hidden;
      background-color: #FFFFFF;
      vertical-align: middle;
      margin: 16px; padding: 0; margin-right: 8px;
      float: left;
      width: 24px; height: 3px;
      border-top: 6px solid #009;
      border-bottom: 6px solid #009;
      box-shadow: 0 -3px 0 0 #FFFFFF, 0 3px 0 0 #FFFFFF;
    }
    #headertitle {
      float: none;
      font-size: 24px;
      font-weight: bold;
      display: block; 
      line-height: 54px;
      color: #FFFFFF;
      width: auto;
      margin: 0; padding: 0 16px;
      text-align: center;
    }

    #nav0 { /* the "featured" articles, hide them on mobile. */
      display: none;
    }


    #pagewrap { /* around #above, #main, #footer */
      border-radius: 0;
      width: 100%;
      overflow: hidden;
    }

    #above {
      width: 100%;
      overflow: hidden;
    }

    #footer {
      width: 100%;
      overflow: hidden;
      padding: 16px; margin: 0;
    }


    #main { /* around #article, #col1, #col2 */
      width: 100%;
      overflow: hidden;
    }

    #col1 { /* left side, menu */
      float: none;
      background-color: #FFFFFF;
      overflow-y: auto;
      position: fixed; top: 0; left: -250px; bottom: 0; width: 250px;
      margin: 0; padding: 0;
      transition: 0.3s;
      z-index: 1000;
    }
    #col1.open {
      transition: 0.3s;
      left: 0px;
    }
    #nav1 {
      opacity: 1;
    }
    #nav1 ul {
        margin: 0; padding: 0;
    }
    #nav1 > ul > li { 
      margin: 0; padding: 0;
      background-color: #FFFFFF;
      font-weight: bold;
      border-radius: 0;
      border-top: 1px solid rgba(0,0,0,0.12);
      border-bottom: 1px solid rgba(0,0,0,0.12);
    }
    #nav1 > ul > li > a {
      padding: 16px 0 16px 16px ;
    }
    #nav1 > ul > ul {
      background-color: #FFFFFF;
      margin: 0; padding: 8px 0;
    }
    #nav1 > ul > ul > li > a {
      padding: 8px 0 8px 16px ;
    }
    #nav1 > ul > ul > ul {
        font-size: 0.85rem;
        margin: 0; padding: 6px 0;
    }
    #nav1 > ul > ul > ul > li > a {
        padding-left: 32px;
    }


    #col2 { /* right side, ads */
      float: none;
      margin: 0; padding: 0;
      display: none;
    }

    #article { /* center, content article */
      float: none;
      margin: 0 auto; padding: 0 16px;
      width: 100%;
      max-width: 500px;
      box-sizing: border-box;
    }

    #article .right,
    #article .left,
    #article img.center,
    #article img.centered,
    #article .nobox {
      display: block;
      border: 0; 
      box-shadow: none;
      float: none;
      margin: 16px -16px; padding: 0;
      width: calc(100% + 32px);
    }
    #article h1,
    #article h2,
    #article h3,
    #article p,
    #article ul {  }

    #atfsocialbuttons { /* hide "social" buttons */
      display: none;
    }

    #ad-below-text {
      width: 100%; height: none; max-height: 450px; min-height: 200px;
    }

}