* { margin:0; padding:0; } /* to remove the top and left whitespace */

* {
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
  
          -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; 
          
         -webkit-tap-highlight-color: transparent;
  
}

/** The body settings minimize Mac OSX / iOS
  
* {
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

  
  *  elastic scrolling (grumble, grumble).
   *  See http://www.smilingsouls.net/Blog/20110804114957.html.
   *  More accommodations have been made for iOS in the JavaScript.
  */
  
  body {
    position         : absolute;
    top              : 0;
    left             : 0;
    right            : 0;
    bottom           : 0;
    background-color : #d3d3d3;
    color            : #000;
    overflow-x       : hidden;
    overflow-y       : hidden;
    overflow         : hidden; 
    cursor           : default;
    

    
  }
    
  .bg {
  background-color:#0f0f0f; 
  no-repeat;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  position:absolute;
  color: #000000;  
  cursor:default;
	font-size: 62.5%;
	width:100%;
	background: black;
	background: url(/images/back.png) no-repeat center center fixed;
	 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	overflow:hidden;
	cursor:default;   
	
  } 

  /** BEGIN block text selects except inside inputs and paragraphs
    See http://stackoverflow.com/questions/826782/\
      css-rule-to-disable-text-selection-highlighting
    Notice IE as needs onselectstart = function(){ return false; }
  */


  .btn {
    position      : absolute;
    border-width  : 3px;
    border-style  : solid;
    border-color  : #cc8 #880 #880 #cc8;
    padding       : 0px;
    width         : 70px;
    height        : 70px;
    font          : bold 14px Verdana, Arial, Helvetica, sans-serif;
    line-height   : 14px;
    cursor        : pointer;
    z-index       : 0;
    background    : -webkit-linear-gradient(
      top,
      rgba(30,87,153,0) 0%,
      rgba(203,209,214,0.5) 50%,
      rgba(114,124,96,0.5) 51%,
      rgba(90,160,53,0.8) 100%
    );
    background     : -moz-linear-gradient(
      top,
      rgba(30,87,153,0) 0%,
      rgba(203,209,214,0.5) 50%,
      rgba(114,124,96,0.5) 51%,
      rgba(90,160,53,0.8) 100%
    );
    background     : -ms-linear-gradient(
      top,
      rgba(30,87,153,0) 0%,
      rgba(203,209,214,0.49) 50%,
      rgba(114,124,96,0.5) 51%,
      rgba(90,160,53,0.8) 100%
    );
    filter         : progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#001e5799',
      endColorstr='#cc5aa035',
      GradientType=0
    );
    background-color : #884;
  }
  .btn:nth-child(even) {
    background-color : #a44;
  }
  .btn:hover {
    border-color  : #eea #aa0 #aa0 #eea;
  }  
  
  .canvas {
    position         : absolute;
    top              : 25px;
    left             : 30px;
    width            : 490px;
    height           : 490px;
    padding          : 0px;
    background-color : #000000;
    background       : transparent;
    font             : bold 14px Verdana, Arial, Helvetica, sans-serif;
    border           : 0px dashed #00000f;
    cursor           : pointer;
    border-radius    : 0px;
    overflow-x       : hidden;
    overflow-y       : hidden;
    overflow         : hidden;
    z-index          : 0;

  }
  
  .wordListCanvas {
    position         : absolute;
    color            : gray;
    top              : 525px;
    left             : 200px;
    width            : 490px;
    height           : 60px;
    padding          : 0px;
    background-color : #00000f;
    background       : transparent;
    font             : bold 14px Verdana, Arial, Helvetica, sans-serif;
    border           : 0px dotted gray ;
    cursor           : pointer;
    border-radius    : 0px;
    overflow-x       : hidden;
    overflow-y       : hidden;
    overflow         : hidden;
    z-index          : 0;

  }
  
  .wordlist {
  font                : 12pt COURIER; 
  }
  
  .fullScreenCanvas {
    position         : absolute;
    color            : gray;
    top              : 10px;
    left             : 10px;
    width            : 0px;
    height           : 0px;
    padding          : 0px;
    background-color : #00000f;
    background       : rgba(0,0,0,.0);
    font             : bold 14px Verdana, Arial, Helvetica, sans-serif;
    border           : 0px solid red ;
    cursor           : default;
    border-radius    : 0px;
    overflow-x       : hidden;
    overflow-y       : hidden;
    overflow         : hidden;
    z-index          : -1;


  }

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
    background-color:black;
    color:white;
    border: 1px solid #ccc;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 1px 1px 1px 1px #666;
	dsfont-size: 20px;
	padding: 4px 7px;
	outline: 1;
	-webkit-appearance: none;
	
}




/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}  

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-size:10px;
	vertical-align:baseline;
	background:transparent;
  font-family: Sintony;	
	-moz-user-select: none;-webkit-user-select: none;'
	}

@font-face {  
  font-family: c64 ;  
  src: url( /C64_Pro_Mono_v1.0-STYLE.ttf ) format("truetype");  
}  

body {
	line-height:1;
	overflow:hidden;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/* change colours to suit your needs */

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* change colours to suit your needs */

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/* change border colour to suit your needs */
hr {
	display:block;
	height:1px;
	border:0;   
	border-top:1px rgba(255,255,255,0.6); 
	margin:1em 0;
	padding:0;
}



input, select {
	vertical-align:middle;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    color:rgba(255,255,255,0.6);
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:rgba(255,255,255,0.6);;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:top;
    background:url(check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(check_radio_sheet.png) -57px top no-repeat;
}

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 1%; display: block; border: 0; }

.ui-slider-horizontal { height: 0.4em; margin-top: .6em; margin-bottom: .6em; background: rgba(255,255,255,0.5); }
.ui-slider-horizontal .ui-slider-handle {  
 height: 1.0em;
 top: -0.25em; /* half the difference between height and 0.5em */
 width: 0.5em;
 margin-left: -0.25em; /* width / 2 */  
 cursor: pointer;
 background: rgba(255,255,255,0.5); }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }

/*
* jQuery UI CSS Framework
* Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://ui.jquery.com/themeroller/?ffDefault=Lucida%20Grande,%20Lucida%20Sans,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
*/


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana, Arial, Helvetica, sans-serif;; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; }
.ui-widget-header { border: 1px solid #a3ac00; background: #212ed7 ; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
.ui-widget-content { border: 1px solid #dddddd; background: #fcfdfd ; color: #222222; }
.ui-widget-content a { color: #222222; }

/* Interaction states
----------------------------------*/
TODO.ui-state-default, .ui-widget-content .ui-state-default { border: 1px rgba(255,255,255,0.5); background: rgba(255,255,255,0.5) url(/images/bullet.png) 50% 50% repeat-x; font-weight: bold; color: rgba(255,255,255,0.5); outline: none; }
.ui-state-default a { color: #2e6e9e; text-decoration: none; outline: none; }
TODO.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #8f9850; background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #111111; outline: none; }
.ui-state-hover a { color: #222222; text-decoration: none; outline: none; }
TODO.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #8f9850; background: #f5f8f9 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #e17009; outline: none; }
.ui-state-active a { color: #111111; outline: none; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
TODO.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fad42e; background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x; color: #363636; }
TODO.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }

/* Icons
----------------------------------*/



/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.ui-corner-tr { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.ui-corner-br { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-top { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-right {  -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-left { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }


.ui-dialog-titlebar {
 display:none; 
}

.ui-dialog-titlebar-close {
 display:none; 
}

.ui-dialog {
 background:#4242e7;
 border:3px solid #a5a5ff;
 width:500px;
 height:100px;
 color:#00f;
}

/*start real css here*/

html, body { width:100%; height:100%; }

#tab_patterns {
	position:absolute;	
	TODOpadding:2px 2px 10px 10px;
	top:0px;right:0px;
	float:right;
	z-index:1;
}

#tab_patterns_content {     
	border-bottom-left-radius: 15px;
	width:180px;
	overflow: hidden;
	position:absolute;
	background-color: rgba(100,00,100,0.8);
	padding:20px;
	top:0px;
	right:0px;
	float:right;
	display:none;
	color:rgba(255,255,255,0.6);
}

#tab_settings { 
  position:absolute;
  top:0px;
  right:300px;
  float:right;
  z-index:1;
}
#tab_settings_content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  width:310px;
  position:absolute;
  background-color: rgba(00,64,127,0.8);
  color:rgba(255,255,255,0.5);
  padding:10px;
  top:0px;
  right:300px;
  float:right;
  display:none;
  overflow: hidden;
  font: 14px "Verdana";  
}

#tab_preset {  
  position:absolute;  
  TODOpadding:10px 10px 0px 10px;
  bottom:0px;
  right:0px;
  float:right;
  z-index:1;
}

#tab_preset_content {  
  border-top-left-radius: 15px;
  width:220px;
  height:160px;
  position:absolute;
  background-color: rgba(00,64,127,0.8);
  padding:10px;
  color:rgba(255,255,255,0.6);
  bottom:0px;
  right:0px;
  float:right;
  overflow: hidden;
  display:none;  
  font-size:14px;
}

#tab_help {    
  position:absolute;
  padding:0px;  
  bottom:0px;
  right:300px;
  float:right;
  z-index:1;  
}

#tab_help_content {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width:240px;
  position:absolute;
  background-color: rgba(127,127,0,0.6);
  padding:10px;
  bottom:0px;
  right:300px;
  float:right;
  color:rgba(255,255,255,0.6);
  display:none;
  
}

#tab_about {
	position:absolute;  
  dspadding:0px 10px 10px 10px;
  top:0px;
  left:0px;
  float:right;
  z-index:1;
  
}

#tab_about_content {
  border-bottom-right-radius: 15px;
  width:220px;
  position:absolute;
  background-color: rgba(0,127,0,0.8);
  padding:10px 10px 10px 10px;
  top:0px;
  left:0px;
  float:right;
  display:none;
  color:rgba(255,255,255,0.6);
}

#greets {
  overflow:hidden;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  position:absolute;
  left:40px;
  top:90px;
  font-size:24px;

}

a{text-decoration:none;color:red;}

.presetitem {  
}

.modeblock{
	border-bottom:1px solid rgba(255,255,255,0.1);
}

.title{
  display:none;
  font-size:36px;
  color:rgba(255,255,255,0.6);  
  
  position:absolute;left:10px;bottom:10px;
  text-shadow:2px 2px 0px #000; 
}

.ui-widget-overlay {
    background: repeat-x scroll 50% 50% #AAA;
    opacity:0.5;
}

.ui-widget-overlay {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.patterntitle{
  float:right;  
  font-size:9px; 
  text-align:right;
width:100%;  
}

ul,li {
  list-style-type: none;
  margin: 1px;
  padding: 1px;
  font: 10pt Verdana;
  color: gray;
  background       : transparent;
  tttbackground   : rgba(0,0,0,.10);

  
}
li:hover
{ 
background-color:rgba(255,20,0,.5);
color:white;
}

.gamesttt {
  color:WHITE;
  background   : rgba(0,0,0,.10);
}

#lobby_screen {		
 
 width:490px;
 height:600px;
 left:0px;
 top:0px;
 position:absolute;   
}

#TODOsaved {	
 TODO: background: url('/images/openbook.jpg') 0px -100px no-repeat;
 TODO: background: url('/images/openbook.jpg') 0px -100px no-repeat; 
 background-position:center top; 
 
}

#game_screen {
  TODO:  background: url('/images/openbook.jpg') no-repeat;
  text-align:center;   
  width:538px;
  height:700px;
  position:absolute;
}

#reg_screen {  
  text-align:center;
  padding:70px;  
  height:700px;
  TODO: background: url('/images/cover.png') 0px -100px no-repeat;
  background-position:center top; 
}

#login_screen {  
  text-align:center;
  padding:20px; 
  21width:400px;
  height:700px;
  TODO: background: url('/images/cover.png') 0px -100px no-repeat;
  background-position:center top; 
}



.small {
  font:10pt Verdana,Times New Roman;
	height:22px;
	border:0;   
	border-top:1px rgba(255,255,255,0.6); 
	color:white;
	background: rgba(225,55,55,0.6); 
	padding:0 0 0 0;
}


.small:hover{
  color:white;
}

.small:active{
  color:gray;
}


.smaller {
  font:10pt Verdana,Times New Roman;
	height:22px;
	border:0;   
	border-top:1px rgba(255,255,255,0.6); 
	color:white;
	background: rgba(125,55,55,0.6); 
	padding:0 0 0 0;
}


.smaller:hover{
  color:black;
}

.smaller:active{
  color:gray;
}

.asmaller {

	border:0;   
	border-top:1px rgba(255,255,255,0.6); 
	color:white;
	background: rgba(125,55,55,0.6); 
	padding:0 0 0 0;
	font:12pt Verdana,Times New Roman;
	height:22px;
	color:white;
	
}

.asmaller:hover{
  color:white;
}

.asmaller:active{
  color:white;
}

.gamelist {
	
	color:white;
	cursor:pointer;
	text-align:center;
	width:489px;
	height:260px;
	border:0px solid gray;
	padding:0px;
	margin:5px;
	overflow:auto;"

}

#registerbutton {
  
  awidth:200px;
  aheight:100px;
  font:2em Verdana;
  
}