/* ==========================================================================
   Import
   ========================================================================== */

@import url('http://media.playpark.net/PP/css/normalize.css');
@import url('http://media.playpark.net/pp/css/bootstrap.no-responsive.min.css');
@import url('http://fonts.googleapis.com/css?family=PT+Sans:400,700|Rosarivo');
@import url('sprites-main.css');

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
    font-family: 'PT Sans', sans-serif; font-size: 13px;
}

body {
    font-size: 1em;
    line-height: 1.4;
    background: url('../images/bg-home.jpg') top no-repeat
}

a:link {color: #754E38}
a:visited {color: #754E38}

h1,h2,h3,h4,h5,h6 {color: #4d2e18; font-family: 'Rosarivo', serif;}

h3 {font-size: 22px;}

.cf {font-family: 'Rosarivo', serif;}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {border: 0;margin: 0;padding: 0;}

textarea {resize: vertical;}

nav ul, nav ol {list-style: none; padding: 0; margin: 0}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

#top {
	width: 860px;
	margin: 180px auto 0;
	position: relative; z-index: 50;
}

ul#menu-main-navigation {
	/* float: left; */
	font-weight: 700;
	border-bottom: 6px solid #00527f;
	background:#0080c1;            
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	width: 100%; height: 40px;
}

ul#menu-main-navigation li {
	float:left;
	height: 40px;
	border-right: 1px solid rgba(0,0,0,0.2);
	position:relative;
}

ul#menu-main-navigation li a {
	color:#d4d4d4;
	text-decoration:none;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
	-webkit-animation-duration: 200ms;
	-moz-animation-duration: 200ms;
	-o-animation-duration: 200ms;
	animation-duration: 200ms;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	display: block;
	line-height: 20px;
	padding: 10px 21px;
}

ul#menu-main-navigation > li:first-child > a, ul#menu-main-navigation > li:first-child:hover {
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;
}

ul#menu-main-navigation > li:last-child > a, ul#menu-main-navigation > li:last-child:hover {
	-webkit-border-radius: 0 5px  0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}

ul#menu-main-navigation > li:last-child {
	border-right: none
}

ul#menu-main-navigation > li:hover {
	background: #00bfe6;   
}

ul#menu-main-navigation > li:hover > a {
	-webkit-animation-name: bounceInUp;
	-moz-animation-name: bounceInUp;
	-o-animation-name: bounceInUp;
	animation-name: bounceInUp;
	color: #006696;
	text-shadow: 0 0 1px #ccc;
}

ul#menu-main-navigation li ul, ul#menu-main-navigation li div.mega {
	background:#00669a;
	left: -999em;
	position: absolute; 
	width: 160px;
	z-index: 9999;
}

ul#menu-main-navigation li div.mega {
  width: 840px; padding: 10px;
}

ul#menu-main-navigation li ul li {
	padding: 0; border: none;
	height: auto;
}

ul#menu-main-navigation li ul a {
	background: #00669a;
	margin-right: 0;
	width: 120px;
	padding: 10px 20px;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	border-bottom: 1px solid #0e587c;
	border-top: 1px solid transparent;
}

ul#menu-main-navigation li ul a:hover, 
ul#menu-main-navigation ul li li:hover > a  {
	color: #2c2c2c;
	background: rgb(110,211,229);
	background: -moz-linear-gradient(top,  rgba(110,211,229,1) 0%, rgba(0,193,231,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,211,229,1)), color-stop(100%,rgba(0,193,231,1)));
	background: -webkit-linear-gradient(top,  rgba(110,211,229,1) 0%,rgba(0,193,231,1) 100%);
	background: -o-linear-gradient(top,  rgba(110,211,229,1) 0%,rgba(0,193,231,1) 100%);
	background: -ms-linear-gradient(top,  rgba(110,211,229,1) 0%,rgba(0,193,231,1) 100%);
	background: linear-gradient(to bottom,  rgba(110,211,229,1) 0%,rgba(0,193,231,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ed3e5', endColorstr='#00c1e7',GradientType=0 );
	border-bottom: 1px solid #56b2df;
	border-top: 1px solid #7BAED9;
	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

ul#menu-main-navigation li:hover ul, ul#menu-main-navigation li:hover div.mega {
	left: 0;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

ul#menu-main-navigation li:hover div.mega.mega-game-info {left: -144px;}
ul#menu-main-navigation li li ul {margin: -1px 0 0 160px;visibility:hidden;}
ul#menu-main-navigation li li:hover ul {visibility:visible;}
ul#menu-main-navigation li div.mega ul {position: static;float: left}
ul#menu-main-navigation li div.mega ul li {background: none;}

a#logo-ro2 {
	position: absolute; left: 50%; top: -170px; z-index: 9;
	margin-left: -127px; 
}

a#btn-signup {position: absolute; left: -30px; top: 370px; z-index: 8;}
a#btn-getting-started {position: absolute; right: -30px; top: 370px; z-index: 8;}

a#btn-download-game {position: absolute; left:50%; top: 340px; z-index: 8; margin-left: -88px;}
   
   
/* ==========================================================================
   Main
   ========================================================================== */

#main {
	width: 860px; margin: 0 auto; padding-bottom: 80px;
	background: #fff;
	-moz-box-shadow: 0px 2px 5px #999;
	-webkit-box-shadow: 0px 2px 5px #999;
	box-shadow: 0px 2px 5px #999;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 2, direction = 180, color = '#999999');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 2, Direction = 180, Color = '#999999')";
	min-height: 600px;
}

#hero {
	background: #004569;
	width: 840px; height: 300px;
	padding: 10px; 
	overflow: hidden;
}

#content {
	padding: 20px;460px
}

#announcement-box-home .nav-tabs > li > a {font-family: 'Rosarivo', sans-serif; font-weight: 700;}
	ul.list-announcements {list-style: none; padding: 0; margin: 0}
	.list-announcements li {position: relative; margin: 1px 0; padding: 5px 0; border-top: solid 1px #eee; *zoom: 1;}
	.list-announcements li:before,
	.list-announcements li:after {content: " ";display: table; }
	.list-announcements li:after {clear: both;}
	.list-announcements li:first-child {border: none;}
	.list-announcements li .label {font-size: 12px}
	.list-announcements li .meta-date {float: left}
	.list-announcements li .label-new {float: right;}
	.list-announcements li a {width: 270px; float: left; display: block; padding: 3px 5px;}
#announcement-box-home .tab-content a.link-more {
	display: block; padding: 5px;
	border-bottom: dashed 1px #ecbfc4;
	border-top: dashed 1px #ecbfc4;
	text-align: center;
	background: #ffffce;
	font-weight: 700;
}

#maintenance-home {position: relative; width: 100%; height: 50px;}
	#maintenance-home #schedule {color: #4b2716; width: 200px; text-align: center; display: block; margin-left: 30px; font-size: 14px; font-weight: 700;}
		#maintenance-home #schedule strong {color: #7c8f10; display: block; margin-bottom: 5px; }
	#maintenance-home #message-box {
		position: absolute; top: 0; right: 0;
		width: 140px;
		border: solid 7px #ffaa99;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0px 0px 5px #000000;
-webkit-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
		text-align: center;
	}
		#maintenance-home #message-box p {
			border: dashed 1px #fff;
			display: block;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			width: 127px;
			padding: 10px;
			margin: -5px;
		}


#acash-home {}
	#acash-home nav {position: relative;}
		#acash-home nav a {cursor: pointer}
			#acash-home nav a#btn-topup-guide {width:170px;height:45px; top: 15px; left: 45px;position: absolute;}
			#acash-home nav a#btn-abuse-policy {width:160px;height:45px; top: 64px; left: 60px;position: absolute;}
			#acash-home nav a#btn-popover-sg {width:120px;height:30px; top: 210px; left: 75px;position: absolute;}
			#acash-home nav a#btn-popover-my {width:120px;height:30px; top: 210px; left: 215px;position: absolute;}
			#acash-home nav a#btn-popover-vn {width:120px;height:30px; top: 255px; left: 75px;position: absolute;}
			#acash-home nav a#btn-popover-th {width:120px;height:30px; top: 255px; left: 215px;position: absolute;}
			#acash-home nav a#btn-acash-free {width:120px;height:120px; top: 310px; left: 27px;position: absolute;}
			#acash-home nav a#btn-acash-promo {width:120px;height:120px; top: 310px; left: 250px;position: absolute;}
	#acash-home .popover {width: 350px;}		
	#acash-home .popover-title {font-family: 'Rosarivo', serif; background: url('../images/pattern-brown.jpg') top left repeat; font-size: 16px; line-height: 24px; color: #ffedcf}
	
			
#item-shop-home	{
	border-bottom: dashed 1px #ecbfc4; padding: 20px 0; margin-bottom: 20px;
}
	#item-shop-home h3 {
		background: url('../images/strip-yellow.jpg') top no-repeat;
		text-align: center;
	}	
	#item-shop-home ul {}
		#item-shop-home ul li {
			float: left;
			width: 100px;
			text-align: center;
		}		
			#item-shop-home ul li img {
				width: 60px; height: 60px; padding: 5px;
				-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 172, 0, 0.5);
				-moz-box-shadow: 0px 0px 2px 2px rgba(255, 172, 0, 0.5);
				-ms-box-shadow: 0px 0px 2px 2px rgba(255, 172, 0, 0.5);
				box-shadow: 0px 0px 2px 2px rgba(255, 172, 0, 0.5);
				margin-bottom: 10px;
			}
.item-shop-list ul {}
	.item-shop-list ul li {}
		.item-shop-list ul li span {display: block}
		
#ranking-home {position: relative}
	#ranking-home .well {margin-bottom: 0}
	#ranking-home h3 {margin: -10px 0 10px 20px;}
	#ranking-home table {margin: 0}
	#ranking-home thead th {border-bottom: dashed 1px #ecbfc4;}
	#ranking-home tbody tr:first-child td {border: none;}
	#ranking-home tbody tr {color: #88512b}
	#ranking-home tbody tr:nth-child(even) {color: #bf7846}
	#ranking-home .char {
		background: url('../images/char-ranking.png') top left no-repeat; 
		width: 66px; height: 82px;
		position: absolute; top: -30px; right: 30px;
	}
	
#social-home {}
	#social-home h3 {
		background: #dff2f8;
		border-bottom: dashed 1px #ecbfc4;
		border-top: dashed 1px #ecbfc4;
		padding: 0 0 0 10px;
	}

#widget-facebook {}

#widget-twitter {}
	#widget-twitter .twtr-hd, #widget-twitter .twtr-ft {display: none;}
	#widget-twitter .twtr-timeline {position: static}
	
/* ==========================================================================
   Posts
   ========================================================================== */
   
.post .entry {margin: 10px 0}
   
/* ==========================================================================
   Footer
   ========================================================================== */

#bottom {
	position: fixed; bottom:0; left: 0;
	width: 100%; height: 60px;
	border-top: dashed 1px #999;
	background: #eee;
}

#bottom .inner-wrap {
	width: 860px; height: 60px;
	margin: 0 auto;
	position: relative;
}
	#bottom small#copyright-statement {
		position: absolute;
		top: 15px; left: 50%;
		margin-left: -180px;
		text-align: center
	}
	
	#bottom nav a {
		position: absolute; top: 10px;
		background-repeat: no-repeat;
		height: 40px;
	}
		#bottom nav a#logo-as {background-image: url('../images/footer/aslogo.png'); width: 100px; left: 0;}
		#bottom nav a#logo-playpark {background-image: url('../images/footer/playpark.png'); width: 100px; left: 120px;}
		#bottom nav a#icon-rating {background-image: url('../images/footer/gamerate.png'); width: 100px; right: 140px;}
		#bottom nav a#logo-gravity {background-image: url('../images/footer/gravity.png'); width: 130px; right: 0;}
		
/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {}
	.sidebar h4 {
		background: #dff2f8;
		padding: 10px;
		border-bottom: dashed 1px #ecbfc4;
		border-top: dashed 1px #ecbfc4;
		margin: 0 -19px 10px -20px;
	}
	.sidebar ul {
		list-style: none;
		margin: 0; padding: 0;
		border: solid 1px #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
		.sidebar ul li {
			background: #eee; padding: 10px;
			border-top: solid 1px #ccc;
		}
		.sidebar ul li:first-child {border: none;
			-webkit-border-radius: 5px 5px 0 0;
			-moz-border-radius: 5px 5px 0 0;
			border-radius: 5px 5px 0 0;
		}
		.sidebar ul li:last-child {
			-webkit-border-radius: 0 0 5px 5px;
			-moz-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px; 
		}
		.sidebar ul li.current_page_item, .sidebar ul li.current-cat {background: #ffcbad}
			.sidebar ul li.current_page_item a, .sidebar ul li.current-cat a {font-weight: 700}

/* ==========================================================================
   Page ID 48 aka Homepage
   ========================================================================== */

.page-id-48 #content {padding-top: 180px; background: url('../images/img-wave-home.jpg') center 40px no-repeat}
.page-id-48 #top {margin: 20px auto 0}
.page-id-48 a#logo-ro2 {top: 290px;}



/* ==========================================================================
   Page - Minimum Requirement
   ========================================================================== */
table.requirementTable th { width: 30%; border:1px dashed #ECBFC4; background:none repeat scroll 0 0 #FFFFCE; height: 40px;}
table.requirementTable td { text-align:center; height: 60px; border-bottom:1px dashed #ECBFC4;}


/* ==========================================================================
   Page - Job Classes
   ========================================================================== */
.jobTitle {background: #c93d00; color: #FFFFFF; font-size: 16px; font-weight: bold; text-align: center;}
.jobSubTitle {background: #bebebe; color: #FFFFFF; font-size: 16px; font-weight: bold; text-align: center;}
a.skilltree_thumb img { border: 2px solid #333333; height: 60px; width: 60px;}
img.jobLevel25 { float: right;}
p.jobLevelText { color: #787878; float:left; width:200px;}
table.jobClasses td {vertical-align:top;}


/* ==========================================================================
   Page - Map
   ========================================================================== */
table.mapTable td { height: 30px; border-bottom:1px dashed #ECBFC4;}


/* ==========================================================================
   Layout
   ========================================================================== */

#two-columns .span9 {
	padding-left: 20px;
	border-left: dashed 1px #ccc;
	min-height: 600px;
}

/* ==========================================================================
   Category Template
   ========================================================================== */

.category article {
	margin-left: -20px;
	padding: 20px;
	border-bottom: dashed 1px #ccc;
}

.category .list-announcements li a {width: 460px;}

/* ==========================================================================
   Two Columns (Sidebar|Content) Template
   ========================================================================== */
   
/* ==========================================================================
   Components
   ========================================================================== */
   
.media_wallpaper {}
	.media_wallpaper figure {width: 100%; height: 100px; overflow: hidden; margin-bottom: 5px; display: block;}
		.media_wallpaper figure img {width: 100%; height: auto;}
		
.media_facebook {position: relative; width: 590px; height: 280px; margin: 10px 0; border-bottom: solid 1px #ccc;}
	.media_facebook img.avatar {background: #FFF; position: absolute; bottom: 20px; left: 30px; width: 100px; height: 100px; padding: 3px; border: solid 1px #ccc;}
	.media_facebook .btn {position: absolute; bottom: 25px; right: 10px;}
	
.media_avatar {border-top: solid 1px #ccc; border-left: solid 1px #ccc; margin-bottom: 10px}
	.media_avatar img {background: #f2f2f2; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; padding: 8px; float: left;}
   
/* ==========================================================================
   Plugin CSS
   ========================================================================== */
   
#catfish {text-align:center; border-top: 1px solid #000; position: relative; z-index: 99999999; background: #fffeff; display:none;}
	#catfish #catfish-ads {position: relative; padding: 0; margin: 5px 0 0;}
	a#catfish-close {position:absolute; top:5px; right:15px; color: red; background: url('http://www.playpark.net/wp-content/themes/pp/fancybox/fancybox_sprite.png') no-repeat; width: 36px; height: 36px; text-indent: -110px; font-size: 24px; line-height: 32px;}
	a:link#catfish-close, a:visited#catfish-close, a:hover#catfish-close, a:active#catfish-close {font-weight: bold;text-decoration: none;}

.screenshot {position: relative}
a.pointer {
	position: absolute;
	width: 20px; height: 20px;
	background: #d30000;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-size: 11px;
	color: #fff;
	line-height: 20px;
	text-align: center;
	border: 2px solid #333;	
	text-decoration: none;
}
	a.pointer:hover {text-decoration: none;}

#ss-tooltip {
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	padding:10px;
	display:none;
	color:#fff;
	max-width:320px;
  z-index: 99999999999;
}


/* ==========================================================================
   Override/Customised from Bootstrap
   ========================================================================== */
.label {text-shadow: none; font-size: 14px; line-height: 20px}
.label-news{background-color: #D0F6FB; color: #007a8a;}
.label-notices, .label-new  {background-color: #D2FFDD; color: #00761d;}
.label-events {background-color: #FFE7CE; color: #6d3800;}

.alert-red {color: #B94A48; background-color: #F2DEDE; border-color: #EED3D7}
.alert-blue {color: #3A87AD; background-color: #D9EDF7; border-color: #BCE8F1}
.alert-green {color: #468847; background-color: #DFF0D8; border-color: #D6E9C6}

.modal-iframe {
	width: 740px;
	margin: -400px 0 0 -370px;
}
	.modal-iframe .modal-body {max-height: none;}
	.modal-iframe iframe {height: 510px;}

.nav-tabs {}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
-moz-box-shadow: 1px 0px #c2c2c2;
-webkit-box-shadow: 1px 0px #c2c2c2;
box-shadow: 1px 0px #c2c2c2;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 1, direction = 90, color = '#c2c2c2');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 1, Direction = 90, Color = '#c2c2c2')";
}

ol.carousel-linked-nav {
  position: absolute; bottom: 20px; right: 20px;
  list-style: none; padding: 0; margin: 0
}
	ol.carousel-linked-nav li {float: left; margin: 0 2px}
		ol.carousel-linked-nav li a{
			-webkit-border-radius: 7px;
			-moz-border-radius: 7px;
			border-radius: 7px;
			height: 14px; width: 14px;
			background: #FFF;
			text-align: center; line-height: 30px;
			text-decoration: none;
			text-indent: -9999em;
			opacity: 0.7;
			-moz-box-shadow: 0px 0px 5px #000;
			-webkit-box-shadow: 0px 0px 5px #000;
			box-shadow: 0px 0px 5px #000;
			display: block;
		}
		ol.carousel-linked-nav li.active a {opacity: 1}
.well {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}		
.well-pattern-yellow {
	background: url('../images/pattern-yellow.jpg') top center repeat;
}

.table tr.green td, .table tr.green th {background-color: #DFF0D8 !important}
.table tr.blue td, .table tr.blue th {background-color: #D9EDF7 !important}
.table tr.red td, .table tr.red th {background-color: #F2DEDE !important}
.table tr.dark-gray td, .table tr.dark-gray th {background-color: #595959 !important; color: #f2f2f2 !important}

.title span {font-size: 200%; vertical-align: middle}

.align-center {text-align: center}

a.btn {color: #fff}
a.btn.btn-grey {color:#333}

.nav-pills>.active>a, .nav-pills>.active>a:hover {background-color: #C6BC39}

/* ==========================================================================
   Animation
   ========================================================================== */
@-webkit-keyframes bounceInUp {
  0% {opacity: 1;-webkit-transform: translateY(0);}
  50% {opacity: 0;-webkit-transform: translateY(10px);}
  60% {opacity: 0;-webkit-transform: translateY(-10px);}
  100% {opacity: 1;-webkit-transform: translateY(0);}
}
@-moz-keyframes bounceInUp {
  0% {opacity: 1;-moz-transform: translateY(0);}
  50% {opacity: 0;-moz-transform: translateY(10px);}
  60% {opacity: 0;-moz-transform: translateY(-10px);}
  100% {opacity: 1;-moz-transform: translateY(0);}
}
@-ms-keyframes bounceInUp {
  0% {opacity: 1;-ms-transform: translateY(0);}
  50% {opacity: 0;-ms-transform: translateY(10px);}
  60% {opacity: 0;-ms-transform: translateY(-10px);}
  100% {opacity: 1;-ms-transform: translateY(0);}
}
@keyframes bounceInUp {
  0% {opacity: 1;transform: translateY(0);}
  50% {opacity: 0;transform: translateY(10px);}
  60% {opacity: 0;transform: translateY(-10px);}
  100% {opacity: 1;transform: translateY(0);}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}    
  100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
  0% {opacity: 0;}    
  100% {opacity: 1;}
}
@-ms-keyframes fadeIn {
  0% {opacity: 0;}    
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}    
  100% {opacity: 1;}
}

/* =============================================================================
   Grid
   ========================================================================== */

.row {width: 100%;margin: 0 auto 20px;}
	.row.overflowVisible {overflow: visible}

.col-one, .col-two, .col-three, .col-four, .col-five, .col-six, .col-seven, .col-eight, .col-nine, .col-ten, .col-eleven {
margin-right: 20px;
float: left;
min-height: 1px;
}

.col-one {width: 58px}
.col-two {width: 136px}
.col-three {width: 214px}
.col-four {width: 292px}
.col-five {width: 370px}
.col-six {width: 448px}
.col-seven {width: 526px}
.col-eight {width: 604px}
.col-nine {width: 682px}
.col-ten {width: 760px}
.col-eleven {width: 838px}
.col-twelve {width: 100%}
.col-last {margin-right: 0px}

.fluid-cols .col-one, .fluid-cols .col-two, .fluid-cols .col-three, .fluid-cols .col-four, .fluid-cols .col-five, .fluid-cols .col-six, .fluid-cols .col-seven, .fluid-cols .col-eight, .fluid-cols .col-nine, .fluid-cols .col-ten, .fluid-cols .col-eleven {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.fluid-cols .col-one {width: 4.85%}
.fluid-cols .col-two {width: 13.45%}
.fluid-cols .col-three {width: 22.05%}
.fluid-cols .col-four {width: 30.75%}
.fluid-cols .col-five {width: 39.45%}
.fluid-cols .col-six {width: 48%}
.fluid-cols .col-seven {width: 56.75%}
.fluid-cols .col-eight {width: 65.4%}
.fluid-cols .col-nine {width: 74.05%}
.fluid-cols .col-ten {width: 82.7%}
.fluid-cols .col-eleven {width: 91.35%}
.fluid-cols .col-twelve {width: 100%}
.fluid-cols .col-last {margin-right: 0px}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.style-none {list-style: none; padding: 0; margin: 0}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}