@font-face {
    font-family: arsenale;
    src: local(arsenale), url('/assets/font/arsenale.ttf') format('opentype');
}

@font-face {
    font-family: gravity;
    src: local(gravity), url('/assets/font/gravityLt.ttf') format('opentype');
}

@font-face {
    font-family: neou;
    src: local(neou), url('/assets/font/neou.ttf') format('opentype');
}

@font-face {
    font-family: neouThin;
    src: local(neouThin), url('/assets/font/neouThin.ttf') format('opentype');
}
html, body {
   height: 100%;
}
body{
/*    background-image: url('/images/guide.jpg');*/
    background-image: url('/images/bg.jpg');
    background-repeat: repeat;
    font-size:15px;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0px;
}

ol,ul {
	list-style:none;
}

ul, li{
    margin:0px;
    padding:0px;
}

#centerTable{
    height:100%;
    left: 50%;
    margin-top: -275px;
    min-height: 550px;
    position:absolute;
}

.container{
    background: url(/images/bg.png) no-repeat top left;
    width:550px;
    height:550px;
    left: 50%;
    margin-left: -275px;
}

.full{
    margin:auto auto;
}

.pe-container{
    margin:24px 25px 25px 25px;
    min-height:500px;
}

.error{
    padding-top:190px;
    font-family:neou;
}

.empty{
    width:100px;
    height:100px;
}


#gutter{
    position:absolute;
    z-index: 1;
}

#nav{
    position:absolute;
    z-index: 2;
    clear:both;
    font-size: 20px;
    text-transform: uppercase;
    font-family: neou;
    margin-top:10px;
}

#nav a{
    text-decoration: none;
    color: #3c4a63;
    font-size:12px;
}

#nav a:hover{
    color:#475670;
}

#nav .active{
    color:#475670 !important;
}

#nav ul li{
    float:left;
    padding-right:12px;
}

#subNav a:hover{
    color:#e76e35;
}

#subNav a{
    text-decoration:none;
    color: #d15a27;
    font-size:28px;
}

#subNav .active{
    color:#e76e35 !important;
}

#subNav{
    float:right;
    font-family:arsenale;
    clear: both;
}

#subNav ul li{
    float:left;
    margin-left:22px;
    line-height:36px;
}

#about, #contact{
    cursor:pointer;
}

#navArrow{
    background-image:url('/images/navArrow.png');
    height:13px;
    width:54px;
    position:absolute;
}

#logo{
    margin-top:13px;
    float:right;
    font-family: neouThin;
    color:#fff;
    font-size:17px;
}

.container{
    position:absolute;
}

.image, .video{
    cursor:pointer;
}

#popup{
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    z-index:3;
    text-align:center;
    vertical-align:middle;
    color:#fff;
    font-family:gravity;
/*    font-family:"Lucida Console", Monaco, monospace;*/
}

#prev, #next{
    position:absolute;
    width:13px;
    top:50%;
    margin-top:-27px;
    cursor:pointer;
/*    display:inline;
    vertical-align:middle;
    background-image:url('/images/prev.png');
    background-repeat:no-repeat;
    background-position: center;*/
}

#prev{
    left:-40px;
}

#next{
    right:-40px;
}

#popup img{
    margin-bottom:-5px;
}

#popup table{
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   border-spacing:0;
}

#popup td{
   vertical-align: middle;
   text-align: center;
}

#popupCenterWrap{
    position: relative;
    display:inline-block;
    border:10px solid white;
    box-shadow: 0 0 20px #000000;
    -moz-box-shadow: 0 0 20px #000000;
    -webkit-box-shadow: 0 0 20px #000000;
}

#popupCenter{
    padding-left:7px;
}

#popupClose{
    height:29px;
    vertical-align: bottom;
    background-image: url('/images/close.png');
    width:30px;
    height:29px;
    position:absolute;
    right:-16px;
    top:-16px;
    cursor:pointer;
}

.clearFix{
    clear:both;
}

#loadWrap{
    position:absolute;
    width:500px;
    margin-left: -250px;
    margin-top: 25px;
}

.tile{
    width:0px;
    height:0px;
    margin:50px;
    float:left;
    opacity:1;
}

@media (max-width: 630px) {
    body{
        width:630px;
        overflow-x:auto;
    }
    
    table{
        position:relative;
    }
    
    #centerTable{
        position:relative;
        display:inline;
        margin-top:0;
        left:0;
    }
    
    #centerTable td{
        display:inline;
    }
}