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

@font-face { font-family: bratfont; 
src: url(../font/JustTheWayYouAre.eot); }

@font-face { font-family: bratfont; 
src: url(../font/JustTheWayYouAre.ttf); }

@media screen and (min-width: 960px)
{

body { margin: 0px; 
background-image: url(../images/citybg2.png); 
background-repeat: repeat-x; 
background-position: top; 
background-color: #00004b; 
font-family: Arial, Helvetica, sans-serif; }

.maincontainer { width: 100%; 
margin: 0 auto; }

.navarea { width: 100%; 
height: 150px; 
position: relative; 
z-index: 50; }

.title { width: 200px; 
height: 150px; 
background-image: url(../images/title1.png); 
background-position: top; 
background-repeat: no-repeat; 
position: absolute; 
top: 0px; 
left: 0px; }

.nav { width: 80%; 
height: 50px; 
background-image: url(../images/navbg1.png); 
background-repeat: repeat-x; 
padding-left: 20%; }

.nav ul { list-style: none; 
display: inline; }

.nav ul li { width: 18%; 
height: 50px; 
text-align: center; 
float: left; }

.nav ul li:hover { background-image: url(../images/navbg2.png); 
background-repeat: repeat-x; }

.nav ul li a { text-decoration: none; 
font-family: bratfont; 
font-size: 1.1em; 
color: #fff; 
font-weight: bold; 
text-decoration: none; 
line-height: 50px; }

.nav ul li:hover a { color: #ff0; }

.smedia { width: 202px; 
height: 42px; 
background-color: #222; 
border-bottom-right-radius: 15px; 
padding-top: 8px; 
padding-left: 218px; }

.smedia ul { list-style: none; 
display: inline; }

.smedia ul li { width: 35px; 
height: 35px; 
float: left; 
margin-right: 5px; }

.smedia ul li img { border-style: none; 
width: 35px; }

.content { width: 100%; }

.slideshow { width: 100%; 
height: 550px; }

.homeinfo { width: 100%; }

.homeinfo h2 { font-family: bratfont; 
font-size: 1.5em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.homeinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 15px; 
margin-right: 15px; 
line-height: 1.4em; }

.leftpanel { width: 33%; 
float: left; }

.middlepanel { width: 33%; 
float: left; }

.rightpanel { width: 34%; 
float: left; }

.contheader { font-family: bratfont; 
font-size: 1.9em; 
color: #fff; 
font-weight: normal; 
text-align: center;
width: 100%; }

.contdesc { width: 100%; }

.contdesc p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 20%; 
margin-right: 20%; 
line-height: 1.4em; }

.listformat { width: 800px; 
margin: 0 auto; }

#placeHolder { color: #fff; 
font-size: 16px; }

.listholder { width: 850px; 
height: 600px; 
margin: 0 auto; }

ul#container { list-style: none; 
display: inline; }

ul#container li { width: 190px; 
height: 200px; 
float: left; 
margin-top: 5px; 
padding-top: 25px; 
padding-left: 5px; 
padding-right: 5px; 
text-align: center; }

ul#container li:hover { background-color: #f00; 
border-radius: 15px; 
color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li a { font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
color: #fff; 
text-decoration: none; 
font-weight: bold; }

ul#container li:hover a { color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li span { margin-left: 5px; 
margin-right: 5px; 
margin-top: 5px; 
line-height: 18px; }

ul#container li img { margin-left: 20px; 
margin-right: 20px; 
border-style: none; }

.aboutlist { width: 30%; 
height: 550px; 
float: left; 
padding-left: 5%; }

.aboutlist h3 { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
font-weight: bold; }

.aboutlist ul { list-style: none; 
display: inline; }

.aboutlist ul li { font-family: bratfont; 
font-size: 1.2em; 
color: #fff; 
text-decoration: none; 
line-height: 28px; 
cursor: pointer; }

.aboutlist ul li:hover { color: #ff0; 
background-color: #f00; 
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out; }

.aboutinfo { width: 65%; 
height: 550px; 
float: left; }

.aboutinfo h2 { font-family: bratfont; 
font-size: 1.3em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.aboutinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 20px; 
margin-right: 20px; 
line-height: 1.4em; }

.imageholder { margin: 0 auto; 
width: 550px; }

.aboutinfo img { margin-top: 20px; }

.footer { width: 100%; 
height: 50px; 
float: left; }

.footer p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
color: #fff; 
text-align: center; 
line-height: 1.2em; }

}

@media screen and (min-width: 750px) and (max-width: 959px)
{

body { margin: 0px; 
background-image: url(../images/citybg2.png); 
background-repeat: repeat-x; 
background-position: top; 
background-color: #00004b; 
font-family: Arial, Helvetica, sans-serif; }

.maincontainer { width: 100%; 
margin: 0 auto; }

.navarea { width: 100%; 
height: 150px;
position: relative; 
z-index: 50; }

.title { width: 200px; 
height: 150px; 
background-image: url(../images/title1.png); 
background-position: top; 
background-repeat: no-repeat; 
position: absolute; 
top: 0px; 
left: 0px; }

.nav { width: 75%; 
height: 50px; 
background-image: url(../images/navbg1.png); 
background-repeat: repeat-x; 
padding-left: 25%; }

.nav ul { list-style: none; 
display: inline; }

.nav ul li { width: 20%; 
height: 50px; 
text-align: center; 
float: left; }

.nav ul li:hover { background-image: url(../images/navbg2.png); 
background-repeat: repeat-x; }

.nav ul li a { text-decoration: none; 
font-family: bratfont; 
font-size: 1.1em; 
color: #fff; 
font-weight: bold; 
text-decoration: none; 
line-height: 50px; }

.nav ul li:hover a { color: #ff0; }

.smedia { width: 182px; 
height: 42px; 
background-color: #222; 
border-bottom-right-radius: 15px; 
padding-top: 8px; 
padding-left: 218px; }

.smedia ul { list-style: none; 
display: inline; }

.smedia ul li { width: 35px; 
height: 35px; 
float: left; 
margin-right: 5px; }

.smedia ul li img { border-style: none; 
width: 35px; }

.content { width: 100%; }

.slideshow { width: 100%; 
height: 550px; }

.homeinfo { width: 100%; }

.homeinfo h2 { font-family: bratfont; 
font-size: 1.5em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.homeinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 15px; 
margin-right: 15px; 
line-height: 1.4em; }

.leftpanel { width: 33%;  
float: left; }

.middlepanel { width: 33%; 
float: left; }

.rightpanel { width: 34%;  
float: left; }

.contheader { font-family: bratfont; 
font-size: 1.9em; 
color: #fff; 
font-weight: normal; 
text-align: center;
width: 100%; }

.contdesc { width: 100%; }

.contdesc p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 20%; 
margin-right: 20%; 
line-height: 1.4em }

.listformat { width: 650px; 
margin: 0 auto; }

#placeHolder { color: #fff; 
font-size: 16px; }

.listholder { width: 650px; 
height: 800px; 
margin: 0 auto; }

ul#container { list-style: none; 
display: inline; }

ul#container li { width: 190px; 
height: 200px; 
float: left; 
margin-top: 5px; 
padding-top: 25px; 
padding-left: 5px; 
padding-right: 5px; 
text-align: center; }

ul#container li:hover { background-color: #f00; 
border-radius: 15px; 
color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li a { font-family: Arial, Helvetica, sans-serif; 
font-size: 14px; 
color: #fff; 
text-decoration: none; 
font-weight: bold; }

ul#container li:hover a { color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li span { margin-left: 5px; 
margin-right: 5px; 
margin-top: 5px; 
line-height: 18px; }

ul#container li img { margin-left: 20px; 
margin-right: 20px; 
border-style: none; }

.aboutlist { width: 30%; 
height: 550px; 
float: left; 
padding-left: 5%; }

.aboutlist h3 { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
font-weight: bold; }

.aboutlist ul { list-style: none; 
display: inline; }

.aboutlist ul li { font-family: bratfont; 
font-size: 1.2em; 
color: #fff; 
text-decoration: none; 
line-height: 28px; 
cursor: pointer; }

.aboutlist ul li:hover { color: #ff0; 
background-color: #f00; 
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out; }

.aboutinfo { width: 65%; 
height: 550px; 
float: left; }

.aboutinfo h2 { font-family: bratfont; 
font-size: 1.3em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.aboutinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 20px; 
margin-right: 20px; 
line-height: 1.4em; }

.imageholder { margin: 0 auto; 
width: 90%; }

.aboutinfo img { margin-top: 20px; 
width: 100%; }

.footer { width: 100%; 
height: 50px; 
float: left; }

.footer p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
color: #fff; 
text-align: center; 
line-height: 1.2em; }

}

@media screen and (max-width: 749px)
{

body { margin: 0px; 
background-image: url(../images/citybg2.png); 
background-repeat: repeat-x; 
background-position: top; 
background-color: #00004b; 
font-family: Arial, Helvetica, sans-serif; }

.maincontainer { width: 100%; }

.navarea { width: 100%; 
height: 150px; 
position: relative; 
z-index: 50; }

.title { width: 100px; 
height: 75px; 
background-image: url(../images/title2.png); 
background-position: top left; 
background-repeat: no-repeat;
position: absolute; 
top: 50px; 
left: 0px; }

.nav { width: 99%; 
height: 50px; 
background-image: url(../images/navbg1.png); 
background-repeat: repeat-x; 
padding-left: 1%; }

.nav ul { list-style: none; 
display: inline; }

.nav ul li { width: 25%; 
height: 50px; 
text-align: center; 
float: left; }

.nav ul li:hover { background-image: url(../images/navbg2.png); 
background-repeat: repeat-x; }

.nav ul li a { text-decoration: none; 
font-family: bratfont; 
font-size: 0.8em; 
color: #fff;  
text-decoration: none; 
line-height: 50px; }

.nav ul li:hover a { color: #ff0; }

.smedia { width: 175px; 
height: 42px; 
background-color: #222; 
border-bottom-right-radius: 15px; 
padding-top: 8px; 
padding-left: 105px; }

.smedia ul { list-style: none; 
display: inline; }

.smedia ul li { width: 35px; 
height: 35px; 
float: left; 
margin-right: 5px; }

.smedia ul li img { border-style: none; 
width: 35px; }

.content { width: 100%; }

.slideshow { width: 100%; 
height: 325px; }

.homeinfo { width: 100%; }

.homeinfo h2 { font-family: bratfont; 
font-size: 1.2em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.homeinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 15px; 
margin-right: 15px; 
line-height: 1.4em; }

.leftpanel { width: 100%; }

.middlepanel { width: 100%; }

.rightpanel { width: 100%; }

.contheader { font-family: bratfont; 
font-size: 1.5em; 
color: #fff; 
font-weight: normal; 
text-align: center;
width: 100%; }

.contdesc { width: 90%; }

.contdesc p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 10%; 
margin-right: 10%; 
line-height: 1.4em; }

.listformat { width: 80%; 
margin: 0 auto; 
padding-left: 20%; }

#placeHolder { color: #fff; 
font-size: 14px; }

.listholder { width: 95%; 
height: 400px; 
padding-left: 5%;}

ul#container { list-style: none; 
display: inline; }

ul#container li { width: 85px; 
height: 100px; 
float: left; 
margin-top: 2px; 
padding-top: 10px; 
text-align: center; }

ul#container li:hover { background-color: #f00; 
border-radius: 15px; 
color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li a { font-family: Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #fff; 
text-decoration: none; 
font-weight: bold; }

ul#container li:hover a { color: #ff0; 
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out; }

ul#container li span { margin-top: 2px; }

ul#container li img { margin-left: 10px; 
margin-right: 10px; 
border-style: none; 
width: 50%; }

.aboutlist { width: 95%; 
height: 250px;  
padding-left: 5%; }

.aboutlist h3 { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
font-weight: bold; }

.aboutlist ul { list-style: none; 
display: inline; }

.aboutlist ul li { font-family: bratfont; 
font-size: 1.2em; 
color: #fff; 
text-decoration: none; 
line-height: 36px; 
cursor: pointer; }

.aboutlist ul li:hover { color: #ff0; 
background-color: #f00; 
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out; }

.aboutinfo { width: 100%; }

.aboutinfo h2 { font-family: bratfont; 
font-size: 1.3em; 
color: #fff; 
font-weight: normal; 
text-align: center; }

.aboutinfo p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.9em; 
color: #fff; 
margin-left: 20px; 
margin-right: 20px; 
line-height: 1.4em; }

.imageholder { margin: 0 auto; 
width: 90%; }

.aboutinfo img { margin-top: 20px; 
width: 100%; }

.footer { width: 100%; 
height: 50px; 
float: left; }

.footer p { font-family: Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
color: #fff; 
text-align: center; 
line-height: 1.2em; }

}