body
{	
font:15px/1.4 'Open Sans', Helvetica, Arial, sans-serif; 
background-color:#ffffff;
background-attachment:fixed;
color:#000000;
} 

a           
{	
color:#000099;
text-decoration:none;  
}


a:hover    
{ 
color:#000099;
text-decoration:underline;  
}

p
{
margin:0;
padding:3px 0;
}

p.thin
{
padding:0;
margin:0;
line-height:0.5;
}

.cent
{
text-align:center;
}

p.centital 
{
text-align: center;
font-style: italic;
}

.centbold
{
font-weight:bold;
text-align:center;
}

.large_centbold
{
font-weight:bold;
text-align:center;
font-size:larger;
}

.bold
{
font-weight:bold;
}

.largebold
{
font-weight:bold;
font-size:larger;
}

strong
{
font-weight:bold;
}

.italic
{
font-style:italic;	
}

.clear
{
clear:both;
display:inline-block;
width:100%;
}

.fllt
{
float:left;
padding:10px;	
margin-right:10px;
}

.flrt
{
float:right;
padding:10px;	
margin-left:10px;
}

.left
{
text-align:left;	
}

.skip
{
float:right;
width:50px;
font-size:2px;
line-height:2px;
}

.skip a           
{	
color:#ffffff; 
background-color:transparent;
text-decoration: none;  
}

h1
{
font:22px/1.5 'Open Sans', Arial, Helvetica, sans-serif;
text-align:center;
color:#ffffff; 
background-color:#6699cc;
background-color:#9CBAD6;
background-color:#0099cc;
background-color:#0183c1;
margin:0 0 10px 0;
padding:4px 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-o-border-top-left-radius: 5px;
-o-border-top-right-radius: 5px;
border-radius: 5px 5px 0 0;
}

h2
{
font:bold 18px/1.5 'Open Sans', Arial, Helvetica, sans-serif;
text-align:left;
color:#6699cc; 
color:#6F8DA9;
color:#0099cc;
color:#0183c1;
margin:15px 0 0 0;;
margin-bottom:0;
padding:4px 0;
}

h2.as
{
font:22px/1.5 'Open Sans', Arial, Helvetica, sans-serif;
text-align:center;
color:#ffffff; 
background-color:#6699cc;
background-color:#9CBAD6;
background-color:#0099cc;
background-color:#0183c1;
margin:0 0 10px 0;
padding:4px 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-o-border-top-left-radius: 5px;
-o-border-top-right-radius: 5px;
border-radius: 5px 5px 0 0;
}

h3
{
font:bold 14px/1.4 'Open Sans', Arial, Helvetica, sans-serif;
color:#6699cc; 
color:#6F8DA9;
color:#0099cc;
color:#0183c1;
padding:0;
margin-top:10px;
margin-bottom:0;
}

h4
{
font:bold 14px/1.4 'Open Sans', Helvetica, sans-serif;
color:#000000; 
margin-top:14px;
}

h5
{
font:bold 20px/1.4 'Open Sans', Arial, Helvetica, sans-serif;
color:#ffffff; 
text-align:center;
padding-top:70px;
}



h6
{
font:bold 13px/1.5 'Open Sans', Arial, Helvetica, sans-serif;
text-align:center;
color:#000000; 
margin-top:3px;
}

#wrapper
{
width:99%;
max-width:1090px;
padding-left:0.5%;
padding-right:0.5%;
min-height:800px;
margin-top:7px;
margin-bottom:7px;
margin-left: auto;
margin-right: auto;
background-color:#ffffff;
}

.header
{
position:relative;
display:block;
width:100%;
height:100px;
background:#ffffff url('images/HPC-logo.jpg') right no-repeat;
}

.header h1
{
float:left;
width:60%;
font:bold 28px/1 'Open Sans', Arial, Helvetica, sans-serif;
text-align:left;
color:#000000; 
background-color:#ffffff;
padding:0;
margin:0;
padding-top:80px;
padding-bottom:10px;
}

.header h2
{
float:left;
width:60%;
font:bold 28px/1 'Open Sans', Arial, Helvetica, sans-serif;
text-align:left;
color:#000000; 
background-color:#ffffff;
padding:0;
margin:0;
padding-top:80px;
padding-bottom:10px;
}

.banner
{
width:100%;
height:240px;
}

.banner h5
{
float:left; 
font:bold 22px/1.4 'Open Sans', Arial, Helvetica, sans-serif;
color:#000000;
width:79%;
padding-top:80px;
text-align:center;
}

.banner
{
width:100%;
height:240px;
}

.slideshow_head
{
width:100%;
height:240px;
}

.slideshow_head img
{
float:right;
width:19%;
height:auto;
padding-top:15px;
padding-right:2%;
}

#box-link
{
position:absolute;
top:0;
left:83%;
width:18%;
height:80px;
background-color:transparent;
}

#hd1
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head1mh.jpg') 50% no-repeat;
background-size:cover
}

#hd2
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head2mh.jpg') 50% no-repeat;
background-size:cover
}

#hd3
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head3mh.jpg') 50% no-repeat;
background-size:cover
}

#hd4
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head4mh.jpg') 50% no-repeat;
background-size:cover
}

#hd5
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head5mh.jpg') 50% no-repeat;
background-size:cover
}

#hd6
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head6mh.jpg') 50% no-repeat;
background-size:cover
}

#hd7
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head7mh.jpg') 50% no-repeat;
background-size:cover
}

#hd8
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head8mh.jpg') top left no-repeat;
background-size:cover
}

#hd9
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head9mh.jpg') top left no-repeat;
background-size:cover
}

#hd10
{
clear:both;
display:block;
width:100%;
height:240px;
background:#ffffff url('images-head/head10mh.jpg') top left no-repeat;
background-size:cover
}

.nav
{ 
clear:both;
width:100%;
height:45px;
margin-top:2px;
background-color:#0183c1;
}

.nav ul
{ 
display:inline;
list-style-type:none;
text-align:center;
}

.nav li
{
float:left;
position:relative;
}

.nav li li
{
float:none;
width:100%;
border-left:1px solid #6699cc;
border-right:1px solid #6699cc;
border-bottom:1px solid #6699cc;
}

.nav a
{
display:block;
font:16px/2.9 'Open Sans', Arial, Helvetica, sans-serif;
padding:0 10px;
text-align: center;
color:#ffffff; 
-moz-transition: all 0.4s ease-in;
-webkit-transition: all 0.4s ease-in;
-o-transition: all 0.4s ea1se-in;
transition: all 0.4s ease-in;
}

.nav a:hover
{
color:#000066; 
background-color:#ffffff;
text-decoration:none;
}

.nav a.onpage
{
color:#000066; 
background-color:#ffffff;
font:16px/2.9 'Open Sans', Arial, Helvetica, sans-serif;
}

.nav li li a 
{
height:auto;
text-align:left;
}

.subnav
{
position:absolute;
top:20px;
left: -10055px;
}

.nav li:hover .subnav
{
display:block;
top:45px;
left:0px;
}

.subnav
{
background-color:#ffffff;
z-index:1;
}

.subnav a
{
font:14px/2 'Open Sans', Arial, Helvetica, sans-serif;
color:#000099;
text-decoration:none;
padding:0 5%;
width:auto !important;
-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.subnav a:hover
{
color:#ffffff;
background-color:#0183c1;
 }  

.subnav ul.size1
{
float:left; 
width:140px;
text-align:left;
}

.subnav ul.size2
{
float:left; 
width:200px;
text-align:left;
}

.subnav ul.size3
{
float:left; 
width:230px;
text-align:left;
}

.subnav ul.size4
{
float:left; 
width:250px;
text-align:left;
}

.subnav ul.size5
{
float:left; 
width:280px;
text-align:left;
}

.subnav ul.size6
{
float:left; 
width:300px;
text-align:left;
}

.subnav ul.size7
{
float:left; 
width:330px;
text-align:left;
}

.subnav ul.size8
{
float:left; 
width:370px;
text-align:left;
}

.aside
{
float:right;
width:22%;
min-height:500px;
text-align:left;
margin-top:10px;
margin-bottom:20px;
}

.aside ul
{ 
float:left;
width:100%;
margin:0;
padding:0;
list-style-type:none;
margin:2px 0;
}

.aside li
{
clear:both;
width:100%;
display:block;
}

.aside a
{
display:block;	
font:14px/2.4 'Open Sans', Arial, sans-serif; 
color:#000099; 
border-bottom:2px solid #0183c1;
}

.aside a:hover
{ 
display:block;	
color:#000099; 
}

.asidesmall
{
float:left;
width:150px;
min-height:500px;
text-align:left;
padding:10px;
padding-top:20px;
margin-top:20px;
margin-bottom:20px;
background:#ffffff url('images/right_back_green.jpg') no-repeat;
border-top:2px solid #339966;
border-left:2px solid #339966;
border-right:2px solid #339966;
border-bottom:2px solid #339966;
}

.asidesmall ul
{ 
float:left;
list-style-type:none;
margin:10px 0;
}

.asidesmall li
{
clear:both;
width:148px;
display:block;
}

.asidesmall a
{
display:block;	
font:14px/1.8 Arial, sans-serif; 
color:#000099; 
padding-left:5px;
border-bottom:2px solid #339966;
}

.asidesmall a:hover
{ 
display:block;	
color:#000099; 
}

.aside2
{
float:left;
width:192px;
min-height:500px;
text-align:left;
padding:10px;
padding-top:20px;
margin-top:20px;
margin-bottom:20px;
background:#ffffff url('images/right_back_green.jpg') no-repeat;
border-top:2px solid #339966;
border-left:2px solid #339966;
border-right:2px solid #339966;
border-bottom:2px solid #339966;
}

.aside2 ul
{ 
float:left;
list-style-type:none;
margin:10px 0;
}

.aside2 li
{
clear:both;
width:190px;
display:block;
}

.aside2 a
{
display:block;	
font:14px/1.8 Arial, sans-serif; 
color:#000099; 
padding-left:5px;
border-bottom:2px solid #339966;
}

.aside2 a:hover
{ 
display:block;	
color:#000099; 
}

#main_content
{
float:left;
width:75%;
min-height:400px;
padding:10px 0;
margin-bottom:20px;
}

#main_content ul {list-style: square; margin:10px 5%;}

#wide_content
{
width:86%;
margin-left:5%;
margin-right:5%;
min-height:400px;
padding:10px 0;
margin-bottom:20px;
}

.col_fullwidth
{
float:left;
width:75%;	
}

.col1
{
float:left;
width:47%;	
margin:5px 0;
padding:5px;
}

.col2
{
float:right;
width:47%;	
margin:5px 0;
padding:5px;
} 

.col3
{
float:left;
width:57%;	
margin:5px 0;
}

.col4
{
float:right;
width:40%;	
margin:5px 0;
}

.footer
{
position:relative;
clear:both;
width:100%;
height:100px;
font-size:12px;
text-align:center;
padding:2px 0;
border-top:2px solid #0183c1;
background:#ffffff url('images/HPC-logosm.jpg') 10px 5px no-repeat;
}

.footer ul
{
float:left;
width:60%;
list-style-type:none;	
text-align:center;
padding-top:3px;
padding:0;
margin:0;
margin-top:2px;
padding-left:20%;
padding-left:20%;
}

.footer li
{
display:inline;
}

.footer a           
{	
font:12px/1.5 Arial, Helvetica, sans-serif;
text-align:center;
margin:0 2px 0 2px;
}

.footer a:hover    
{ 
font-size:12px;
text-align:center;
margin:0 2px 0 2px;
}

.right_foot
{
font:12px/1.5 'Open Sans', Arial, Helvetica, sans-serif;
float:right;
text-align:left;
width:15%;
padding-top:5px;
line-height:1.2;
}

.media    
{ 
float:left;
width:80%; 
margin-left:10%; 
margin-right:10%;
height:50px;
text-align:center;
}

ul.top
{
padding:0;
margin:0;
padding-left:20%;
padding-bottom:20px;
}

#box-link2
{
position:absolute;
top:10px;
left:2px;
width:130px;
height:75px;
background-color:transparent;
}

.spacer100
{
display:inline-block;
width:100px;
background-color:#ffffff;
}

.embossed
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, .50) 0 3px 5px;
-moz-box-shadow: rgba(0, 0, 0, .50) 0 3px 5px;
-o-box-shadow: rgba(0, 0, 0, .50) 0 3px 5px;
box-shadow: rgba(0, 0, 0, .50) 0 3px 5px;
}

#mycrawler
{
margin:0 auto;
width:700px;
text-align:center;
}

#cookie
{
clear:both;
margin:0 auto;
margin-bottom:2px;
margin-top:2px;
max-width:99.8%;
text-align:center;
padding:0;
border:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, .40) 1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, .40) 1px 1px 1px;
-o-box-shadow: rgba(0, 0, 0, .40) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, .40) 1px 1px 1px;
}

hr
{
clear:both;
width:100%;	
}

td
{
padding:2px 5px;	
}

.hide 
{
display:none;
}

table.rhi
{
margin:15px 0;
margin-left:auto;
margin-right:auto;
}

thead.head td
{
font-weight:bold;
}

table.rhi td
{
border:1px solid #999;	
}

table.rhi td.width1
{
width:280px;
}

table.rhi td.width2
{
width:140px;
text-align: center;
}

power
{
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
bottom: 4px;
vertical-align: baseline !important;
vertical-align: bottom;
}

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

#nav-mobile
{
float:left;
width:100%;
text-align:left;
margin-bottom:20px;
background-color:#ffffff;
}

#nav-mobile h2
{
width:100%;
text-align:center;
font-size:2em;
padding:0;
background-color:#0183c1;
}

#nav-mobile ul
{ 
width:100%;
float:left;
display:block;
list-style-type:none;
padding:0;
margin:0;
}

#nav-mobile a
{
float:left;
display:block;	
width:95%;
padding-left:5%;
color:#ffffff;
background:#0183c1 url('images/arrow-grn.jpg') 97% 50% no-repeat; 
font-size:18px;
line-height:2;
text-transform:uppercase;
border-top:1px solid #ffffff;
border-bottom:1px solid #0183c1;
}

#nav-mobile a:hover
{
float:left;
display:block;	
width:95%;
padding-left:5%;
color:#000000;
background:#ffffff url('images/arrow-blk.jpg') 97% 50% no-repeat; 
text-decoration:none;
text-transform:uppercase;
font-size:18px;
line-height:2;
border-top:1px solid #0183c1;
border-bottom:1px solid #0183c1;
}

#nav-mobile ul li ul
{
padding:0;
margin:0;
}


#nav-mobile ul li ul li a
{
width:88%;
padding-left:12%;
}

#nav-mobile ul li ul li a:hover
{
padding:0;
margin:0;
width:88%;
padding-left:12%;
}

#mobile-nav 
{
clear:both;
width:100%;
height:30px;
margin-bottom:15px;
padding:0;
text-align:center;	
}

#mobile-nav a
{
float:left;
display:block;	
width:100%;
color:#ffffff;
background:#0183c1 url('images/navicon-bd.jpg') 5% 50% no-repeat; 
font-size:18px;
line-height:2;
border-top:1px solid #ffffff;
border-bottom:1px solid #0183c1;
}

#mobile-nav a:hover
{
float:left;
display:block;	
width:100%;
color:#000000;
background:#ffffff url('images/navicon-fd.jpg') 5% 50% no-repeat; 
text-decoration:none;
font-size:18px;
line-height:2;
border-top:1px solid #0183c1;
border-bottom:1px solid #0183c1;
}

#mobile-main 
{
clear:both;
width:100%;
margin-bottom:0;
padding:0;
margin:0;
background-color:#0183c1;
text-align:left;	
text-transform:uppercase;
}

#mobile-main ul
{
float:left;
width:100%;
list-style-type:none;
padding:0;
margin:0;
}

#mobile-main ul li
{
display:block;
list-style-type:none;
padding:0;
margin:0;
}


#mobile-main a
{
float:left;
display:block;
width:90%;
padding-left:10%;
color:#ffffff;
background:#0183c1 url('images/arrow-grn.jpg') 97% 50% no-repeat; 
font-size:18px;
line-height:2;
border-top:1px solid #ffffff;
border-bottom:1px solid #0183c1;
}

#mobile-main a:hover
{
float:left;
display:block;	
width:90%;
padding-left:10%;
color:#000000;
background:#ffffff url('images/arrow-blk.jpg') 97% 50% no-repeat; 
text-decoration:none;
font-size:18px;
line-height:2;
border-top:1px solid #0183c1;
border-bottom:1px solid #0183c1;
}

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

@media screen and (min-width: 767px)
{
#mobile-nav {display:none;}
#mobile-main {display:none;}
}

@media screen and (min-width: 240px) and (max-width: 767px) , (min-device-width: 240px) and (max-device-width: 767px) 
{
img {max-width:100%; height:auto !important;}
body {font-size:18px; background-image:none; background-color:#ffffff; background-image:none;} 
#wrapper {margin:0; padding:0; width:100%; padding-bottom:10px;
-webkit-border-radius:0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow:none; -moz-box-shadow:none; -o-box-shadow:none; box-shadow:none;}
.header {float:left; padding:0; margin:0; width:100%; height:100px; margin-bottom:10px; background:#ffffff url('images/HPC-logosm.jpg') 50% 15% no-repeat;}
.header h1 {padding:0; margin:0; width:100%; padding-top:80px; font-size:22px; background:transparent; text-align:center;}
.header h2 {padding:0; margin:0; width:100%; padding-top:80px; font-size:22px; background:transparent; text-align:center;}
.slideshow_head {width:100%;}
.slideshow_head img {display:none; visibility:hidden;}
#box-link {display:none;}
.nav {display:none;}
.aside {display:none;}
.aside2 {display:none;}
.sub-menu {display:none;}
#main_content {padding:0; margin:0; width:96%; margin-left:2%; margin-right:2%; margin-bottom:20px;}
#main_content ul {padding-left:6%;}
h1 {text-align:center; padding:5px 0; margin:0; margin-top:10px; font-size:22px; clear:both;}
h2 {text-align:center; padding:5px 0; margin:0; margin-top:10px; font-size:22px; clear:both;}
h3 {text-align:center; padding:5px 0; margin:0; font-size:20px; clear:both;}
.banner h5 {text-align:center; width:100%; padding:80px 0 0 0; margin:0; color:#000000; font-size:1.4em; clear:both;}
.col-full {width:98%; padding-left:1%; padding-right:1%; }
.col1 {width:98%; padding-left:1%; padding-right:1%; }
.col2 {width:98%; padding-left:1%; padding-right:1%; }
.footer { clear:both; float:left; display:block; padding:0; margin:0; width:100%; height:200px; background-image:none; border:none;}
.right_foot {float:left; display:block; margin:0; width:96%; margin-left:1.5%; margin-right:2%; height:150px; padding:10px 0; text-align:center; font-size:20px; border:3px solid #cccccc;}
.right_foot a {font-size:18px; }
.right_foot a:hover {font-size:18px; }
.footer ul {display:none;}
.centerfoot ul {width:100%; float:left; display:block; list-style-type:none; height:200px; }
.media {width:80%; margin-left:10%; margin-right:10%; text-align:center;}
.fllt {float:none; clear:both; display:block; padding:0; text-align:center; max-width:100%; margin:0 auto;}
.flrt {float:none; clear:both; display:block; padding:0; text-align:center; max-width:100%; margin:0 auto;}
.flrt-home {float:none; clear:both; display:block; padding:0; text-align:center; max-width:100%; width:60%; margin-left:20%; margin-right:20%; margin:0 auto;}
#mobile-nav {clear:both; display:block; width:100%;}
#mobile-main {display:block;}
}


@media screen and (min-width: 768px) and (max-width: 940px) , (min-device-width: 768px)  and (orientation: portrait)
{
.nav ul li a {font-size:13px; padding:0 5px; line-height:3.4;}
}