<link href='//fonts.googleapis.com/css?family=Cinzel:400,700' rel='stylesheet' type='text/css'>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background: #000;
	margin:0px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

#symbolgame {position:relative; margin:0px auto; width:800px; height:600px; overflow: hidden;}

/*  intro related css  */
#symbolintro {position:absolute; width:800px; height:600px;
  left:0px; top:0px; z-index: 300;
  background: url('../img/intropic.jpg') bottom right no-repeat; 
  -webkit-animation: slidepic 10s infinite; /* Safari 4+ */
  -moz-animation:    slidepic 10s infinite; /* Fx 5+ */
  -o-animation:      slidepic 10s infinite; /* Opera 12+ */
  animation:         slidepic 10s infinite; /* IE 10+, Fx 29+ */
}
@keyframes slidepic {
  0%, 100% {
    background: url('../img/intropic.jpg') top left no-repeat;
  }
  50% {
    background: url('../img/intropic.jpg') bottom right no-repeat;
  }
}

#intro_fade {position:absolute; top:0; left:0; z-index:320; background:#000; width:800px; height:600px; color:#333; text-align: center;}
#intro_line1 {position:absolute; top:0; left:0; display:none; z-index:327;  width:800px; height:600px;}
#intro_line2 {position:absolute; top:0; left:0; display:none; z-index:326;  width:800px; height:600px;}
#intro_upper {position:absolute; top:0; left:0; display:none; z-index:310;  width:800px; height:600px;}

#intro_line3 {position:absolute; top:0; left:0; display:none; z-index:313;  width:800px; height:600px;}
#intro_line4 {position:absolute; top:0; left:0; display:none; z-index:314;  width:800px; height:600px;}
#intro_line5 {position:absolute; top:0; left:0; display:none; z-index:315;  width:800px; height:600px;}
#intro_bottom {position:absolute; top:0; left:0; display:none; z-index:311; width:800px; height:600px;}


#header {position:absolute; width:800px; height:125px; left:0px; top:0px; z-index: 50; background: url('../img/header.png') top left no-repeat; text-align: right;}

#sound_on {width:48px; height:32px; position:absolute; top:0; left:18px; z-index: 321; background: url('../img/btn_sound_on.png') top left no-repeat;}
#sound_off {width:48px; height:32px; position:absolute; top:0; left:18px; z-index: 322; background: url('../img/btn_sound_off.png') top left no-repeat;}
#sound_music {width:48px; height:32px; position:absolute; top:0; left:84px; z-index: 73; background: url('../img/btn_music.png') top left no-repeat;}

#mysexgameslink {width:200px; height:21px; position:absolute; top:500px; right:0; z-index: 250;}

#symbol_panel {padding:54px 150px 0px 15px;position:absolute; width:160px; height:600px; left:0px; top:0px; z-index: 55; background: url('../img/left.png') top left no-repeat; padding:;}

#symbol_first {position:absolute; width:50px; height:50px; left:151px; top:212px; z-index: 56;}
#symbol_second {position:absolute; width:50px; height:50px; left:151px; top:285px; z-index: 57;}

.symbol {width:50px; height:50px; margin:0px 15px 15px 0px; float:left;}
.symbol:hover {opacity:0.7;}

#symbol_cancel {position:absolute; width:41px; height:41px; left:208px; top:253px; z-index: 58; background: url('../img/cancel.png') top left no-repeat;}
#symbol_cancel:hover {background: url('../img/cancel_hover.png') top left no-repeat;}

#go_holder {width:211px; height:134px; position: absolute; left:0; top:460px; z-index: 64; background: url('../img/go_1.png') top left no-repeat;}
#go_button {width:211px; height:134px; position: absolute; left:0; top:460px; z-index: 65; display:none; background: url('../img/go_2.png') top left no-repeat;}
#go_button:hover {background: url('../img/go_3.png') top left no-repeat;}

#wrap_canvas {position:absolute; width:660px; height:440px; right:0px; top:100px; z-index: 30;}
#gamecanvas {width:660px; height:440px;position:absolute; top:0px;left:0px;z-index: 5;}
#canvasoverlay {width:730px; height:730px;position:absolute; top:-210px;left:-20px;z-index: 6; background: url('../img/spiral.jpg') center center no-repeat;display: none;}
#text {font-family: 'Cinzel', sans-serif; width:590px; height:50px; padding:40px 10px 6px 200px; color:#fff; font-size: 18px; overflow: hidden;z-index: 49; background: url('../img/bottom.png') top left no-repeat; position:absolute; bottom:0; right:0;}

#spritepreload {position:absolute; top:0; left:0; z-index:2; background:#000; width:1px; height:1px; overflow: hidden;}

#animtest {font-family: 'Cinzel', sans-serif; width:190px; height:50px; padding:40px 10px 6px 200px; color:#fff; font-size: 18px; overflow: hidden;z-index: 32; position:absolute; bottom:100px; right:0;}




.rotating {
  -webkit-animation: rotating-function 1.25s linear infinite;
     -moz-animation: rotating-function 1.25s linear infinite;
      -ms-animation: rotating-function 1.25s linear infinite;
       -o-animation: rotating-function 1.25s linear infinite;
          animation: rotating-function 1.25s linear infinite;
}

@-webkit-keyframes rotating-function {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotating-function {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-ms-keyframes rotating-function {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-o-keyframes rotating-function {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotating-function {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}