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


#background {
	background-image:url(images/);
	background-color:#4bafe8;
	margin:0px;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0px;
	margin-bottom:0px;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	font-size: 100%;
	font-weight:normal;
}
img {
	border:solid 2px #ffdd00;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}
a:link {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
	color:#204a89;
}
a:visited {
	text-decoration: none;
	color:#204a89;
}
a:hover {
	color: #ffdd00;
	text-decoration: none;
}
a:active {
	color:#204a89;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
#container {
	width: auto;
	height: 100%;
	background-color:none;
	margin: 30px auto 0px auto;
	font-size: 100%;
}
/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/


/* ~~ Main level ~~ */
#top_menu_container {
	width:auto;
	height:20px;
	padding: 0px 0px 0px 0px;
	border-bottom:1px solid #FFFFFF;
	z-index:100;
}
.top_menu_container1 {
	background-color:#000000;
}
.top_menu_container2 {
	background-color:#ffdd00;
}
#top_menu_content {
	height:20px;
	margin: 0px auto 0px auto;
	position:relative;
	background-color:none;
}
.top_menu_content1 {
	width:750px;
	padding: 0px 0px 0px 140px;
}
.top_menu_content2 {
	width:750px;
	padding: 0px 0px 0px 10px;
	color:#000000;
}
/* ~~ Reset default ul styles ~~ */
#top_menu, #top_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* ~~ Main level ~~ */
#top_menu {
	width:750px;
	height:20px;
	margin: 0px auto 0px auto;
	float:left;
	position:relative;
	background-color:none;
	z-index:10;
}
/* ~~ Clear floats ~~ */
#top_menu:before, #top_menu:after {
	content: "";
	display: table;
}
#top_menu:after {
	clear: both;
}
#top_menu {
	zoom:1;
}
/* ~~ List elements ~~ */
#top_menu li {
	float: left;
 border-right:;
 box-shadow:;
	position: relative;
}
#top_menu a {
	float: left;
	width:140px;
	height:16px;
	padding: 4px 0px 0px 0px;
	font-size: 11px;
	text-align:center;
 text-transform:;
	text-decoration: none;
	border-bottom: 1px solid #FFF
}
.top_menu_1 a {
	color:#ffffff;
}
.top_menu_2 a {
	color:#000000;
}
#top_menu:hover > a {
	background-image:none;
	background-color:#ffdd00;
	opacity:0.8;
	color:#000000;
}
#top_menu li a:hover {
	background-color:#ffffff;
	color: #000000;
}
*html #top_menu li a:hover { /* IE6 only */
	background-color:#ffffff;
	color: #ffffff;
}
/* ~~ Submenus ~~ */

#top_menu ul {
	margin: 0px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 21px;
	left: 0;
	background-color:none;
	color: #000000;
	box-shadow: 2px 2px 8px rgba(0,0,0,.3);
	border-radius: 3px;
	transition: all .2s ease-in-out;
}
#top_menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}
#top_menu ul ul {
	float:none;
	background-color: #000;
	top: 0;
	right:140px;
	opacity: 1;
	margin: 0px 0px 0px 0px;
	_margin: 0px; /*IE6 only*/
	box-shadow: 2px 2px 8px rgba(0,0,0,.3);
}
#top_menu ul li {
	float: left;
	display: block;
	z-index: 1;
	border-bottom: #ffffff;
	_line-height: 0; /*IE6 only*/
 box-shadow:0px 0px 0px #, 0px 0px 0px #;
}
#top_menu ul li :last-child {
	border-bottom:hidden;
}
#top_menu ul a {
	display: block;
	width: 130px;
	height:auto;
	_height: 16px; /*IE6 only*/
	padding: 6px 5px 6px 5px;
	float: none;
	text-transform: none;
	font-size: 10px;
	color:#204a89;
	background-color: #ffffff;
}
#top_menu ul a:hover {
	background-color: #ffdd00;
	color: #000000;
}
#top_menu ul ul a {
	width:140px;
	height:auto;
	padding: 0px 0px 0px 0px;
	opacity:1;
	background-color:none;
}
#top_menu ul ul a:hover {
	background-color:#ffffff;
}
/* ~~ first and last list elements ~~ */

#top_menu ul li:first-child a:hover:after {
	border-bottom-color: transparent;
}
#top_menu ul ul li:first-child a:hover:after {
	border-bottom-color: transparent;
}
/* ~~ /top menu ~~ */


#top_banner_container {
	width:auto;
	height:100px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	background-color:#ffdd00;
	box-shadow: 0px 10px 20px #666;
}
.top_banner_content {
	width: 800px;
	height: 90px;
	position:relative;
	margin: 0px auto 0px auto;
	padding: 10px 0px 0px 0px;
	background-color:#ffdd00;
}
#top_banner_col1 {
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 50px;
	width:470px;
	height:90px;
	float:left;
	position:relative;
	background-image:url(images/art/Polo-Player-bo.png);
	background-size:contain;
	background-repeat:no-repeat;
}
#top_banner_col2 {
	margin:0px 0px 0px 0px;
	padding: 15px 0px 0px 0px;
	width:100px;
	height:75px;
	float:left;
	position:relative;
}
#top_banner_col3 {
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width:180px;
	height:90px;
	float:right;
	position:relative;
}
/* ~~ main container ~~ */

#main_content_container {
	width:auto;
	height:600px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	box-shadow:inset 0px 0px 40px #000;
	
}
#main_content_container_light {
	width:auto;
	height:600px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	background-color:none;
	background-image:url(images/photos/hwpc-aerial-attack.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	box-shadow:inset 0px 0px 40px #000;
}
.main_content {
	width: 800px;
	height: 600px;
	position:relative;
	margin: 0px auto 0px auto;
	background-color:none;
	background-image:url(images/photos/hwpc-home-pic.png);
	background-repeat:no-repeat;
	background-position:bottom right;
	background-size:55% 60%;
}
#home {
	width: 800px;
	height: 600px;
	float:left;
	position:relative;
	margin: 0px auto 0px auto;
	background-color:none;
	background-size:cover;
}
.heading {
	width: 402px;
	height: 200px;
	float:left;
	position:relative;
	margin: 30px 0px 0px 50px;
	background-color:none;
	background-image:url();
	color:#ffffff;
}
.player {
	width: 260px;
	height: 150px;
	float:left;
	position:relative;
	margin: 30px 0px 0px 50px;
	padding: 16px 0px 0px 16px;
	background-color:none;
	background-image:url(images/photos/hwpc-aerial-attack.png);
	background-repeat:no-repeat;
	background-position:bottom right;
	background-size:contain;
	color:#ffffff;
}
.notices {
	width: 244px;
	height: 282px;
	float:left;
	position:relative;
	margin: 30px 0px 0px 50px;
	padding: 16px 16px 0px 16px;
	background-color:none;
	background-image:url();
	color:#ffffff;
	border: solid 1px #ffffff;
}
.notices_content {
	width: 244px;
	height: 256px;
	float:left;
	position:relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color:none;
	overflow:scroll;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
.notices a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 100%;
}
.notices a:link {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
	color:#ffdd00;
}
.notices a:visited {
	text-decoration: none;
	color:#ffdd00;
}
.notices a:hover {
	color: #ffffff;
	text-decoration: none;
}
.notices a:active {
	color:#ffdd00;
	text-decoration: none;
}
.notices a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
#container {
	width: auto;
	height: 100%;
	background-color:none;
	margin: 30px auto 0px auto;
	font-size: 100%;
}
.intro {
	width: 320px;
	height: auto;
	float:left;
	position:relative;
	margin: 30px 0px 0px 50px;
	background-color:none;
	color:#fff;
}
.gradient_bg {
	background-color: #ffffff;
	background-image: url(images/fallback-gradient.png);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#4bafe8));
	background-image: -webkit-linear-gradient(top, #ffffff, #4bafe8);
	background-image:    -moz-linear-gradient(top, #ffffff, #4bafe8);
	background-image:     -ms-linear-gradient(top, #ffffff, #4bafe8);
	background-image:      -o-linear-gradient(top, #ffffff, #4bafe8);
}
.gradient_bg_3 {
	background-color: #204a89;
	background: -moz-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* FF3.6+ */
	background: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #4bafe8), color-stop(80%, #204a89)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* Opera 11.10+ */
	background: -ms-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* IE10+ */
	background: radial-gradient(to bottom, #4bafe8 0%, #204a89 80%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bafe8', endColorstr='#010e1f', GradientType=0 ); /* IE6-8 */
}
.gradient_bg_2 {
	background-color: #204a89;
	background-image: url(images/fallback-gradient.png);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), color-stop(0.80, #204a89), to(#000000));
	background-image: -webkit-linear-gradient(top, #ffffff, #204a89, #000000);
	background-image:    -moz-linear-gradient(top, #ffffff, #204a89, #000000);
	background-image:     -ms-linear-gradient(top, #ffffff, #204a89, #000000);
	background-image:      -o-linear-gradient(top, #ffffff, #204a89, #000000);
}
.info {
	position:absolute;
	left:-1500px;
	clear:both;
	visibility:hidden;
	max-height:0%;
	opacity:0;
	font-size:0;
	width: 700px;
	margin: 0px auto 0px auto;
	padding: 30px 50px 30px 50px;
	background-color:#ffffff;
	box-shadow:0px 20px 40px #000;
}
.info:target {
	position:relative;
	left:auto;
	visibility:visible;
	max-height:4000px;
	opacity:1;
	font-size:100%;
	-webkit-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-moz-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-ms-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-o-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s; /* animate from opacity: 0 to opacity: 1 over .5 seconds with a .5 second delay */
}
.info h1 {
	color: #ffffff;
}
.panel {
	min-width: 800px;
	height: 600px;
	overflow-y: auto;
	overflow-x:hidden;
	visibility:hidden;
	opacity:0;
	margin-left: -150%;
	position:absolute;
	background: none;
	background-size:cover;
	background-repeat:no-repeat;
	z-index: 2;
}
.panel:target {
	margin-left: 0%;
	background-color: none;
	visibility:visible;
	opacity:1;
}
.product_header {
	float:left;
	position:relative;
	width:480px;
	height:auto;
	padding:5px 5px 5px 20px;
	margin: 0px;
	color:#ffffff;
	border-bottom: solid 4px #ffdd00;
	background-color: #204a89;
	background: -moz-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* FF3.6+ */
	background: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #4bafe8), color-stop(80%, #204a89)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* Opera 11.10+ */
	background: -ms-radial-gradient(top, #4bafe8 0%, #204a89 80%); /* IE10+ */
	background: radial-gradient(to bottom, #4bafe8 0%, #204a89 80%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bafe8', endColorstr='#010e1f', GradientType=0 ); /* IE6-8 */
}
.home_button {
	float:right;
	position:relative;
	width:50px;
	height:50px;
	margin:0px;
	padding:0px 0px 0px 0px;
	color:#204a89;
	background-color: #ffdd00;
	background-image:url(images/art/polo-home-icon.png);
	
	border-radius: 25px;
}
.polo_info {
	position:absolute;
	left:-1500px;
	clear:both;
	visibility:hidden;
	max-height:0%;
	opacity:0;
	font-size:0;
	width: 700px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	background-color:#ffffff;
	box-shadow:0px 20px 40px #000;
}
.polo_info:target {
	position:relative;
	left:auto;
	visibility:visible;
	max-height:4000px;
	opacity:1;
	font-size:100%;
	-webkit-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-moz-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-ms-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	-o-transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s;
	transition: 1s ease-in-out 0.5s, opacity 2s ease-in-out 1.5s; /* animate from opacity: 0 to opacity: 1 over .5 seconds with a .5 second delay */
}
.polo_info h1 {
	color: #ffffff;
}
.polo_info_container {
	position:relative;
	float:left;
	width:auto;
	height:100%;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	background-color:none;
}
.polo_info_content {
	position:relative;
	float:left;
	width:700px;
	height:100%;
	max-height:2000px;
	padding: 30px 50px 30px 50px;
	background-color:#ffffff;
	box-shadow:0px 20px 40px #666;
}
.polo_info_col1 {
	position:relative;
	float:left;
	width:230px;
	height:100%;
	max-height:2000px;
	padding:0px 20px 0px 0px;
	margin:30px 0px 0px 0px;
	background-color:#ffffff;
	
}
.polo_info_col2 {
	position:relative;
	float:left;
	width:450px;
	height:100%;
	max-height:2000px;
	background-color:none;
	margin:30px 0px 0px 0px;
	
}
#polo_image {
	overflow:hidden;
	width:450px;
	height:450px;
	margin: 0px 0px 0px 0px;
	position:relative;
	background-color:#C0C;
}
#project_image img {
	width: 400px;
	height: 283px;
	float: left;
}
/* ~~ Project info images ~~ */

#slider {
	width: 450px;
	height: 450px;
	margin: 0px auto;
	position: relative;
	overflow: hidden;
}
.slide {
	width: 450px;
	height: 450px;
	text-align: center;
	position: absolute;
	top: 0;
	background:none;
	line-height: 300px;
	font-size: 2em;
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	opacity:1;
}
#s1 {
	left: 0;
}
#s2 {
	left: 450px;
}
#s3 {
	left: 1350px;
}
#s4 {
	left: 1800px;
}
#s5 {
	left: 2250px;
}
#controls {
	margin: 1em 0;
	text-align: center;
}
#controls a {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 5px;
	background: #204a89;
	color: #fff;
	text-decoration: none;
	line-height: 32px;
}
.slide:target {
	left: 0;
	opacity: 1;
	z-index: 10;
}
.slide img {
	box-shadow: 2px 2px 2px #ddd;
}
/* ~~/project info images ~~ */


/* ~~ /PROJECT PAGE ~~ */

/**Content_ start**/

.content_content {
	width: 650px;
	height: 600px;
	position:relative;
	margin: 0px auto 0px auto;
	background-color:none;
}
.content_contact1 {
	width:300px;
	height:auto;
	float:left;
	padding:20px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	
}
.content_contact2 {
	width:300px;
	height:auto;
	float:left;
	position:relative;
	padding:20px 0px 0px 50px;
	margin:0px 0px 0px 0px;
	
}
.box_info {
	width:250px;
	height:auto;
	float:left;
	background-color:#4bafe8;
	position:relative;
	padding:20px 20px 20px 20px;
	margin:20px 50px 0px 0px;
}
form {
	width:300px;
	margin:0;
}
label {
	display:block;
	margin-top:5px;
	letter-spacing:1px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
input, textarea {
	width:240px;
	height:16px;
	background:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:1px 5px 2px 5px;
	font-size:11px;
	border:1px solid #ccc;
}
input:focus, textarea:focus {
	border:none;
}
textarea {
	height:60px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
placeholder {
	color:#cb4f24;
}
#submit {
	background-color:#204a89;
	color:#fff;
	width:70px;
	height:20px;
 text-indent:;
	border:none;
	margin-top:10px;
	cursor:pointer;
}
#submit:hover {
	background-color:#ffdd00;
	color:#000000;
	opacity:0.8;
}
.content_contact_email {
	display:block;
	float: left;
	width: 459px;
	height:auto;
	background-color:#ffffff;
	border:0px 0px 0px 0px;
	margin: 20px 0px 20px 0px;
	padding:20px 20px 20px 20px;
}
/**END Content_contact**/

#footer_container {
	width:auto;
	height:85px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
 background-color:;
	box-shadow: 0px 10px 20px #666;
}
.footer1 {
	width: 800px;
	height: 40px;
	position:relative;
	margin: 0px auto 0px auto;
	background-color:none;
	box-shadow:0px 20px 40px #000;
	color:#204a89;
}
.footer1 a {
	color:#204a89;
}
.footer1 a:hover {
	color:#FFdd00;
}
.footer2 {
	height:16px;
	position:relative;
	margin: 0px auto 0px auto;
	padding: 4px 0px 0px 0px;
	background-color:none;
	color:#ffffff;
	text-align:center;
}
.footer2 a {
	color:#FFFFFF;
}
.footer2 a:hover {
	color:#FFdd00;
}
.col1 {
	width: 250px;
	height: 30px;
	float: left;
	position:relative;
	margin:0;
	padding:10px 0px 0px 50px;
	background-color:#ffffff;
}
.col2 {
	width: 400px;
	height: 30px;
	float: left;
	position:relative;
	text-align:right;
	padding:10px 50px 0px 50px;
	background-color:#ffffff;
	color:#204a89;
}
.col3 {
	width: 800px;
	height: 40px;
	position:relative;
	padding:5px 0px 0px 0px;
	background-color:transparent;
	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:10px;
}
table {
	margin:20px 0px 0px 0px;
	background-color: none;
	width:auto;
}
th {
	border-bottom: 1px solid #4bafe8;
	padding: 4px 10px 4px 10px;
	font-size: 13px;
	border-right: none;
	border-left: none;
}
td {
	border-bottom: 1px solid #4bafe8;
	border-right: none;
	border-left: none;
	padding: 4px 10px 4px 10px;
	font-size: 12px;
	width:auto;
}
tbody, td, th {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #204a89;
}
;
.indent {
	margin-left: 16px;
}
h1 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	line-height: 40px;
}
h2 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 26px;
	opacity:1;
}
h3 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
	opacity:1;
}
h4 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	opacity:1;
}
h5 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
}
h6 {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 80px;
	line-height: 80px;
}
p {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
}
hr {
	border-top:1px solid #ffffff;
	margin:0;
}