/*CSS and Designed by: ARYO - NOV 2012*/

body {
	color: #eee;
	text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	overflow: hidden;
	cursor:url('../images/cursor.png'), auto;
}
a {
	color: #fff;
	background-color: transparent;
	font-weight: normal;
	cursor:url('../images/cursor-hand.png'), auto;
}
ol{display:table}
.left{float:left}
.right{float:right}
.clear{clear:both}
.none{display:none}
h1, h2{font-family: 'Lato', sans-serif;}
h2{margin: 10px 0}
p, .actions{margin-bottom: 20px;}
ul{margin:0;padding:0}
input, textarea{
	font:12px 'Open Sans', sans-serif;
	border: 1px solid #AAAAAA;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	padding: 4px;
}
textarea:focus, input:focus{border: 1px solid #5897FB !important;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#logo{position:relative;height:78px;width:257px}
#logo img{position:absolute;left: 0;}
#logo #l1{opacity:0;z-index:3}
#logo #l2{z-index:0;margin-left: 10px;margin-top: 16px;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;}
#logo #l3{z-index:1}
#logo img{position:absolute}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(360deg);}
100% { -webkit-transform: rotate(0deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(360deg);}
100% { -moz-transform: rotate(0deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(360deg);}
100% { -o-transform: rotate(0deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(360deg);}
100% { -ms-transform: rotate(0deg);}
}

#topBtn a{
position:absolute;
top:5px;
width:40px;height:31px;
z-index:3;opacity:.6;
transform:scale(0.8);
-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-webkit-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
#topBtn a:hover{
opacity:1;
transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
}
#fullscreenBtn{
background:url('../images/fullscreen.png') no-repeat right;
right:5px;
}
#soundBtn{right:38px;}
.play{background:url('../images/play.png') no-repeat right;}
.stop{background:url('../images/stop.png') no-repeat right;}

#fullscreenCloseBtn{display:none}
:-webkit-full-screen #fullscreenBtn{ display:none}
:-moz-full-screen #fullscreenBtn{ display:none}

#header{
    position: absolute;
    right: 20px;
    width: 545px;
    z-index: 2;
	text-align:center
}
#header #logo{margin:10px 0 10px;display:block}

#viewport {
	-webkit-perspective: 1000;
	-moz-perspective: 1000px;
	-o-perspective: 1000;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.28, rgb(69,132,180)),
		color-stop(0.64, rgb(31,71,120))
	);
}

#world {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -256px;
	margin-top: -256px;
	height: 512px;
	width: 512px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	pointer-events: none;
}

#world div {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
}

.cloudBase {
	position: absolute;
	left: 256px;
	top: 256px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
}

.cloudLayer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 256px;
	height: 256px;
	margin-left: -128px;
	margin-top: -128px;
	//border: 1px solid red;
	transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
}

#page {
	position: absolute;
	left: 0;
	top: 0;
	margin: 20px;
	padding: 20px;
	width: 55%;
    height: 55%;
	background-color: rgba( 0, 0, 0, .4 );
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	z-index:1;
	overflow:hidden;
	word-wrap: break-word;
}
#page.loading {
background-image:url('../images/loading_dark.gif');
background-repeat:no-repeat;
background-position:center
}

.content{
	left:2%;
	width: 96%;
	height: 100%;
	position:absolute;
	transition: all .5s ease;
	-moz-transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
}
.content.scaleZero{
	transform:scale(0);
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
}

#pageIn{
	width: 100%;
    height: 85%;
	overflow:hidden;
}

#pageContent{
	width: 100%;
    height:300px;
	overflow:hidden;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
}
#pageContent:hover {
    overflow-y: scroll;
}

#textureControls {
	display: none;
}

#copyright{
    background-color: #000000;
    padding: 0 20px 5px;
    font-size: 11px;
    color: #555;
}
#copyright a{
    color: #555;
	text-decoration:none;
}
#copyright img{
	margin:0 2px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
}

#bgWhite {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	text-align:center
}
#bgWhite img{
    max-height: 70px;
    margin: 7px 8px;
	vertical-align:middle
}

#formContactsWrap{
    background-color: rgba(0, 0, 0, 0.8);
    left: 0px;
    padding: 20px;
    position: absolute;
    z-index: 999999;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	box-shadow: 0 0 15px #000;
	-moz-box-shadow: 0 0 15px #000;
	-webkit-box-shadow: 0 0 15px #000;
	-o-box-shadow: 0 0 15px #000;
    transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    top: -100%;
	max-width:700px
}
#formContactsWrap h2 {
    margin-top:0
}
#closeContacts {
    position: absolute;
    right: -15px;
    top: -15px;
}
#formContacts table {
    background: url("../images/blacknoise.png") repeat scroll 0 0 #222;
    border: 1px dashed #666666;
    border-radius: 10px 10px 10px 10px;
    padding: 20px;
}
#formContacts td span { color:#FF0000 }
#hubNama, #hubEmail{width:50%}
#closeMail {
	background: url('../images/back.png') no-repeat;
	height:40px;
	width:40px;
    position: absolute;
    left: 30px;
    top: 80px;
}

#list{
text-align:center
}
#list li{
list-style:none;
display:inline-table;
vertical-align:top;
width:300px;
margin:5px 0 20px;
text-align:left
}
#list li div.desc{
word-wrap:break-word;
font-size:11px;
}
#list li div b{font-size:12px;display:block;margin-bottom:5px;font-style:normal}
#list li div div{font-style:italic;margin-top:5px}
#list li img, #wikiDetail #content img{margin-right:5px;padding:5px;background-color:#FFFFFF;border:1px solid #666;
box-shadow: -5px 5px 5px #000;
-moz-box-shadow: -5px 5px 5px #000;
-webkit-box-shadow: -5px 5px 5px #000;
-o-box-shadow: -5px 5px 5px #000;
}
#list li img{float:left;width:100px;}
#wiki #list li{width:98%}
#wiki #list li h2{margin:0}
#wiki #list li a, #wikiDetail a, .shareNetwork a{text-decoration:none}
#wiki #list li a:hover, #openMail{text-decoration:underline}
#wikiDetail #content{width:97%;margin-left:10px}
#wikiDetail #content img[align=left]{margin-right:15px;max-width:45%}
#wikiDetail #content img[align=right]{margin-left:15px;max-width:45%;
box-shadow: 5px 5px 5px #000;
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
-o-box-shadow: 5px 5px 5px #000;}

#fblike{border: medium none; overflow: hidden; height: 25px; margin-top: 6px;float:left}
.shareNetwork{margin-top:8px;float:right;font-size:11px}
.shareNetwork a {margin-right:5px}
.shareNetwork .facebook {
    background: url("../images/icon/facebook.png") no-repeat scroll left center transparent;
    line-height: 20px;
    padding-left: 20px;
}
.shareNetwork .twitter {
    background: url("../images/icon/twitter.png") no-repeat scroll left center transparent;
    line-height: 20px;
    padding-left: 20px;
}
.shareNetwork .reddit {
    background: url("../images/icon/reddit.png") no-repeat scroll left center transparent;
    line-height: 20px;
    padding-left: 20px;
}
.shareNetwork .digg {
    background: url("../images/icon/digg.png") no-repeat scroll left center transparent;
    line-height: 20px;
    padding-left: 20px;
}

.fTitle{margin-top:0}

.divider{
border-bottom: 1px solid #FFFFFF;
box-shadow: 1px 1px 5px #FFFFFF;
-moz-box-shadow: 1px 1px 5px #FFFFFF;
-webkit-box-shadow: 1px 1px 5px #FFFFFF;
-o-box-shadow: 1px 1px 5px #FFFFFF;
clear: both;
height: 1px;
margin: 10px 0 25px;
width: 100%;
}


@media screen and (max-width:900px) {
	body{overflow: auto;
    background: #4584b4;}
	#header{width: 95%; right:auto}
	#page{width: 90%;
    top: 130px;
    height: auto !important;
    position: relative;}
	#billboard{display:none}
	.content{position: relative;}
	#pageIn *{height: auto !important}
	.fixed-bar {z-index: 2}
}
@media screen and (max-height:620px) {
	#billboard{top:170px}
}
@media screen and (max-height:580px) {
	#billboard{display:none}
}