body {
    background: #ECF0F1;
    font-family: Helvetica;
}

h2 {
    color: #a6a6a6;
}

/* NAVIGATION */

nav {
    position: fixed;
    top: 10px;
    left: 10px;
}

nav a {
    color: #4889C2;
    font-weight: bold;
    text-decoration: none;
    opacity: .3;
    -moz-transition: all .4s;
}

nav a:hover {
    opacity: 1;
}

nav a.focus {
    opacity: 1;
}

/* LOGIN & REGISTER FORM */

form {
    width: 340px;
    height: 260px;
    margin: 200px auto;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0,0,0, .4);
    text-align: center;
    padding-top: 1px;
}

form.register{
    height: 420px;
}

form .text-field {
    border: 1px solid #a6a6a6;
    width: 290px;
    height: 40px;
    border-radius: 3px;
    margin-top: 10px;
    padding-left: 10px;
    color: #6c6c6c;
    background: #fcfcfc;
    outline: none;
}

form .text-field:focus {
    box-shadow: inset 0 0 2px rgba(0,0,0, .3);
    color: #a6a6a6;
    background: white;
}



body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #2A2A2A;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #606060;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}



.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreybar{
width: 100%;
}

.urbangreybar .headbar{
font: bold 13px Verdana;
color: #909090;
background: #F6F6F6;
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-align: center;
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
//border: 1px solid #a6a6a6;
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: #2F2F2F;
background: #606060; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 10; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 55px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: #909090;
background: #2F2F2F;//#E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}


.urbangreymenu ul li button{
font: normal 12px Arial;
color: #909090;
background: #2F2F2F;//#E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
//.urbangreymenu ul li a:visited{
//color: black;
//}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: red;
}


.cente {
border:0;
padding:0;
width:0px;
border-top:1px;
font:10px verdana, helvetica, arial, sans-serif;
background:#F6F6F6
}

table {
border:0;
width:100%;
}

.text-field {
border:0;
height: 100%;
width: 100%;
background: white;
}

.textbox {
height: 100%;
width: 100%;
background: white;
}

.cen_a {
background: #ffffff;//#00B1E1;
}

.cen_b {
font: bold 13px Verdana;
border-width: 3px 7px 7px 4px;
padding: 7px;
background: #CFD9DB;
}

.buttoncore {

    background:  #606060;
    border: 1px solid #a6a6a6;
    width: 140px;
    height: 20px;
    cursor: pointer;
    color: #2F2F2F;
    font-weight: bold;
    font-size: 13px;
}

.buttoncore:hover {
        color: white;
    background: red;
}

.buttoncore:active {
        color: white;
    background: red;
}

input.tryitbtn, input.tryitbtn:link, input.tryitbtn:visited,input.showbtn, input.showbtn:link, input.showbtn:visited {
    font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:#8AC007;
    font-weight:bold;
    font-size:14px;
    text-align:center;
    padding:0.2% 0.2%;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:7px;
    border:1px solid #aaaaaa;
    border:1px solid #8AC007;
    border-radius:4px;
    white-space:nowrap;
    height: 100%;
    width: 100%;
}
input.tryitbtn:hover, input.tryitbtn:active, input.showbtn:hover, input.showbtn:active {
    background-color:#ffffff;
    color:#8AC007;
}

input.button {
    font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:#8AC007;
    font-weight:bold;
    font-size:14px;
    text-align:center;
    padding:0.2% 0.2%;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:7px;
    border:1px solid #aaaaaa;
    border:1px solid #8AC007;
    border-radius:4px;
    width: 124px;
    height: 20px;
    white-space:nowrap;
}
input.button:hover, input.button:active, input.button:hover, input.button:active {
    background-color:#ffffff;
    color:#8AC007;
}

button.button, button.button:link, button.button:visited, button.showbtn, button.showbtn:link, button.showbtn:visited {
    font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:#8AC007;
    font-weight:bold;
    font-size:14px;
    text-align:center;
    padding:0.7% 2.0%;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:0px;
    border:1px solid #aaaaaa;
    border:1px solid #8AC007;
    border-radius:4px;
    width: 60px;
    height: 20px;
    white-space:nowrap;
}

button.button:hover, button.button:active, button.showbtn:hover, button.showbtn:active {
    background-color:#ffffff;
    color:#8AC007;
}

.buttonst {
    background: #63D3E9;
    border-radius: 3px;
    border: 1px solid #a6a6a6;
    width: 290px;
    height: 40px;
    margin-top: 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 13px;
}

.buttonst:hover {
    background: #56CFE7;
}

.buttonst:active {
    background: #63D3E9;
}

.buttonpl {
    background: #63D3E9;
    border: 0px solid #a6a6a6;
    width: 190px;
    height: 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 13px;
        text-align:left;
}

.buttonpl:hover {
        color: white;
        background: red;
}

.buttonpl:active {
    background: #63D3E9;
}




.slider-wrap {position: relative;margin-left: 12px;margin-top: 10px ; width: 192px;}
.slider {
    position: relative;
    width: 192px;
    margin: auto;
}
ul {
    margin: 0;
    padding:0;
}
ul li {
    list-style: none;
    text-align: center;
}
ul li span {
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    height: 30px;
    background: black;
}

.slider-arrow {
    position: absolute;
    top: 10px;
    width: 20px;
    height: 20px;
    background: black;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 20%;
}

.sa-left {left: 10px;}
.sa-right {right: 10px;}

.black {background: black;}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
.yellow {background: yellow;}