* {
	/*margin:0px auto;*/
}

body { margin-left:auto; margin-right:auto; }
.main { width:1000px; display:block; margin:0px auto;  }
tbody {

    height: 620px;

}
.bg-container {display:block; /*margin:30px auto;*/ position:relative; z-index:9999; width:1000px; height: 690px; }
.main-bg {
	position:relative; z-index:-9;     margin: 0 auto;
/*	background:url('../images/Crossword Puzzle11.jpg') no-repeat center center; */
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
 	 -o-background-size: cover;
  	background-size: cover;
	width:1000px;
	    height: 690px;
	}

.main h2 {  
     font-size: 30px;
    text-align: center;
	margin-bottom:0px;
}

.cross-charecter-01 {
	position:absolute;
	left:133px;
	top:50px;
	display:block;
	}
.cross-charecter-02 {
	position:absolute;
	right:25px;
	top:15px;
	display:block;
	}

.cross-charecter-03 {
	position:absolute;
	left:10px;
	display:block;
	bottom:0px;
	}



.ui-page.ui-page-theme-a.ui-page-header-fixed.ui-page-footer-fixed.ui-page-active { background:transparent !important;}
.ui-mobile .ui-page {
    min-height: 300px;
}
.ui-mobile .ui-page-active {
    display: block;
    overflow-x: hidden;
    overflow-y: visible;
}

.main-bg table { width:43%; float:left;/*vertical-align:middle; padding-left:90px;*/ }
	
   #options div{
  background:#666;
  color: #FFF;
  display: inline-block !important;
  height:23px;
  line-height:26px;
  text-align: center;
  vertical-align: top;
  width:28px;
  font-size:12px;
  border:1px solid #8d4751;
}

#slices img{ 
  display: inline-block;
  height: 30px;
}

#area{
  background: #CCC;
  border: 1px solid #666;
  margin-top: 20px;
  height: 44px;
  width: 44px;
}


#emarea {
    height: 26px;
    width: 16px;
}

.ui-content {
    border-width: 0;
    float: right;
    margin-top: 12%;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 55%;
    z-index: 9999;
}


#options div {
    background-color:transparent !important;
    border: 1px solid #da0f0f;
    color: #000;
    display: inline-block !important;
    font-size: 12px;
    height: 30px;

    text-align: center;
    vertical-align: top;
    width: 30px;
}
#options {
    float: left;
    width: 20%;
}

.text {
    float: left;
    width: 80%;
}
.ui-droppable{ background: #fff;border: 1px solid #da0f0f;margin-top: 20px;height: 40px;  width: 30px;}
.reset_button {
	background-image: url(../images/btn_reset.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 42px;
	width: 126px;
	/* float:left; */
	background-color:transparent;
	border:0px dashed #fff;
	font-size:13px;
	font-weight:bold;
	font-family:'Trebuchet MS';
	color:#fff;
	/* margin:-15px -37px; */
}
.reset_button:hover {
	background-image: url(../images/btn_reset_over.png);
	background-repeat: no-repeat;
	background-position: left top;
	cursor:pointer;
}
.back-btn{ width:120px; position:absolute; margin-top:2px; padding-left:12px;}
.msgHolder {
    border: 0 dashed #000;
    color: #bc0c29;
    text-align: center;
    width: 90%;
	margin-top:80px;
}
@media (max-width:1023px){
	.main{ width:930px;}
	.bg-container{ width:930px;}
	.main-bg{ width:930px;}
	.main-bg table{ width:50%;}
	.ui-content{ width:47%;}
	.text {float: left;width: 70%;}
	#options {float: left;width: 17%;}
}

@media (max-width:980px){
	.main{ width:740px; height:920px;}
	.bg-container{ width:740px; height:920px;}
	.main-bg{ width:770px; height:750px;}
	.main-bg table{ width:55%;}
	.ui-content{ width:44%; margin-top: 4%;}
	#options{ width:21%;}
	.text{ width:75%; margin-left: 3%;}
	.msgHolder{ width:82%;}
}

@media (max-width:800px){
	.main{ width:740px; height:920px;}
	.bg-container{ width:740px; height:920px;}
	.main-bg{ width:740px; height:920px;}
	.main-bg table{ width:55%;}
	.ui-content{ width:43%; margin-top: 4%;}
	#options{ width:22%;}
	.text{ width:60%; margin-left: 3%;}
	.msgHolder{ width:82%;}
}

@media (max-width:680px){
	.main{ width:740px; height:780px;}
	.bg-container{ width:730px; height:700px;}
	.main-bg{ width:740px; height:780px;}
	.main-bg table{ width:55%;}
	.ui-droppable { height: 25px;width: 26px;}
	.ui-content{ width:43%; margin-top: 4%;}
	#options div { height: 20px; width: 20px;}
	#options{ width:16%;}
	.text{ width:47%; margin-left: 2%;}
	.msgHolder{ width:82%;}
	tbody {height: 490px;}
	span {font-size: 14px;}
}

/*@media (max-width:680px){
		.main{ width: 710px;  height: 920px; background:url(../images/rotation_lock.jpg) no-repeat center;}
.main-bg table{ display:none;}
.msgHolder{ display:none;}
.ui-content{ display:none;}
.main h2{ display:none;}
	.main{ width:460px; height:560px;}
	.bg-container{ width:740px; height:920px;}
	.main-bg{ width:460px; height:560px;}
	.main-bg table{ width:52%;}
	.ui-content{ width:43%;}
	.ui-droppable{ width:20px; height:20px;}
	#emarea{ width:20px; height:20px;}
	#options div{ width:22px;}
	#options{ width:30%;}
	.text{ width:68%;}
	.ui-content{ margin-top:4%;}
	.msgHolder{ margin-top:80%; text-align:left;}
}*/
@media (max-width:480px){
	.main{ width: 67%; height: 410px; background:url(../images/rotation_lock.jpg) no-repeat;}
.main-bg table{ display:none;}
.msgHolder{ display:none;}
.ui-content{ display:none;}
.main h2{ display:none;}
.main-bg {width: 320px;height: 410px;}
.bg-container { width: 350px; height: 410px;}
	
	}
	@media (max-width:400px){
	.main{ width: 97%; height: 410px; background:url(../images/rotation_lock.jpg) no-repeat;}
.main-bg table{ display:none;}
.msgHolder{ display:none;}
.ui-content{ display:none;}
.main h2{ display:none;}
.main-bg {width: 320px;height: 410px;}
.bg-container { width: 350px; height: 410px;}
	
	}