@import url('../Pakaflex%20dwt.css');
body {
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #011C49;
	color: #000000;
}
/*===============indicates no border around any image ============*/
body img {
	border: 0px;
	text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
	margin:  auto auto 10px auto;
	padding: 10px; padding-top: 130px; 
	background-color: #ffffff;
	width: 95%;
	max-width: 1200px;
	min-width: 800px;
}
/*=================== styles for top banner ========================*/
#banner {
	background-position: center;
	width: 100%;
	height: 117px; position: absolute; top: -10px;
	color: navy;
	z-index: 1
}

#MainLogo {  float:left; padding-left:10%; 	z-index: 1
}

#MainCatch { float:right; padding-right:10%;
	z-index: 1
}


#TopMenu {position: absolute;
	left: 194px;
	top: -100px;
	width : 60%;">
	}
	

/*==============all site links==============*/
a:link {
	font-weight: bold;
	color: #004145;
	background: transparent;
	text-decoration: underline;
}
a:visited {
	font-weight: bold;
	color: #000000;
	background: transparent;
	padding: 0px;
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration : none;
	background: #184192;
	color: #ffffff;
}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background: #BFDFE2;
	color: #000000;
}
/*============== Styles for footer ===================*/
#footer {
	position: relative;
	border-top: 2px solid #2A5A19;
	clear: both;
	padding: 5px;
	background-color: rgb(255, 255, 255);
	text-align: center;
	border-top-color: #013891;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
	width: 50%;
	text-align: center;
	background-color: #A70622;
	height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
	color: red;
	background-color:transparent;
    margin-top: 2px; margin-bottom: 2px
}
h1 {
	font: normal normal bold x-large Arial, Helvetica, sans-serif ;
	margin-top: 10px;
	margin-bottom: 10px;
}
h2 {
	font-size: 1em;
}
h3 {
	font-size: .9em;
}
h4 {
	font: inherit;
	font-size: small;
}
/*================used to center anything==============*/
.center {
	text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
	float: right;
	padding: 7px;
}
.imglft {
	float: left;
	padding: 7px;
}
.smtxt {
	font-size: small;
}


p { font-family: Ariel; font-size:small; color:black; margin-top: 1px; margin-bottom: 1px
}
p.navyblue {font-family: Ariel; font-size:medium; color:navy;	text-align: center;
}

/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/
.carousel{
    overflow:hidden;
    width:100%;
}
.panes{
    list-style:none;
    position:relative;
    width:500%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
        
    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
    animation:carousel 30s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:20%; /* 100 / number of panes */
}
.carousel img{
    display:block;
    width:100%;
    max-width:100%;
}
.carousel h2{
    font-size:1em;
    padding:0.5em;
    position:absolute;
    right:10px;
    bottom:10px;
    left:10px;
    text-align:right;
    color:#fff;
    background-color:rgba(0,0,0,0.75);
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}