/**
 * @section colordefs
 */
@blueFrom: #007799;
@blueTo:#000000;
@blueHoverFrom: #222222;
@blueHoverTo: #004499;
@bg: #08d;

/**
 * @section size-defs
 */
@pixmapwidth: 144px;

/**
 * @section functions
 */
.createGradient(@fromColor:#333333, @toColor:#2255cc) {
	background: -webkit-gradient(linear, left top, left bottom, from(@fromColor),to(@toColor) );
	background: -moz-linear-gradient(top, @fromColor, @toColor);
	filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{fromColor}',endColorstr='@{toColor}')";
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=@fromColor, endColorstr=@toColor)";
}

.createRoundedBorders(@radius:5px) {
	-webkit-border-radius: @radius;
	-khtml-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
/**
 * @section basic 
 */
body {
	padding: 0;
	margin: 0;
	font: .74em Arial, sans-serif;
	line-height: 1.5em;
	background: @bg;
	color: #ccc;
}

a {
	color: #555;
}

a:hover {
	color: #777;
	text-decoration: underline
}

p {
	margin: 5px 0;
}

h1 {
	font: bold 1.8em Sans-Serif;
	padding: 8px 0 4px 0;
	margin: 0;
}

h2 {
	font: bold 1.6em Sans-Serif;
}

h3 {
	padding: 4px 0;
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	border: 0;
}

.content {
	margin: 0px auto;
	width: 588px;
}

/**
 * @section header
 */
#header {
	height: 23px;
	width: 100%;
	color: #fff;
	padding:0px;
	padding-top: 9px;
	padding-bottom: 9px;
	.createGradient(#333333, #2255cc);
}

#headnav {
	margin-left:10px;
}

#logo {
	text-align: right;
}

.spacefont {
	font-family: arial, serif;
}

.roundedBorder {
	.createRoundedBorders();
}

.graybutton:hover {
	text-decoration: none;
	color: #ccc;
	text-shadow: 0px 2px 3px #000;
	.createGradient(#777777, #555555);
}

.graybutton {
	text-decoration: none;
	padding: 4px;
	margin-top: 6px;
	color: #aaa;
	text-shadow: 0px 2px 3px #111;
	.createGradient(#333333, #777777);
}

.bluebutton {
	text-decoration: none;
	padding: 4px;
	margin-top: 6px;
	color: #ccc;
	text-shadow: 0px 0px 0.8px #000;
	// .createGradient(@blueFrom, @blueTo);
}

.bluebutton:hover {
	text-decoration: none;
	color: #ccc;
	text-shadow: 0px 0px 0.8px #000;
	.createGradient(@blueHoverFrom, @blueHoverTo);
}

#topshadow {
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	background: -webkit-gradient(linear, left top, left bottom, from(#333),to(#000) );
	.createGradient(#333333, @bg);
}


.center {
	text-align: center
}

.topmargin {
	margin-top: 10px;
}

/**
 * @section basic layout
 */
html,body {
	height: 100%;
}

#wrapper {
	/* min-height: 480px; */
	background: #111;
}

#main {
	padding-bottom: 60px;
	background: @bg;
	.createGradient(#FFFFFF, @bg);
}

/**
* @section footer
*/
#footer {
	position: relative;
	/* position:absolute; */
	bottom:0;
   	width:100%;
	height: 40px;
	clear: both;
	padding-top:20px;
	background:#333;
	.createGradient(#333333, @bg);
}

#footer a {
	color:#999;
}

/**
* @section titlePic
*/
#titlePic {
	padding: 8px;
	border-width: 4px;
	border-color: #555;
	border-style: solid;
	display:none;
	margin-top: -140px;
	width: 320px;
}

/**
* @section term
*/

#term {
	text-align:center;
	background: #333;
	color: #0f3;
	width: @pixmapwidth;
	margin: 0px auto;
	// border-width: 4px;
	// border-color: @bg;
	// border-style: solid;
	border: none;
	.createRoundedBorders();
}

/**
* @section pixmap
*/

#retrocanvas {
	text-align: center;
	margin: 0px auto;
	padding-top: 8px;
	padding-bottom: 8px;
	width: @pixmapwidth;
	// border-width: 4px;
	// border-color: @bg;
	// border-style: solid;
	border: none;
}

.pixmap {
	float:left;
	margin-left:8px;
	display:none;
}
	
.pixel {
	height: 8px;
	width: 8px;
	margin: 0;
	padding: 0;
	float:left;
}

.pixelClear {
	clear:both;
}

.pixelOne {
	background-color:#fff;
}

.pixelOneFade {
	background-color:#888;
}

.pixelZero {
	// background-color:@blueFrom;
}

.pixelZeroFade {
	background-color:#222;
}


.pixmapHover {
	filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
	-moz-opacity: 0.5;
	-webkit-opacity: 0.5;
	opacity: 0.5;
}


/**
 * @section content
 */
#content {
    display: block;
    height: 480px;
    overflow: auto;
}
.spritespin {
	margin: 0px auto;
	border: 4px solid #222; 
}
	
.clear {
	clear: both;
}