@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	outline: none;
}

html {
	font-size: 16px;
	color: #666;
	font-family: 'Coming Soon', cursive;
}

html, body {
	height: 100%;
}

h2 {
	color: #666;
}

a:link { color: #666; text-decoration: none; }
a:visited { color: #666; }
a:active { color: #666; }
a:hover { color: #666; }

a img { border: 0; }

p {
	padding: 10px 0 0 0;
}

ul {
	list-style: circle;
	padding: 0 0 0 40px;
	margin-top: 5px;
}

body {
	background: url(../image/bg.jpg) center 0 no-repeat;
}

#page {
	width: 950px;
	margin: 0 auto;
}

#header {
	height: 200px;
	position: relative;
	z-index: 5;
}

#nav {
	list-style: none;
	padding: 95px 0 0 0;
	clear: both;
	margin: 0;
	float: left;
}

#nav li {
	height: 112px;
	width: 154px;
	margin-right: 30px;
	line-height: 112px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	float: left;
}

#nav li a { display:block; }

#nav .red {
	background: url(../image/navr.png) no-repeat;
	-webkit-transform: translate(0px, 18px) rotate(-11deg);
	-o-transform: translate(0px, 18px) rotate(-11deg);
	-moz-transform: translate(0px, 18px) rotate(-11deg);
	-ms-transform: translate(0px, 18px) rotate(-11deg);
}
#nav .orange {
	background: url(../image/navo.png) no-repeat;
	-webkit-transform: translate(0px, 0px) rotate(-3deg);
	-o-transform: translate(0px, 0px) rotate(-3deg);
	-moz-transform: translate(0px, 0px) rotate(-3deg);
	-ms-transform: translate(0px, 0px) rotate(-3deg);
}
#nav .yellow {
	background: url(../image/navy.png) no-repeat;
	-webkit-transform: translate(0px, -1px) rotate(2deg);
	-o-transform: translate(0px, -1px) rotate(2deg);
	-moz-transform: translate(0px, -1px) rotate(2deg);
	-ms-transform: translate(0px, -1px) rotate(2deg);
}
#nav .green {
	background: url(../image/navg.png) no-repeat;
	-webkit-transform: translate(0px, 15px) rotate(10deg);
	-o-transform: translate(0px, 15px) rotate(10deg);
	-moz-transform: translate(0px, 15px) rotate(10deg);
	-ms-transform: translate(0px, 15px) rotate(10deg);
}
#nav .blue {
	background: url(../image/navb.png) no-repeat;
	-webkit-transform: translate(0px, 60px) rotate(15deg);
	-o-transform: translate(0px, 60px) rotate(15deg);
	-moz-transform: translate(0px, 60px) rotate(15deg);
	-ms-transform: translate(0px, 60px) rotate(15deg);
}
#nav li:hover {
	background: url(../image/nav.png) no-repeat;
}

#warped {position: relative; display: block;  }

#warped>span[class^=w]:nth-of-type(n+0){
	display:block;
	position:absolute;
}

#warped span{
	font-size: 45px;
	font-weight: bold;
}

#warped .w0 {-moz-transform: rotate(-11deg);-webkit-transform: rotate(-11deg);-o-transform:
rotate(-11deg);-ms-transform: rotate(-11deg); transform: rotate(-11deg);
width: 20px; height: 24px; left: 49.08px; top: 46px;}

#warped .w1 {-moz-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);-o-transform:
rotate(-10deg);-ms-transform: rotate(-10deg); transform: rotate(-10deg);
width: 17px; height: 24px; left: 78px; top: 40px;}

#warped .w2 {-moz-transform: rotate(-7deg);-webkit-transform: rotate(-7deg);-o-transform:
rotate(-7deg);-ms-transform: rotate(-7deg); transform: rotate(-7deg);
width: 15px; height: 24px; left: 101px; top: 37px;}

#warped .w3 {-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);-o-transform:
rotate(-5deg);-ms-transform: rotate(-5deg); transform: rotate(-5deg);
width: 17px; height: 24px; left: 124px; top: 34px;}

#warped .w4 {-moz-transform: rotate(-8deg);-webkit-transform: rotate(-8deg);-o-transform:
rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);
width: 17px; height: 24px; left: 147px; top: 32px;}

#warped .w5 {-moz-transform: rotate(-2deg);-webkit-transform: rotate(-2deg);-o-transform:
rotate(-2deg);-ms-transform: rotate(-2deg); transform: rotate(-2deg);
width: 11px; height: 24px; left: 170px; top: 29px;}

#warped .w7 {-moz-transform: rotate(-3deg);-webkit-transform: rotate(-3deg);-o-transform:
rotate(-3deg);-ms-transform: rotate(-3deg); transform: rotate(-3deg);
width: 17px; height: 24px; left: 205px; top: 26px;}

#warped .w8 {-moz-transform: rotate(-2deg);-webkit-transform: rotate(-2deg);-o-transform:
rotate(-2deg);-ms-transform: rotate(-2deg); transform: rotate(-2deg);
width: 17px; height: 24px; left: 229px; top: 23px;}

#warped .w9 {-moz-transform: rotate(-1deg);-webkit-transform: rotate(-1deg);-o-transform:
rotate(-1deg);-ms-transform: rotate(-1deg); transform: rotate(-1deg);
width: 27px; height: 24px; left: 252px; top: 21px;}

#warped .w10 {
width: 17px; height: 24px; left: 294px; top: 20px;}

#warped .w11 { 
width: 17px; height: 24px; left: 316px; top: 19px;}

#warped .w13 {-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);-o-transform:
rotate(4deg);-ms-transform: rotate(4deg); transform: rotate(4deg);
width: 20px; height: 24px; left: 361px; top: 21px;}

#warped .w14 {-moz-transform: rotate(6deg);-webkit-transform: rotate(6deg);-o-transform:
rotate(6deg);-ms-transform: rotate(6deg); transform: rotate(6deg);
width: 17px; height: 24px; left: 388px; top: 21px;}

#warped .w15 {-moz-transform: rotate(8deg);-webkit-transform: rotate(8deg);-o-transform:
rotate(8deg);-ms-transform: rotate(8deg); transform: rotate(8deg);
width: 8px; height: 24px; left: 412px; top: 20px;}

#warped .w16 {-moz-transform: rotate(9deg);-webkit-transform: rotate(9deg);-o-transform:
rotate(9deg);-ms-transform: rotate(9deg); transform: rotate(9deg);
width: 8px; height: 24px; left: 420px; top: 22px;}

#warped .w17 {-moz-transform: rotate(10deg);-webkit-transform: rotate(10deg);-o-transform:
rotate(10deg);-ms-transform: rotate(10deg); transform: rotate(10deg);
width: 17px; height: 24px; left: 429px; top: 21px;}

#warped .w18 {-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);-o-transform:
rotate(4deg);-ms-transform: rotate(4deg); transform: rotate(4deg); width:
17px; height: 24px; left: 449px; top: 23px;}

#warped .w19 {-moz-transform: rotate(9deg);-webkit-transform: rotate(9deg);-o-transform:
rotate(9deg);-ms-transform: rotate(9deg); transform: rotate(9deg);
width: 17px; height: 24px; left: 468px; top: 23px;}

#warped .w20 {-moz-transform: rotate(12deg);-webkit-transform: rotate(12deg);-o-transform:
rotate(12deg);-ms-transform: rotate(12deg); transform: rotate(12deg);
width: 11px; height: 24px; left: 494px; top: 25px;}

#warped .w21 {-moz-transform: rotate(8deg);-webkit-transform: rotate(8deg);-o-transform:
rotate(8deg);-ms-transform: rotate(8deg); transform: rotate(8deg);
width: 17px; height: 24px; left: 512px; top: 28px;}

#content {
	margin-top: 40px;
	width: 890px;
	position: relative;
	z-index: 2;
	padding-bottom: 15px;
}

.bubble {
	padding: 20px 30px;
    background: #fff;
    border-radius: 70px;
    box-shadow: inset 0 0 50px rgba(255,90,90,0.7), 0 5px 10px #bbb;
	position:relative;
	margin-bottom: 10px;
}

.bubble.orange {box-shadow: inset 0 0 50px rgba(255,180,40,0.7), 0 5px 10px #bbb;}
.bubble.yellow {box-shadow: inset 0 0 50px rgba(255,255,0,0.7), 0 5px 10px #bbb;}
.bubble.green {box-shadow: inset 0 0 50px rgba(90,255,40,0.7), 0 5px 10px #bbb;}
.bubble.blue {box-shadow: inset 0 0 50px rgba(90,220,255,0.7), 0 5px 10px #bbb;}

.bubble span {
	font-size: 18px;
	clear: both;
	display: block;
	font-weight: bold;
	margin-top: 20px;
}

.bubble span:first-child {
	margin-top: 0;
}

.bubble span:before { content: url(../image/starr.png); margin-right: 5px; }
.bubble.orange span:before { content: url(../image/staro.png); }
.bubble.yellow span:before { content: url(../image/stary.png); }
.bubble.green span:before { content: url(../image/starg.png); }
.bubble.blue span:before { content: url(../image/starb.png); }

.imageBubble {
	position:absolute;
}

.img { position:absolute; width: 264px; }
.img:before, .img:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.img:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

#mapBubble {
	border-radius: 25px;
	overflow: hidden;
}

.qual {
	margin-top:10px;
	margin-bottom:-10px;
}

.qual img {
	opacity: 0.7;
}

form div {
	float: left;
	width: 300px;
	padding: 0 20px;
	margin-top: 10px;
}

form .select, form .sel {
	float: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	height: 20px;
	position: absolute;
	border: 2px solid #CCC;
	background: #fff url(../image/drop.png) 85% 50% no-repeat;
	width: 90px;
}

form .sel { width: 310px; background-position: right; }

form .select select, form .sel select {
	border: 0;
	background: transparent;
	width: 110px;
	padding: 1px 3px;
}

form .sel select { width: 350px; }

form label {
	display: block;
	padding-bottom: 3px;
}

input[type="text"] {
	border-radius: 10px;
	height: 20px;
	background-color: #fff;
	padding: 0 3px;
	border: 2px solid #CCC;
	line-height: 20px;
	z-index: 2;
	position:relative;
	width: 310px;
}

form textarea {
	border: 2px solid #ccc;
	border-radius: 10px;
	width: 650px;
}

form *:focus { 	box-shadow: inset 0 0 10px #ccc; }