/*@font-face {
    font-family: 'jenna_sueregular';
    src: url('../fonts/jennasue.eot');
    src: url('../fonts/jennasue.eot?#iefix') format('embedded-opentype'),
         url('../fonts/jennasue.woff') format('woff'),
         url('../fonts/jennasue.ttf') format('truetype'),
         url('../fonts/jennasue.svg#jenna_sueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family: Tahoma;
}
body {
	overflow:scroll;
    padding:0;margin:0;
    height:100%;
    width:100%;
}
select, input {
	background:#FFF;
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	color: #ffffff;
	outline: 0;
}
select:focus,
textarea:focus,
input:focus {
    outline: 0;
    outline: none;
}
textarea {
	resize: vertical;
}
::-webkit-input-placeholder { color:#888; }
::-moz-placeholder { color:#888; }
:-ms-input-placeholder { color:#888; }
input:-moz-placeholder { color:#888; }

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
button, select, input {
	-webkit-appearance: none;
	-moz-appearance:none;
	border-radius: 0;
}
/*a {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}*/

.floatLeft {
	float:left !important;
}
.floatRight {
	float:right !important;
}
.clearLeft {
	clear:left !important;
}
.clearRight {
	clear:right !important;
}
.clearBoth {
	clear:both !important;
}
.displayNone {
	display:none !important;
}
#wrappAll {
    overflow:auto;
    height:100%;
    width:100%;
    position:relative;
}

/* ----- PRELOADING SCREEN ----- */
#preloader {
	width:100%;
	height:auto;
	position:fixed;
	top:0;
	left:0;
	background:#FFFFFF;
	z-index:99;
}
#preloader img {
	width:100%;
	height:100%;
}
#loading {
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	background:url("../images/222.gif") center 25% no-repeat;
}

/* ----- HEAD ----- */
#head {
	width:100%;
	/*height:12%;*/
	line-height:40px;
	background:#66a0f0;
	overflow:hidden;
}
#head a,
#bottomMenu a {
	width:20%;
	text-align:center;
	font-size:0.9em;
	color:#FFFFFF;
	float:left;
}
#head a {
	text-indent:-9999px;
	background:url("../images/icons_small.png") center -40px no-repeat;
}
#head a.options {
	background:url("../images/icons_small.png") center 0px no-repeat;
}
#head h1 {
	width:60%;
	line-height:40px;
	float:left;
	font-size:1em;
	color:#FFF;
	text-align:center;
	text-shadow:1px 2px #333;
}

/* ----- CUSTOM ELEMENTS ----- */
.checkbox, .radio {
	width:30px;
	height:30px;
	background:url("../images/checkbox.png") no-repeat;
	float:right;
}
.radio {
	background: url(radio.png) no-repeat;
}
.select {
	position: absolute;
	width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(select.png) no-repeat;
	overflow: hidden;
}

/* ----- CONTENT ----- */
#content {
	min-height:100%;
	padding:0 0 40px 0;
	overflow:hidden;
	position:relative;
}
p.about {
	padding:5%;
	font-size:1em;
	text-align:justify;
}

/* ----- OPTIONS BOX ----- */
#searchBox,
#optionsBox {
	width:100%;
	height:100%;
	background:#BFBFBF;
	position:fixed;
	top:0;
	left:0%;
	z-index:100;
	transform: translateX(-100%);
	-ms-transform: translateX(-100%); /* IE 9 */
	-webkit-transform: translateX(-100%); /* Safari and Chrome */

	transition: transform 0.2s ease-in;
	-webkit-transition: -webkit-transform 0.2s ease-in;
}
#searchBox h1,
#optionsBox h1 {
	line-height:40px;
	text-align:center;
	color:#FFFFFF;
	background:#66A0F0;
	font-size: 1em;
    text-shadow: 1px 2px #333333;
    border-bottom:5px solid #BFBFBF;
}
#searchBox a,
#optionsBox a {
	padding:0 5%;
	display:block;
	line-height:40px;
	margin:0 0 5px;
	color:#000;
	font-size:1em;
	background:#FFFFFF;
	clear:left;
}
#optionsBox a img {
	width:30px;
	margin:5px 10px 0 0;
	float:left;
}

/* ----- SEARCH BOX ----- */
#searchBox {
	transform: translateX(100%);
	-ms-transform: translateX(100%); /* IE 9 */
	-webkit-transform: translateX(100%); /* Safari and Chrome */
}
#wrappAll #searchBox input {
	width:75%;
	margin:0 0 5px;
	padding:0 0 0 5%;
	color:#FFFFFF;
	background:#333;
	border-radius:10px 0 0 10px;
	border:0px;
	float:left;
}
#wrappAll #searchBox input[type="submit"] {
	width:20%;
	padding:0 5%;
	background:#333 url("../images/icons_small.png") center -40px no-repeat;
	border-radius:0 10px 10px 0;
	cursor:pointer;
}
#wrappAll a.close {
	display:block;
	width:54px;
	height:40px;
	padding:0;
	margin:0;
	background: transparent url("../images/icons_small.png") center -80px no-repeat;
	position:absolute;
	top:0px;
	right:0px;
}
#searchBox a.close {
	right:auto;
	left:0px;
}
#wrappAll.aniLeft #optionsBox {
	transform: translateX(0%);
	-ms-transform: translateX(0%); /* IE 9 */
	-webkit-transform: translateX(0%); /* Safari and Chrome */
}
#wrappAll.aniRight #searchBox {
	transform: translateX(0%);
	-ms-transform: translateX(0%); /* IE 9 */
	-webkit-transform: translateX(0%); /* Safari and Chrome */
}

/* ----- BOTTOM MENU ----- */
#bottomMenu {
	width:100%;
	height:42px;
	background:#FFFFFF;
	position:fixed;
	bottom:0%;
}
#bottomMenu a {
	width:33%;
	height:40px;
	line-height:40px;
	background:#585866;
	margin:0.5% 0 0 0;
}
#bottomMenu a:nth-child(2) {
	margin:0.5% 0.5% 0;
}

/* ----- LIST ----- */
.list {
	float:left;
	margin:0.25% 0;
}
.list a {
	width:49.5%;
	float:left;
	position:relative;
	margin:0.5% 0;
}
.list a:nth-child(odd) {
	margin:0.5% 1% 0.5% 0;
}
.list a img {
	width:100%;
	display:block;
	background:#FFF;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-moz-tap-highlight-color:rgba(0,0,0,0);
	tap-highlight-color:rgba(0,0,0,0);
}
.list a p {
	font-size:16px;
	line-height:30px;
	position:absolute;
	bottom:0px;
	margin:0 2%;
	width:96%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow:-1px -1px 0px rgba(0,0,0,0.4),
				-1px 1px 0px rgba(0,0,0,0.4),
				1px -1px 0px rgba(0,0,0,0.4),
				1px 1px 0px rgba(0,0,0,0.4);
}
.list a p.title {
	font-weight:bold;
	font-size:16px;
	line-height:25px;
	bottom:25px;
}

/* ----- LOGIN ----- */
#login {
	width:90%;
	padding:10% 5%;
	float:left;
}
#login a {
	display:block;
	width:100%;
	line-height:40px;
	margin:0 0 5%;
	font-size:1.5em;
	text-align:center;
	background:#da4835;
	border-radius:10px;
	text-shadow:0 1px #333333;
	box-shadow:0 4px 0 0 #BE3A29;
}
#login a.fb {
	background:#3B5998;
	box-shadow:0 4px 0 0 #324B80;
}
#login a.tw {
	background:#2dcafd;
	box-shadow:0 4px 0 0 #0086AF;
}

/* ----- MAP ----- */
.map {
	float:left;
	width:100%
}
.map img {
	width:100%;
}
.filter {
	float:left;
	margin:0 5% 5%;
}
.filter p {
	font-size:1.2em;
	margin:2% 0 5%;
	text-align:center;
}
.filter div {
	width:80%;
	float:left;
	margin:0 10% 2.5%;
}
.filter div label {
	font-size:1em;
	float:left;
	line-height:30px;
}
.filter div input {
	float:right;
}

/* ----- CREATE ----- */
.complaint,
.create {
	float:left;
	width:95%;
	margin:2.5%;
}
.create p {
	text-align:center;
	font-size:21px;
	margin:20px 0 10px;
	text-transform:uppercase;
	color:#777;
}
.browseBg {
	overflow:hidden;
	padding:10px 0;
}
.imgBg {
	width:54px;
	display:block;
	padding:20px;
	margin:0 auto;
	background:#f0f0f0;
	border-radius:50px;
	border:1px solid #bfbfbf;
}
.imgBg .img {
	width:54px;
	height:40px;
	padding:7px 0;
	vertical-align:middle;
	background:#f0f0f0 url("../images/icons_small.png") center -115px no-repeat;
}
.create .photo {
	width:100%;
	position:relative;
}
.create .photo p {
	font-size:16px;
	margin:0;
	text-transform:none;
	text-align:left;
}
.create .photo p span {
	color:#66A0F0;
}
.create .photo img {
	width:100%;
}
#wrappAll .create .photo a.close {
	width:80px;
	height:80px;
	top:0;
	right:0px;
	background:url("../images/icons.png") -28px -400px no-repeat;
}
.create select {
	width:120%;
	line-height:23px;
	padding:2% 9%;
	color:#737373;
	background:transparent;
}
#searchBox input,
.name,textarea,
.selectBg {
	width:100%;
	height:41px;
	padding:0;
	background:#f0f0f0 url("../images/icons_small.png") -10px -160px no-repeat;
	border:1px solid #bfbfbf;
	border-radius:10px;
	color:#737373;
	font-size:1em;
	overflow:hidden;
}
textarea {
	width:90%;
	min-height:70px;
	padding:5%;
	margin:10px 0 0 0;
	resize:vertical;
	background:#f0f0f0;
	border:0;
	box-shadow:0 0 0 1px #bfbfbf inset;
}
#sendComment,
.create #submit {
	width:100%;
	font-size:1.5em;
	color:#e6e6e6;
	padding:2% 6%;
	background:#4d4d4d;
	border:1px solid #262626;
	border-radius:10px;
	margin:20px 0;
}
/* ----- PROFILE ----- */
.userInfo {
	width:100%;
	padding:5%;
	float:left;
}
.userInfo img {
	width:30%;
	margin:0 5% 0 0;
	float:left;
}
.userInfo p {
	font-size:1.4em;
	display:block;
}
.fav {
	width:100%;
	height:40px;
	margin:0 0 5px;
	box-shadow:0 0 2px #000;
	float:left;
}
.fav a {
	font-size:1em;
	line-height:1.2em;
	color:#000;
	display:inline-block;
	vertical-align:middle;
}
.fav a span {
	display:block;
	color:#66A0F0;
}
.fav a.star {
	width:54px;
	height:40px;
	display:inline-block;
	background:url("../images/icons_small.png") center -240px no-repeat;
}
/*.fav a.star:hover,*/
.fav.off a.star {
	background-position:center -200px;
}
.fav.off a {
	text-decoration:line-through;
}

/* ----- SINGLE COMPLAINT ----- */
.complaint img {
	width:100%;
	float:left;
}
#searchResults,
.complaint a {
	height:35px;
	line-height:35px;
	padding:0 0 0 25px;
	margin:10px 0 0 0;
	float:left;
	color:#66A0F0;
	font-size:1.2em;
	background:url("../images/icons_small.png") -15px -286px no-repeat;
}
p.description {
	color:#777;
	font-style:italic;
	font-size:1.2em;
	display:block;
	float:left;
	margin:10px 0 20px;
}
p.description:before {
	content:"\"";
}
p.description:after {
	content:"\"";
}
.comments {
	float:left;
	margin:0 0 20px;
	border-top:2px dashed #777777;
}
.comments form {
	margin:20px 0;
	overflow:hidden;
}
.comments textarea {
	width:90%;
	margin:0 0 10px;
}
#sendComment {
	width:100%;
	margin:0;
	float:right;
}
.posted {
	width:96%;
	padding:2%;
	margin:0 0 2.5%;
	float:left;
	box-shadow:0 0 2px #000000;
	border-radius:5px;
}
.posted img {
	width:18%;
	margin:0 2.5% 0 0;
	float:left;
}
.posted p span,
.posted p {
	font-size:0.9em;
	/*line-height:1.2em;*/
}
.posted p.time,
.posted p span {
	color:#66A0F0;
	font-weight:bold;
}
.posted p span:after {
	content:" ";
}
.posted p.time {
	font-size:0.8em;
	font-weight:normal;
}
.posted.even img {
	float:right;
	margin:0 0 0 2%;
}
.posted.even p {
	text-align:right;
}
html, body {
    height:100%;
}
iframe {
	width:320px;
	height:450px;
	overflow:hidden;
}

/* ----- HOW TO ----- */
.how {
	padding:2.5% 5%;
}
.how ol li {
	font-size:1em;
	margin:2.5% 0 2.5% 5%;
}
.how ol li span {
	font-weight:bold;
}
p.title {
	font-size:1.7em;
}
.symbols {
	overflow:hidden;
	margin:5% 0;
}
.symbols div {
	width:90%;
	padding:2.5% 5%;
	margin:1% 0;
	box-shadow:0 0 2px #000000;
	float:left;
}
.symbols div img {
	width:20%;
	margin:0 5% 0 0;
	background:#FFF;
	float:left;
}
.symbols p {
	width:75%;
	font-size:1em;
	float:left;
}
.symbols p span {
	font-size:1.1em;
	line-height:1em;
	color:#66A0F0;
	display:block;
}





/* ----- Landscape on Keon ----- */
@media all and (min-width: 321px) and (max-width: 480px) {
	.list a {
		width:33%;
		float:left;
		position:relative;
		margin:0.25% 0;
	}
	.list a:nth-child(odd) {
		margin:0.25% 0;
	}
	.list a:nth-child(3n+2) {
		margin:0.25% 0.5%;
	}
}

/* ----- Vertical on Peak ----- */
@media all and (min-width: 481px) and (max-width: 540px) {
	.list a {
		width:49.5%;
		float:left;
		position:relative;
		margin:0.5% 0;
	}
	.list a:nth-child(odd) {
		margin:0.5% 1% 0.5% 0;
	}
}

/* ----- Peak ----- */
@media all and (min-width: 481px) {
	#head a {
		line-height:80px;
		font-size:1.5em;
		text-indent:-9999px;
		background:url("../images/icons.png") center -80px no-repeat;
	}
	#head a.options {
		background:url("../images/icons.png") center 0px no-repeat;
	}
	#searchBox h1,
	#optionsBox h1 {
		line-height:80px;
		font-size: 1.7em;
	    border-bottom:5px solid #BFBFBF;
	}
	#searchBox a,
	#optionsBox a {
		line-height:80px;
		padding:0 5%;
		margin:0 0 5px;
		font-size:1.7em;
	}
	#optionsBox a img {
		width:60px;
		margin:10px 10px 0 0;
		float:left;
	}
	#wrappAll #searchBox input {
		height:75px;
		border-radius:20px 0 0 20px;
		font-size:1.7em;
	}
	#wrappAll #searchBox input[type="submit"] {
		background:#333333 url("../images/icons.png") center -80px no-repeat;
		border-radius:0 20px 20px 0;
	}
	#content {
		padding:0 0 80px 0;
	}
	p.about {
		font-size:1.5em;
	}
	#bottomMenu {
		height:80px;
	}
	#bottomMenu a {
		height:80px;
		line-height:83px;
		font-size:1.5em;
	}
	#login a {
		line-height:80px;
		font-size:2em;
	}
	#head h1 {
		line-height:80px;
		font-size:1.7em;
	}
	#searchBox a.close,
	#optionsBox a.close {
		width:108px;
		height:80px;
		top:0px;
		background:url("../images/icons.png") center -160px no-repeat;
	}
	.list a p {
		font-size:21px;
		line-height:35px;
	}
	.list a p.title {
		font-size:27px;
		line-height:35px;
		bottom:27px;
	}
	.imgBg {
		width:108px;
		display:block;
		padding:25px;
		margin:0 auto;
		background:#f0f0f0;
		border-radius:80px;
		border:1px solid #bfbfbf;
	}
	.imgBg .img {
		width:108px;
		height:80px;
		padding:14px 0;
		background:#f0f0f0 url("../images/icons.png") center -230px no-repeat;
	}
	.selectBg {
		height:52px;
		background:#f0f0f0 url("../images/icons_small.png") -10px -153px no-repeat;
	}
	.browseBg {
		padding:25px 0;
	}
	.create p {
    	font-size: 26px;
    }
	.create .photo p {
    	font-size: 21px;
    }
	.create select {
		padding:10px 30px;
		font-size:1.5em;
	}
	textarea {
		width:95%;
		padding:2.5%;
		margin:20px 0 0;
		font-size:1.5em;
	}
	.create #submit {
		font-size:26px;
	}
	.filter p {
		font-size:1.7em;
		margin:2% 0 4%;
		text-align:center;
	}
	.filter div {
		width:47.5%;
		float:left;
		margin:0 0 5% 0;
	}
	.filter div:nth-child(odd) {
		margin-right:5%;
	}
	.filter div label {
		font-size:1.3em;
		float:left;
		line-height:30px;
	}
	.filter div input {
		float:right;
	}
	/* ----- PROFILE ----- */
	.userInfo img {
		width:30%;
		height:auto;
		margin:0 5% 0 0;
		background:transparent;
	}
	.userInfo p {
		font-size:2em;
	}
	.fav {
		width:100%;
		height:80px;
		margin:0 0 5px;
	}
	.fav a {
		font-size:1.6em;
		line-height:1.25em;
		color:#000;
	}
	.fav a.star {
		width:108px;
		height:80px;
		background:url("../images/icons.png") center -560px no-repeat;
	}
	/*.fav a.star:hover,*/
	.fav.off a.star {
		background-position:center -480px;
	}
	/* ----- SINGLE COMPLAINT ----- */
	#searchResults,
	.complaint a {
		height:40px;
		line-height:40px;
		padding:0 0 0 40px;
		margin:10px 0 0 0;
		font-size:1.5em;
		background:url("../images/icons.png") -33px -664px no-repeat;
	}
	p.description {
		font-size:1.7em;
		margin:10px 0 20px;
	}
	.comments {
		float:left;
		margin:0 0 20px;
	}
	.comments form {
		margin:20px 0;
	}
	.comments textarea {
		width:62%;
		margin:0;
	}
	#sendComment {
		width:30%;
		margin:0;
		float:right;
	}
	.name {  border-radius: 10px 10px 10px 10px;
    color: #737373;
    margin-bottom: 6px;
    min-height: 28px;
    padding: 2.5% 5%;
    width: 90%; }
	.posted {
		width:96%;
		padding:2%;
		margin:0 0 2.5%;
		border-radius:5px;
	}
	.posted img {
		width:14%;
		margin:0 2% 0 0;
	}
	.posted p span,
	.posted p {
		font-size:1.2em;
		line-height:1.2em;
	}
	.posted p.time {
		font-size:1em;
	}
	.posted.even img {
		margin:0 0 0 2%;
	}
	/* ----- HOW TO ----- */
	.how {
		padding:2.5% 5%;
	}
	.how ol li {
		font-size:1.2em;
		margin:2.5% 0 2.5% 5%;
	}
	p.title {
		font-size:1.7em;
	}
	.symbols p {
		font-size:1.2em;
	}
	.symbols p span {
		font-size:1.7em;
	}




}


/* ----- Landscape on Peak ----- */
@media all and (min-width: 541px) and (max-width: 960px) {
	.list a {
		width:25%;
		float:left;
		position:relative;
		padding:0;
		margin:0;
	}
	.list a:nth-child(odd) {
		margin:0;
	}
	.list a p.title {
		font-size:25px;
	}
	textarea {
		width:97%;
		padding:1.5%;
	}

}

