body {
    margin:0;
    padding:0;
    background-color:white;
    color:black;
    font-family:Tahoma,Verdana,Arial,sans-serif;
    font-size:13px;
  }


img.iicon {
    vertical-align:middle;
  }


button[disabled] {
    opacity:0.3 !important;
    filter:Alpha(opacity=30) !important;
  }


#app {
    width:950px;
    margin:10px auto;
  }


#header {
    margin-bottom : 0;
    margin-left : auto;
    margin-right : auto;
    margin-top : 0;
    padding-left : 120px;
    width : 600px;
    height:94px;
    border:1px #FFF solid;
    position:relative;
  }


#logo {
    position:absolute;
    top:0;
    left:0;
  }


#title {
    background-image : url('../images/title.gif');
    background-repeat : no-repeat;
    height : 23px;
    width : 230px;
    margin-top:35px;
    margin-bottom:10px;
  }


ul.nav {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
  }


ul.nav li {
    float:left;
  }


#header .nav {
    font-size:14px;
    text-transform:uppercase;
    height : 30px;
    line-height:30px;
  }


#header .nav A {
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:Arial;
  }


#header .nav li.active {
    background-image : url('../images/nav_active-bg.gif');
    background-repeat : repeat-x;
  }


.left-corners,.right-corners {
    background-image : url('../images/corners.png');
    background-repeat : no-repeat;
    width : 15px;
    float:left;
  }


.right-corners {
    background-position:-15px 0;
    float:right;
  }


#header .nav li.active .left-corners,#header .nav li.active .right-corners {
    height : 30px;
  }


#header .nav li {
    margin-right:30px;
  }


#page {
    margin-top:60px;
  }


#page .nav {
    margin:0 auto;
    overflow:hidden;
    width:740px;
  }


#page .nav li {
    height : 27px;
    margin-left : 6px;
    line-height : 27px;
  }


#page .nav li.prompt {
    color:#696969;
    font-weight:bold;
  }
#page .nav li.langs {
	float:right;
	padding-right:15px;
  }
#page .nav li.langs img{
	margin:0 2px;
	cursor:pointer;
	border-top:double 3px transparent;
	}
#page .nav li.langs img.active{
	border-top:double 3px #D23629;
	}


#page .nav li.tnav {
    background-image : url('../images/tab-shadow.png');
    background-position : bottom;
    background-repeat : repeat-x;
  }


#page .nav li.tnav-s {
    background-color:#309400;
  }


#page .nav li.tnav-pp {
    background-color:#d23629;
  }


#page .nav li.tnav-l {
    background-color:#43A3CC;
  }


#page .nav .left-corners,#page .nav .right-corners {
    height:15px;
  }


#page .nav A {
    color : #FFF;
    display : block;
    font-family : Tahoma,sans-serif;
    letter-spacing : 1px;
    margin-bottom : 0;
    margin-left : 25px;
    margin-right : 25px;
    margin-top : 0;
    text-decoration : none;
    font-weight:bold;
  }


#nav_bottom,#nav_bottom .left-corners,#nav_bottom .right-corners {
    height:5px;
  }


#nav_bottom {
    clear:both;
    width:756px;
    margin:0 auto;
  }


#page.mode-s #nav_bottom {
    background-color:#309400;
  }


#page.mode-s .nav li.tnav-s {
    background-image:none;
  }


#page.mode-pp #nav_bottom {
    background-color:#d23629;
  }


#page.mode-pp .nav li.tnav-pp {
    background-image:none;
  }


#page.mode-l #nav_bottom {
    background-color:#43A3CC;
  }


#page.mode-l .nav li.tnav-l {
    background-image:none;
  }


#content {
    overflow:hidden;
    margin:2px;
    border:solid 2px #DDDDDD;
    position:relative;
  }


#content .tab-content {
    visibility:hidden;
	 display:none;
    position:absolute;
    left:0;
    right:0;
    top:0;
  }


#content .tab-content.active {
    position:static;
  }


.heading {
    margin:3px;
    clear:both;
    background-color:#eee;
    padding:5px 15px 30px 15px;
    color:white;
    overflow:hidden;
  }


.tab-content-s .heading {
    background-color:#309400;
  }


.tab-content-pp .heading {
    background-color:#D23629;
  }


.tab-content-l .heading {
    background-color:#43A3CC;
  }


.heading h1 {
    font-size:1em;
    margin:3px 0;
  }


.commands {
    float:right;
    color:#d23629;
    margin:5px 10px;
  }


.commands A {
    color:#d23629;
    text-decoration:none;
    font-weight:bold;
  }


#pad_box {
    float : right;
    clear:both;
    margin:75px 30px 30px 30px;
    width:145px;
  }


#key_pad {
    background-image : url('../images/pad-bg.png');
    background-repeat : no-repeat;
    background-position: 50% 50%;
    height : 169px;
    width : 135px;
    margin:15px auto;
    text-align:center;
    padding:5px;
  }

.key {
    background-image : url('../images/key-bg.png');
    background-repeat : no-repeat;
    height : 35px;
    width : 35px;
    line-height:35px;
    color:#FFF;
    font-weight:bold;
    font-size:17px;
    float:left;
    margin:4px;
    text-align:center;
  }

.key.correct{
	color: #C8FA83;
}
.key.wrong{
	color: #FAC5DC;
}

#key_pad .key:hover {
    opacity:0.8;
  }


#key_pad .key-0 {
    clear:both;
    float:none;
    margin-left:auto;
    margin-right:auto;
  }


#pad_buttons {
    text-align:center;
	clear:both;
  }

#pad_buttons #leftCol {
	float:left;
	width:70px;
}

#pad_buttons #rightCol {
	float:right;
	width:70px;
}


#pad_buttons button {
    background-repeat : no-repeat;
    margin: 2px 3px;
    border:none;
    background-color:transparent;
    color:#000;
    font-weight:bold;
    font-size:0.8em;
    opacity:0.7;
  }

#pad_buttons button.smallButton {
    background-image : url('../images/medium_button-bg.png');
    width : 76px;
    height : 28px;
	text-indent:-12px;
    line-height:28px;
}

#pad_buttons #leftCol #trash {
    background-color:transparent;
    background-image : url('../images/trash-bg.png');
    width : 61px;
    height : 76px;
    line-height:15px;
	padding:10px 2px;
    color:#000;
    font-weight:bold;
    font-size:0.8em;
	cursor:default;
    opacity:0.7;
}


/*#nav_buttons {
    clear:both;
    text-align:center;
  }


#nav_buttons button {
    background-image : url('../images/big_button-bg.png');
    background-repeat : no-repeat;
    width : 118px;
    height : 38px;
    margin:10px;
    border:none;
    background-color:transparent;
    color:#000;
    font-weight:bold;
    line-height:38px;
    opacity:0.6;
  }
*/

button.nav_button {
    background-image : url('../images/small_button_2-bg.png');
    background-repeat : no-repeat;
    width : 78px;
    height : 21px;
	position:relative;
	top: 20px;
	text-indent:-10px;
    margin:1px;
    border:none;
    background-color:transparent;
    color:#000;
    font-weight:bold;
    line-height:20px;
    opacity:0.6;
  }


#pad_buttons button:hover,#nav_buttons button:hover {
    opacity:1;
  }

div.message{
	clear:both;
	text-align:center;
	margin:1px auto;
	font-weight:bold;
	font-family:Tahoma,Verdana,Arial,Sans;
	font-size:15px;
	color:#444;
	width:300px;
	border:solid 1px #BBB;
	padding:3px;
	background-color: #E6E4DD;
	border-radius:5px;
	display:none;
	-icab-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
}
div.message.error{
	color: #F5F2B1;
	background-color: #D23629;
	border:none;
}
div.message.error2{
	background-color: #F5F2B1;
	color: #BD0010;
	border:solid 1px #BD0010;
}
div.message.success{
	background-color: #fff;
	color: #21800F;
	border:solid 1px #21800F;
}

#solution_area {
    float:right;
    position:relative;
    margin-top:0px;
    margin-left:10px;
  }


.row {
    clear:right;
    float:right;
    text-align:right;
    position:relative;
  }

@media screen and (-webkit-min-device-pixel-ratio:0) {	/*webkit*/
	.row {
		width:auto; !important;
	}
	.matrix{
		float:right;
	}
	.matrix .row{
		width:auto; !important;
	}
	div.lattice .row{
		border:none !important;
	}
	div.lattice .cell{
		border:solid 1px #D8D8D8;
	}
	div.lattice .corner {
		display:none;
	}
}


.matrix {
    background-image:url('../images/sign-plus.png');
    background-repeat:no-repeat;
    background-position:0 50%;
    clear:both;
    padding:5px 0 10px 20px;
    border-top:solid 2px #DCDCDC;
  }


.matrix:after,div.lattice:after {
    content: ".";
    clear:both;
    display:block;
    height:0;
    visibility:hidden;
  }


.matrix .row {
    width:100%;
  }



.renamingBoard {
	background:#DCDCDC url(../images/icon-magnet.png) no-repeat 0 0;
}

.renamingBoardNoPic {
	background:#DCDCDC;
}

.horizontalBoard {
	width:100%;
	height: 45px;
}

.midBoard {
	margin-left: -20px;
	width: 105%;
}

table.lattice .topRenamingContainer {
	padding-bottom:7px;
}

table.lattice .rightRenamingContainer {
	padding-left: 7px;
}

.verticalBoard {
	width: 45px;
	height:91px;
}



.row.problem-bottom {
    background-image : url('../images/sign-mul.png');
    background-repeat:no-repeat;
    background-position:58px 50%;
    padding-left:60px;
	width:100%;
  }


.row.result {
    border-top:solid 4px #DCDCDC;
	 padding-top:8px;
	 width:100%;
  }


.row .hint {
    position:absolute;
    left:0;
    top:50%;
    height:40px;
    line-height:40px;
    margin-top:-21px;
    margin-left:-160px;
    color:#707070;
    font-size:15px;
    font-weight:bold;
  }


.cell {
    background-position : center center;
    background-repeat : no-repeat;
    font-size : 20px;
    font-weight : bold;
    line-height : 40px;
    text-align:center;
    margin: 3px 10px;
    width : 40px;
    /*all browsers*/
    min-height : 40px;
    display: -moz-inline-stack;
    display: inline-block;
    zoom:1;
    *display:inline;
    _height : 40px;
  }


.row.matrix .cell {
    margin-top : 3px;
    margin-bottom : 5px;
  }


.keyDroppable {
    background-image : url('../images/cell-frame.png');
	background-repeat:no-repeat;
  }
.keyDroppable[rel=filled] {
    background-image : none;
  }

div.lattice {
    position:relative;
    margin-top:90px;
    margin-right:30px;
  }


div.lattice .corner {
    background-image : url('../images/small-corners.png');
    background-repeat : no-repeat;
    height : 8px;
    width : 8px;
    position:absolute;
	z-index:10;
  }


.corner.top-left {
    top:0;
    left:0;
  }


.corner.top-right {
    top:0;
    right:0;
    background-position:100% 0;
  }


.corner.bottom-left {
    bottom:0;
    left:0;
    background-position:0 100%;
  }


.corner.bottom-right {
    bottom:0;
    right:0;
    background-position:100% 100%;
  }

div.lattice .cell {
    background-image : url('../images/lattice_cell-bg.gif');
    background-position : top right;
    background-repeat : no-repeat;
    line-height : 82px;
    margin-bottom : -3px;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    min-height : 82px;
    width : 110px;
    _height : 82px;
    border-left:solid 1px #D8D8D8;
    border-right:solid 1px #D8D8D8;
  }


div.lattice .cell + .cell {
    border-left:solid 2px #D8D8D8;
  }

div.lattice .row{
    border:solid 4px #D8D8D8;
	border-width:4px 3px 4px 3px;
}

div.lattice .row + .row {
    border-top:none;
  }

.keyDroppable {
	padding-left:6px;
	padding-top:5px;
}

div#optionsBox {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-75px;
	width:200px;
	height:150px;
	z-index:10;
	background-color:#FFF;
	border:1px solid #000;
	display:none;
}

div#optionsBox table#optionsFormTable {
	border-spacing:4px;
}

div#optionsBox table#optionsFormTable th {
	text-align:center;
}

div#optionsBox table#optionsFormTable td.optionsCellLeft {
	text-align:right;
}

div#optionsBox table#optionsFormTable td.optionsCellRight {
	text-align:left;
}

span.lightboxX {
	float:right;
	z-index:15;
	font-size:1.4em;
	position:absolute;
	left:90%;
	font-family:Arial, Helvetica, sans-serif;
	cursor:pointer;
}

div#generateBox {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-20px;
	padding: 10px;
	width:300px;
	height:40px;
	z-index:10;
	background-color:#FFF;
	border:1px solid #000;
	display:none;
}

div#generateBox input.number {
	width: 40px;
}

span.minMax {
	float:right;
	font-size:1.4em;
	position:absolute;
	left:95%;
	cursor:pointer;
}