| Dir : /home/trave494/newexitinggames.kerihosting.com/wp-content/themes/spacebox/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : /home/trave494/newexitinggames.kerihosting.com/wp-content/themes/spacebox/style.less |
/*
Theme Name:
Theme URI:
Description:
Version:
Author:
*/
/* global mixins */
.clip{
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
-o-background-clip: padding;
background-clip: padding-box;
}
.round(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.box-sizing(@sizing: border-box){
-webkit-box-sizing: @sizing;
-moz-box-sizing: @sizing;
box-sizing: @sizing;
}
.scale(@scale: 1.5, @x: 0, @y: 0){
-webkit-transform: scale(@scale);
-webkit-transform-origin: @x @y;
-moz-transform: scale(@scale);
-moz-transform-origin: @x @y;
-o-transform: scale(@scale);
-o-transform-origin: @x @y;
-ms-transform: scale(@scale);
-ms-transform-origin: @x @y;
transform: scale(@scale);
transform-origin: @x @y;
}
.shadow(@depth: 0 2px 4px rgba(0,0,0,.3)){
-webkit-box-shadow: @depth;
-moz-box-shadow: @depth;
-o-box-shadow: @depth;
box-shadow: @depth;
}
.rotate(@deg: rotate(9deg)){
-webkit-transform: @deg;
-moz-transform: @deg;
-ms-transform: @deg;
-o-transform: @deg;
transform: @deg;
}
.bgsize(@size: 100% 100%){
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
.gradient(@start: #eee, @end: #777) {
background: @start;
background-image: -moz-linear-gradient(top, @start, @end);
background-image: -ms-linear-gradient(top, @start, @end);
background-image: -o-linear-gradient(top, @start, @end);
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background-image: -webkit-linear-gradient(top, @start, @end);
background-image: linear-gradient(top, @start, @end);
}
.gradient-circle(@h: center, @v: center, @shape: circle, @size: contain, @start: #ddd, @finish: #333, @stop: 100%) {
background-color: @start;
background-image: -moz-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -webkit-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -o-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: -ms-radial-gradient(@h @v, @shape @size, @start, @end @stop);
background-image: radial-gradient(@h @v, @shape @size, @start, @end @stop);
}
.transition(@who: all, @length: .5s, @how: ease-out){
-webkit-transition: @who @length @how;
-moz-transition: @who @length @how;
-ms-transition: @who @length @how;
-o-transition: @who @length @how;
transition: @who @length @how;
}
.columns(@count: 2, @width: 200px, @gap: 20px){
-moz-column-count: @count;
-moz-column-gap: @gap;
-webkit-column-count: @count;
-webkit-column-gap: @gap;
column-count: @count;
column-gap: @gap;
}
/* handy shortcuts */
.true(@height: 20px){
height: @height;
line-height: @height;
}
.indent(@indent: -9999em){
text-indent: @indent;
}
.size(@width: 20px, @height:20px){
width: @width;
height: @height;
}
.clear{/* for use on :after */
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* global color variables */
@link: #777;
@heading: #333;
@border: #ccc;
@basewidth: 646px;
/* global layout */
body {
font-size: 12px;
margin: 0px;
text-align: center;
background: #111 url(img/bg1b.jpg) top center no-repeat fixed;
color: #333;
font-family: Helvetica, Arial, sans-serif;
min-width: @basewidth;
}
.page-home{
background: #111 url(img/hbg.jpg) top center no-repeat fixed;
}
.page-login, .page-signup{
position: relative;
#header{
padding-top: 50px;
background-position: center 50px;
.inner:before{
top: -50px;
}
}
}
.page-profile{
background: #111 url(img/pbg.jpg) top center no-repeat fixed;
}
.page-profile,
.page-play{
position: relative;
#header{
.inner:before{
display: none;
}
}
}
.inner{
position: relative;
margin: auto;
max-width: 1000px;
min-width: @basewidth;
&:after{
.clear;
}
}
#universe{
overflow: hidden;
min-width: 700px;
}
#header{
position: relative;
min-height: 140px;
margin-bottom: -20px;
background: url(img/header.png) top center repeat-x;
.inner:before{
position: absolute;
top:0px;
right:-210px;
height: 204px;
width: 552px;
content:"";
background: url(img/box2.png) top left;
}
}
#logo{
position: relative;
float: left;
width: 166px;
height: 120px;
a{
.indent;
width: 166px;
height: 120px;
display: block;
background: url(img/logo.png) top left no-repeat;
}
}
.title{
position: absolute;
top:45px;
left:0;
right:0;
img{
display: block;
margin: auto;
}
}
#welcome{
position: relative;
float: left;
width: 104px;
height: 67px;
margin: 28px 0 0 20px;
background: url(img/hey.png) top left no-repeat;
span{
float: left;
height: 49px;
width: 49px;
margin-top: 6px;
margin-left: 5px;
}
img{
margin: auto;
opacity: .8;
}
}
#menu{
float: left;
padding: 48px 0 0 20px;
li{
float: left;
position: relative;
}
.signup a{
float: left;
height: 30px;
width: 141px;
.indent;
margin: 0 30px 0 30px;
background: url(img/signup.png) top left no-repeat;
&:hover{
background-position: 0 -31px;
}
}
.login a{
position: relative;
float: left;
height: 30px;
width: 64px;
.indent;
margin: 0 0 0 38px;
background: url(img/login.png) top left no-repeat;
&:hover{
background-position: 0 -31px;
}
}
.login:before{
position: absolute;
top:0;
left: -15px;
width: 40px;
height: 35px;
content:"or";
background: url(img/or.png) center no-repeat;
.indent;
}
.mail a{
position: relative;
float: left;
height: 20px;
width: 38px;
.indent;
margin: 4px 20px 0 68px;
background: url(img/mail.png) top left no-repeat;
&:hover{
background-position: 0 -25px;
}
}
.profile a, .logout a{
position: relative;
float: left;
height: 23px;
width: 57px;
.indent;
margin: 4px 20px 0 0;
background: url(img/profile.png) top left no-repeat;
&:hover{
background-position: 0 -25px;
}
}
.logout a{
width: 57px;
background: url(img/logout.png) top left no-repeat;
&:hover{
background-position: 0 -25px;
}
}
}
#search{
position: relative;
float: right;
margin: 46px 100px 0 0;
input[type="text"]{
float: left;
.box-sizing;
width: 180px;
padding: 0 0 0 18px;
height: 31px;
line-height: 34px;
border:0;
background: url(img/search.png) left center no-repeat;
}
input[type="submit"]{
float: left;
width: 48px;
height: 31px;
.indent;
padding:0;
border:0;
background: url(img/search.png) top right no-repeat;
}
}
.listing-tabs{
position: relative;
min-width: @basewidth;
ul{
text-align: center;
}
li{
display: inline-block;
margin: 0 50px;
}
a{
position: relative;
display: block;
width: 130px;
.round(4px 4px 0 0);
.true(32px);
.indent;
}
.new{
background:#001531 url(img/new.png) center no-repeat;
}
.popular{
background:#001531 url(img/popular.png) center no-repeat;
}
}
.game-listing{
position: relative;
}
.panels{
position: relative;
min-width: @basewidth;
max-width: 1000px;
margin: auto;
.panel-left{
position: absolute;
top: 35%;
left:-130px;
height: 156px;
width: 167px;
background: url(img/left.png) top left no-repeat;
opacity: .7;
}
.panel-right{
position: absolute;
top: 35%;
right:-130px;
height: 156px;
width: 167px;
background: url(img/right.png) top right no-repeat;
opacity: .7;
}
}
.panel{
position: relative;
background:#001531;
overflow: hidden;
padding: 5px 0 5px 4px;
margin:0;
li{
float: left;
width: 100px;
height: 100px;
background: #285285;
position: relative;
margin: 5px;
}
}
#form-box{
position: relative;
padding-top: 90px;
}
.misc-form{
position: relative;
height: 373px;
width: 356px;
margin: auto;
text-align: left;
background: url(img/form-bg.png) top left no-repeat;
h2{
position: relative;
padding: 20px 0 20px;
text-align: center;
}
.iwrap{
position: relative;
width: 262px;
margin: auto;
padding-bottom: 20px;
}
input[type="text"]{
border:0;
color: #fff;
.true(39px);
.box-sizing;
width: 262px;
font-size: 14px;
padding: 4px 15px 0;
background: url(img/text.png) top left no-repeat;
}
a img{
margin: auto;
display: block;
}
.login-btn,
.signup-btn{
.indent;
border:0;
width: 97px;
height: 36px;
margin: auto;
display: block;
background: url(img/lbutton.png) top center no-repeat;
}
.signup-btn{
background: url(img/lbutton2.png) top center no-repeat;
}
label{
padding-left: 3px;
}
}
#profile-box{
position: relative;
padding: 80px 0;
clear: both;
margin: auto;
margin-bottom: -22px;
background: url(img/arm.png) bottom right no-repeat;
}
.profile-outer{
width: auto;
max-width: 1244px;
position: relative;
margin: auto;
}
.profile-box{
position: relative;
.box-sizing;
width:646px;
padding: 12px 15px 0;
height: 459px;
text-align: left;
margin:0;
overflow: hidden;
background: url(img/profile-bg.png) top center no-repeat;
h1{
padding: 6px 0 6px 5px;
}
}
.profile-col1{
float: left;
width: 208px;
.avatar{
position: relative;
height: 208px;
.box-sizing;
padding: 18px 0 0 0;
background: url(img/avatar-bg.png) top left no-repeat;
img{
display: block;
margin: auto;
}
}
p{
position: relative;
padding: 8px 0 24px 5px;
line-height: 18px;
}
.friends{
position: relative;
strong{
padding-left: 5px;
}
.the-friends{
.true(51px);
width: 208px;
background: url(img/friends-bg.png) top left no-repeat;
}
}
}
.profile-col2{
position: relative;
float: right;
width: 405px;
height: 328px;
text-align: left;
p, ul, ol, dl{
position: relative;
}
label{
display: block;
}
textarea{
position: relative;
.box-sizing;
padding: 10px;
height: 61px;
width: 346px;
border:0;
resize: none;
outline: none;
background: url(img/largetext.png) top left no-repeat;
}
}
#board-link, #info-link{
position: absolute;
top:0;
left: 17px;
width: 114px;
height: 35px;
.indent;
z-index: 100;
}
#info-link{
left: 138px;
}
#board{
position: absolute;
top:0;
left:0;
width: 405px;
height: 328px;
.box-sizing;
padding: 55px 25px 0 25px;
background: url(img/board-bg.png) top left no-repeat;
&.active{
z-index: 20;
}
}
#info{
position: absolute;
top:0;
left:0;
width: 405px;
height: 328px;
.box-sizing;
padding: 55px 25px 0 25px;
background: url(img/info-bg.png) top left no-repeat;
&.active{
z-index: 20;
}
}
.profile-row{
position: relative;
clear: both;
padding-top: 10px;
}
#play{
position: relative;
z-index: 10;
max-width: 1244px;
margin: auto auto -50px;
&:after{
.clear;
}
}
#play-widgets{
float: left;
width:286px;
position: relative;
padding-top: 100px;
margin-left: 60px;
.widget-title{
position: relative;
width: 55%;
padding: 7px 0;
background:#001125;
border: 3px solid #082E5F;
border-bottom:0;
.round(10px 10px 0 0);
margin: auto;
}
.widget{
padding: 12px;
background:#001125;
border: 3px solid #082E5F;
min-height: 100px;
margin-bottom: 20px;
.round(5px);
}
#home-link{
position: absolute;
top: 1px;
left: 50px;
width: 98px;
height: 100px;
.indent;
background: url(img/home.png) center 7px no-repeat;
&:hover{
background: url(img/home.png) center -91px no-repeat;
}
}
#back-link{
position: absolute;
top: 1px;
left: 145px;
width: 98px;
height: 100px;
.indent;
background: url(img/back.png) center 7px no-repeat;
&:hover{
background: url(img/back.png) center -93px no-repeat;
}
}
}
#play-game{
position: relative;
float: left;
width: 678px;
.box-sizing;
min-height: 600px;
margin-left: 30px;
border: 10px solid #082E5F;
.round(5px);
.shadow(0 0 2px #000);
background: #001125;
background: rgba(0,17,37,.9);
.round(10px);
margin-top: 1px;
}
#play-advert{
float: right;
width: 160px;
border: 3px solid #082E5F;
min-height: 600px;
.box-sizing;
.round(5px);
background: #001125;
}
.wave{
position: relative;
height: 100px;
margin:auto auto 30px;
min-width: @basewidth;
text-align: center;
padding-top: 1px;
background: url(img/wave.png) top center no-repeat;
.btn{
position: relative;
width: 49px;
height: 49px;
background: url(img/planet.png) center 4px no-repeat;
display: block;
margin: 15px auto;
.indent;
&:hover{
background-position: center -46px;
}
}
}
@media only screen and (max-width: 1244px) {
.profile-outer{
width: 700px;
position: relative;
margin: auto;
}
.inner{
width: 700px;
margin: auto;
}
#header .inner:before{
}
#search{
display: none;
}
.game-listing{
position: relative;
margin: auto;
width: 700px;
li{
width: 105px;
}
}
#play{
position: relative;
width: 700px;
clear: both;
}
#play-widgets{
position: relative;
width: 700px;
padding: 20px 0 0 0;
margin:0;
float: none;
clear: both;
&:after{
.clear;
}
#back-link{
position: absolute;
top: 90px;
right:300px;
left: auto;
}
#home-link{
position: absolute;
top: 00px;
right:300px;
left: auto;
}
.w-wrap{
float: left;
width: 40%;
}
.w-wrap + .w-wrap{
float: right;
}
}
#play-game{
margin:0;
width: 520px;
min-height: 480px;
}
#play-advert{
min-height: 480px;
}
}