/*
Name: Myrothia
URI: http://myrothia.com/
Version: 1.0
Author: Mike Robinson
Author URI: http://akamike.net/
*/
@import "reset.css";
@import "type.css";
@import "color.css";

/* =generic */
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
html,body{position:relative;height:100%}
h2,p{margin-bottom:7px}

/* =header */
body > header{position:fixed;height:33px;z-index:100;top:0;width:100%}
  body > header div{margin:0 auto;width:960px}
  body > header h1{float:left}
  body > header h1,body > header h1 a{display:block;width:140px;height:42px}
  body > header nav{float:right;width:222px}
    body > header nav li{float:right;position:relative}
      body > header nav li a{width:110px;height:33px;display:block}
      body > header nav li.active a{background-color:rgb(12,10,19)}
      body > header nav li .nav_box a{display:inline;width:auto;height:auto}
  body > header li{height:33px}
body > header .nav_box{margin:0;padding:15px;position:absolute;right:-1px;width:400px;display:none;z-index:200}

/* =main */
article,#gallery{position:relative;margin-top:30px;padding-bottom:150px}
  article.close{padding-bottom:30px}
  article header,#gallery h1{position:relative;margin:0 auto;padding:10px 0;width:960px;z-index:2}
    body.home article header h1,#gallery h1{position:relative;top:5px}
  article #art,#gallery ul,article #text,#galleries{position:relative;margin:0 auto;width:860px;z-index:1;top:-20px}
    article #art img{margin:20px 0;max-width:820px}
  article section#comments{position:fixed;padding:0;bottom:0;width:100%;z-index:100;height:150px}
    article section#comments h2{display:none}
    article section p{display:block;margin:20px auto;width:600px}
    
#gallery ul{padding-bottom:20px}
.thumb{display:block;float:left;width:150px;height:150px;margin:20px 0 0 18px}
.thumb img{width:150px;height:150px}

#galleries{width:780px;margin-top:20px;position:relative;overflow:hidden}
  #galleries .title{background:rgba(0,0,0,0.7);bottom:-60px;display:block;height:50px;left:0;line-height:50px;position:absolute;text-align:center;width:230px}
  #galleries #left,#galleries #right{position:absolute;top:150px;height:50px;width:50px;background:#111}
  #galleries #left{left:-50px}
  #galleries #right{right:-50px}
  #galleries ul{width:999999px;position:relative;left:0;top:0}
  #galleries li{float:left;margin:10px;border:solid 5px rgb(12,10,19)}
    #galleries li,#galleries li a{display:block;width:230px;height:500px;overflow:hidden;position:relative}

.switch{position:fixed;bottom:10px;left:50%;width:200px;z-index:200;margin-left:-100px;padding:2px 0}

#browse{position:relative;width:900px;margin:0 auto;top:-350px;font-size:40px;left:auto;text-align:center;font-family:Helvetica}
#browse #left{float:left;height:50px;width:50px;line-height:45px}
#browse #right{float:right;height:50px;width:50px;line-height:45px}
#browse #left.disable,#browse #right.disable{color:rgb(26,24,35)}
#browse #left,#browse #right{color:#DDD}
#browse #left:hover,#browse #right:hover{background-color:#000}
#browse #left.disable:hover,#browse #right.disable:hover{background:none !important}