@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

body{
	margin:0;
	padding:0;
	background:#f2f2f2;
	/*
	background-image:url(img/bg.jpg);
	background-repeat:repeat-x;
	*/
	}

img, object, embed, video {
	max-width: 100%;
}

p{
	font: normal 13px "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#686868;
	}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	background:#FFF;	
	height:auto;
	width: 100%;
	margin:auto;
	text-align:left;
	padding:0px;
	position:relative;	
	-moz-box-shadow: 0px 0px 10px 1px #c1c1c1;
	-webkit-box-shadow: 0px 0px 10px 1px #c1c1c1;
	box-shadow: 0px 0px 10px 1px #c1c1c1;
}	

#div4px{
	float:left;
	width:100%;
	height:4px;
	background:#fd5300;
	}

#header{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	border-bottom:solid 1px #CCC;
	}		

#flag{
	float:left;
	width:100%;
	height:20px;
	text-align:right;	
	}		

#logo{
	float:left;
	width:100%;
	margin-left:0;
	height:70px;
	background-image:url(img/logo.png);
	background-repeat:no-repeat;
	}
	
#nav{
	float:left;
	width:100%;
	height:20px;
	margin-top:10px;
	margin-bottom:10px;
	}	
	
#nav ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	float:left;
	}

#nav li{
	float:left;
	}

#nav li a{
	display:block;
	text-align:right;
	font: normal 85% "Lucida Grande", Arial, Helvetica, sans-serif;
	margin-right:15px;
	text-decoration:none;
	color:#069;
	}	
	
#main_img{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	background:#f7f7f7;
	}	
	
#main_phrase{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	background:#f7f7f7;
	height:120px;
	border-bottom:solid 1px #e7e7e7;
	}	
	
#main_phrase h1{
	font: bold 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#303030;
	text-align:center;
	margin-top:20px;
	}
	
#main_phrase h2{
	font: normal 85% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	text-align:center;
	margin-bottom:50px;
	}	
	
#widgets{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	margin-top:15px;	
	}				

.widget{
	width:95%;
	height:auto;
	margin:0;
	float:left;
	margin-right:2%;
	}
	
.w_clear{
	margin-right:0;}	
	
.widget h2{
	font: bold 85% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	margin-bottom:20px;
	}
	
#p_box{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	padding-top:10px;
	padding-bottom:10px;	
	background:#454545;
	height:auto;
	color:#a2a2a2;
	margin-top:20px;	
	}	
	
#p_box p{
	color:#a2a2a2;
	}
	
#p_box h3{
	font: bold 120% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#bcbcbc;
	margin-top:0;
	}	
	
#p_box_l{
	float:left;
	width:100%;
	height:auto;
	color:#CCC;
	}	
	
#p_box_r{
	float:left;
	width:100%;
	height:auto;
	color:#CCC;
	}	
	
#footer{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	padding-top:10px;
	padding-bottom:10px;
	background:#383838;
	height:auto;
	color:#F1F1F1;
	font: bold 70% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#686868;	
	}	
	
#data_box{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l{
	float:left;
	width:75%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l h2{
	color:#393939;
	font: bold 110% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l p{
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	text-align:justify;
	}	
	
#data_box_r{
	float:right;
	width:20%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}

#title_box1{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	height:auto;
	color:#686868;
	}	

#title_box1 h1{
	color:#28567a;
	font: normal 125% "Lucida Grande", Arial, Helvetica, sans-serif;
	letter-spacing: 0.2em;
	margin-bottom:25px;
	}	
	
#map{
	float:left;
	width:95%;
	background:#f7f7f7;
	height:300px;
	border-bottom:solid 1px #e7e7e7;
	margin-bottom:20px;
	}
	
#data_l{
	float:left;
	width:95%;
	margin-left:20px;
	background:#f7f7f7;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	border:solid 1px #CCC;
	}
	
#data_r{
	float:left;
	width:95%;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	}	

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

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

.gridContainer {
	background:#FFF;	
	height:auto;
	width: 100%;
	margin:auto;
	text-align:left;
	padding:0px;
	position:relative;	
	-moz-box-shadow: 0px 0px 10px 1px #c1c1c1;
	-webkit-box-shadow: 0px 0px 10px 1px #c1c1c1;
	box-shadow: 0px 0px 10px 1px #c1c1c1;
}	

#div4px{
	float:left;
	width:100%;
	height:4px;
	background:#06F;
	}

#header{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	border-bottom:solid 1px #CCC;
	margin-bottom:20px;
	}		

#flag{
	float:left;
	width:100%;
	height:20px;
	text-align:right;	
	}		

#logo{
	float:left;
	width:30%;
	height:auto;
	background-image:url(img/logo.png);
	background-repeat:no-repeat;
	background-size:auto;
	margin-left:0;
	margin-bottom:0;
	}
	
#nav{
	float:right;
	width:auto;
	height:20px;
	margin-top:45px;	
	}	
	
#nav ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	float:right;
	}

#nav li{
	float:left;
	}

#nav li a{
	display:block;
	text-align:right;
	font: normal 87% "Lucida Grande", Arial, Helvetica, sans-serif;
	margin-left:15px;
	text-decoration:none;
	color:#069;
	}	
	
#main_img{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	background:#f7f7f7;	
	}				

#main_phrase{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	background:#f7f7f7;
	height:110px;
	border-bottom:solid 1px #e7e7e7;
	}
	
#main_phrase h1{
	font: bold 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#303030;
	text-align:center;
	margin-top:30px;
	}
	
#main_phrase h2{
	font: normal 85% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	text-align:center;
	}	
	
#widgets{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	margin-top:25px;	
	}		

.widget{
	width:32%;
	height:auto;
	margin:0;
	float:left;
	margin-right:2%;
	}
	
.w_clear{
	margin-right:0;}	
	
.widget h2{
	font: normal 115% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	margin-bottom:20px;
	}		
	
#p_box{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	padding-top:10px;
	padding-bottom:10px;	
	background:#454545;
	height:auto;
	color:#a2a2a2;
	margin-top:20px;	
	}
	
#p_box p{
	color:#a2a2a2;
	}
	
#p_box h3{
	font: bold 120% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#bcbcbc;
	margin-top:0;
	}	
	
#p_box_l{
	float:left;
	width:75%;
	height:auto;
	color:#CCC;
	}	
	
#p_box_r{
	float:right;
	width:20%;
	height:auto;
	color:#CCC;
	}
	
#footer{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	padding-top:10px;
	padding-bottom:10px;
	background:#383838;
	height:auto;
	color:#F1F1F1;
	font: bold 70% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#686868;	
	}
	
#data_box{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l{
	float:left;
	width:75%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}		

#data_box_l h2{
	color:#393939;
	font: bold 110% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l p{
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	text-align:justify;
	}	
	
#data_box_r{
	float:right;
	width:20%;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}	
	
#title_box1{
	float:left;
	width:95%;
	padding-left:2.5%;
	padding-right:2.5%;
	height:auto;
	color:#686868;
	}
	
#title_box1 h1{
	color:#28567a;
	font: normal 125% "Lucida Grande", Arial, Helvetica, sans-serif;
	letter-spacing: 0.2em;
	margin-bottom:25px;
	}		
	
#map{
	float:left;
	width:95%;
	margin-left:2.5%;
	background:#f7f7f7;
	height:300px;
	border-bottom:solid 1px #e7e7e7;
	margin-bottom:20px;
	}
	
#data_l{
	float:left;
	width:65%;
	margin-left:20px;
	background:#f7f7f7;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	border:solid 1px #CCC;
	}
	
#data_r{
	float:right;
	width:20%;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	}	

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	
.gridContainer {
	background:#FFF;	
	height:auto;
	width: 860px;
	margin:auto;
	text-align:left;
	padding:0px;
	position:relative;	
	margin-top:25px;
	margin-bottom:25px;
	-moz-box-shadow: 0px 0px 10px 1px #c1c1c1;
	-webkit-box-shadow: 0px 0px 10px 1px #c1c1c1;
	box-shadow: 0px 0px 10px 1px #c1c1c1;
}

#div4px{
	float:left;
	width:100%;
	height:4px;
	background:#26a1c9;
	}

#header{
	float:left;
	width:820px;
	margin-left:20px;
	height:110px;
	border-bottom:solid 1px #CCC;
	}		

#flag{
	float:left;
	width:100%;
	height:20px;
	text-align:right;	
	}		

#logo{
	float:left;
	width:auto;
	height:auto;
	background-image:url(img/logo.png);
	background-repeat:no-repeat;
	margin-left:0;
	margin-bottom:0;
	}			

#nav{
	float:right;
	width:500px;
	height:20px;
	margin-top:50px;	
	}
	
#nav ul{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	float:right;
	}

#nav li{
	float:left;
	}

#nav li a{
	display:block;
	text-align:right;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	margin-left:25px;
	text-decoration:none;
	color:#069;
	margin-right:0;
	}	
	
#main_img{
	float:left;
	width:820px;
	height:345px;
	margin-left:20px;
	margin-top:20px;	
	background:#CCC;	
	}				
	
#main_phrase{
	float:left;
	width:820px;
	margin-left:20px;
	background:#f7f7f7;
	height:150px;
	border-bottom:solid 1px #e7e7e7;
	}	
			
#main_phrase h1{
	font: normal 125% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#303030;
	text-align:center;
	margin-top:50px;
	}
	
#main_phrase h2{
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	text-align:center;
	margin-bottom:50px;
	}
	
#widgets{
	float:left;
	width:95%;
	margin-left:2.5%;
	margin-right:2.5%;
	height:auto;
	margin-top:25px;	
	}				

.widget{
	width:32%;
	height:auto;
	margin:0;
	float:left;
	margin-right:2%;
	}
	
.w_clear{
	margin-right:0;}	
	
.widget h2{
	font: normal 115% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#505050;
	margin-bottom:20px;
	}	

#p_box{
	float:left;
	width:820px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	background:#454545;
	height:auto;
	margin-top:20px;
	}

#p_box p{
	color:#a2a2a2;
	}
	
#p_box h3{
	font: bold 120% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#bcbcbc;
	margin-top:0;
	}	
	
#p_box_l{
	float:left;
	width:620px;
	height:auto;
	color:#CCC;
	}	

#p_box_r{
	float:right;
	width:190px;
	height:auto;
	color:#CCC;
	}	

#footer{
	float:left;
	width:820px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	background:#383838;
	height:auto;
	color:#686868;
	font: bold 70% "Lucida Grande", Arial, Helvetica, sans-serif;
	color:#bcbcbc;	
	}
	
#data_box{
	float:left;
	width:820px;
	padding-left:20px;
	padding-right:20px;	
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l{
	float:left;
	width:600px;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}		

#data_box_l h2{
	color:#393939;
	font: bold 110% "Lucida Grande", Arial, Helvetica, sans-serif;
	}
	
#data_box_l p{
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	text-align:justify;
	}	
	
#data_box_r{
	float:right;
	width:200px;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}	
	
#title_box1{
	float:left;
	width:820px;
	height:auto;
	color:#686868;
	font: normal 100% "Lucida Grande", Arial, Helvetica, sans-serif;
	}

#title_box1{
	float:left;
	width:820px;
	padding-left:20px;
	padding-right:20px;	
	height:auto;
	color:#686868;
	}

#title_box1 h1{
	color: #28567a;
	font: normal 125% "Lucida Grande", Arial, Helvetica, sans-serif;
	letter-spacing: 0.2em;
	margin-bottom:25px;	
	}

#map{
	float:left;
	width:820px;
	margin-left:20px;
	background:#f7f7f7;
	height:300px;
	border-bottom:solid 1px #e7e7e7;
	margin-bottom:20px;
	}
	
#data_l{
	float:left;
	width:600px;
	margin-left:20px;
	background:#f7f7f7;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	border:solid 1px #CCC;
	}
	
#data_r{
	float:right;
	width:180px;
	height:auto;
	margin-bottom:20px;
	padding:10px;
	}		
	
}