@charset "utf-8";
/* CSS DOCUMENT --------------------------------------- */
body {
	overflow-x:hidden;
    height:100%;
    width:100%;
    padding:0;
    margin:0;
	font-family:'omyim', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 22px;
	color:#ff799c;
	background: url(../images/bg.jpg);
	min-height:670px;
}

@font-face {
    font-family: 'omyim';
    src: url('omyim.eot');
    src: url('omyim.eot?#iefix') format('embedded-opentype'),
         url('omyim.woff') format('woff'),
         url('omyim.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'psl_olarn_proregular';
    src: url('olarn-webfont.eot');
    src: url('olarn-webfont.eot?#iefix') format('embedded-opentype'),
         url('olarn-webfont.woff') format('woff'),
         url('olarn-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/*link style-------------------------------*/
a:link, a:active, a:visited {
	color: #00421c;
	text-decoration: none;
	cursor:pointer;
}
a:hover {
	color:#94b73c;
	text-decoration: underline;
	cursor:pointer;
}

/*layout-------------------------------*/
#wrapper {
	position: relative;
	width:100%;
	
	
}
.popall {
	/*background: url(../images/fade.png) center;*/
	
	position:fixed;
	width:100%;
	height:100%;
	min-height:800px;
	z-index: 99;
}

.fade  {
	background-color:#333;
	position:absolute;
	width:100%;
	height:100%;
	min-height:800px;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	moz-opacity:0.7;
	opacity: 0.7;
}
#header{
	position: absolute; 
	z-index:90;
	height:80px;
	width:100%;
}
#footer{
	height:70px; 
	width:100%;
}
#register1{ position:relative; margin:0 auto; width:1000px; height:670px; font-size:24px; line-height:26px;}
#register2{ position:relative; margin:0 auto; width:1000px; height:670px; }
#register_vote{ position:relative; margin:0 auto; width:1000px; height:670px; }
#topvote{ position:relative; margin:0 auto; width:1000px; height:670px; color:#FFF;}
#gallery{ position:relative; margin:0 auto; width:1000px; height:670px; color:#FFF;}
#gallery_detail{ position:relative; margin:0 auto; width:1000px; height:670px; color:#FFF;}
#home{ position:relative; width:100%; height:100%; }
#home_content{ position:relative; margin:0 auto; width:1000px; height:670px; }
#rule{ position:relative; margin:0 auto; width:1000px; height:670px; }
#rule2, #voters{ position:relative; margin:0 auto; width:1000px; height:670px;}

#gallery ul{ width:700px; list-style:none; padding:0px; margin:0;}
#gallery li{ float:left; position:relative; width:165px; height:200px; margin-bottom:18px; background:url(../images/gallery/bg_li.png); /*overflow:hidden;*/}

/*Pop up-------------------------------*/
#register_popup,#gallery_vote1,#gallery_vote2 ,#like{ position:relative; margin:0 auto; width:100%; min-width: 100%; height:100%; min-height:800px;}


/*BG Set-------------------------------*/
.pos{
	position: absolute;
	z-index: 1;
}
.cur{ cursor:pointer;}
#preload{
	position:absolute;
	background:url(../images/logogame.png) center no-repeat;
	z-index:9999;
	width:100%;
	height:100%;
	background-color:#FFF;
	display:block;
	
}
/*Form -----------------------------*/
.input{
	height: 28px;
	width:95%;
	margin:3px;
	border: 0;
	background:none;
	font-family :omyim;
	FONT-SIZE: 24px;
	line-height: 26px;
	color: #ff799c;
}

.input_mul{
	width:95%;
	height:85%;
	margin:5px;
	border: 0;
	background:none;
	font-family:omyim;
	FONT-SIZE: 22px;
	line-height: 24px;
	color: #ff799c;
}

/* IMAGES ------------------------------------------------ */
a:link img, a:visited img { border:none;	text-decoration:none; }
a:hover img { border:none; 	text-decoration:none; }

/* OPACITY ------------------------------------*/
.opacity100 {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	moz-opacity:1;
	opacity: 1;
}
.opacity90 {
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	moz-opacity:0.9;
	opacity: 0.9;
}
.opacity80 {
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	moz-opacity:0.8;
	opacity: 0.8;
}
.opacity70 {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	moz-opacity:0.7;
	opacity: 0.7;
}
.opacity60 {
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	moz-opacity:0.6;
	opacity: 0.6;
}
.opacity50 {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	moz-opacity:0.5;
	opacity: 0.5;
}
.opacity0 {
	filter:alpha(opacity=0);
	-moz-opacity:0;
	moz-opacity:0;
	opacity: 0;
}

/* scroll bar style------------------------------------*/

.scroll_rule { width:471px; margin: 0px 0 10px; }
.scroll_rule .viewport { width:431px; height:355px; overflow: hidden; position: relative; }
.scroll_rule .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
.scroll_rule .scrollbar{ background: transparent url(../images/scroll/bg-scrollbar-track-rule.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
.scroll_rule .track { background: transparent url(../images/scroll/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:16px; position: relative; padding: 0 1px; }
.scroll_rule .thumb { background: transparent url(../images/scroll/bg-scrollbar-thumb.png) no-repeat 50% 100%; height: 35px; width: 50px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -16px; }
.scroll_rule .disable { display: none; }

#rotating-item-wrapper {
	position: relative;
	width: 480px;
	height: 73px;
	overflow:hidden;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px;
}
.rotating-item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
/* other style------------------------------------*/


/* text style------------------------------------*/
.font_olarn{ font-family: 'psl_olarn_proregular';}
.font_green{color:#11b2c3;}
.font_green a:link, .font_green a:active, .font_green a:visited{color:#11b2c3; text-decoration:underline;}
.font_green a:hover{color:#11b2c3; text-decoration:none;}

.font_white{color:#ffffff;}
.font_black{color: #000000}
.font_red{color: #ff0000;}
.font_pink{color:#ff799c;}
.font_yellow{color: #f2e513}
.font_violet{color: rgb(187,61,149);}
.font_white a:link, .font_white a:visited  {text-decoration:none; color:#FFF;}
.font_white a:hover{text-decoration: none; color:#F00;}

.font_bold{font-weight:bold;}
.font_ita{font-style:italic;}
.font15{font-size: 17px; line-height: 16px;}
.font18{font-size: 18px; line-height: 16px;}
.font20{font-size: 20px; line-height: 18px;}
.font22{font-size: 22px; line-height: 22px;}
.font24{font-size: 24px; line-height: 22px;}
.font28{font-size: 28px; line-height: 25px;}
.font26{font-size: 26px; line-height: 24px;}
.font30{font-size: 30px; line-height: 26px;}
.font32{font-size: 32px; line-height: 30px;}
.font36{font-size: 36px; line-height: 30px;}
.font37{font-size: 37px; line-height: 37px;}
.font40{font-size: 40px; line-height: 37px;}
.font46{font-size: 46px; line-height: 37px;}


.rotate5{
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}
.rotate-5{
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.rotate-3{
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.rotate10{
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.rotate-10{
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    transform: rotate(-13deg);
}