@charset "utf-8";

/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	background-color: #326eb6;
	color: #6f6f6f;
	font: 12px/14px Arial, Geneva, sans-serif;
	background-image: url(../images/bg-sr.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

ol, ul { list-style: none; }

a img, :link img, :visited img { border: 0; }

:link, :visited { text-decoration:none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3, h3, h4, h5, h6 {
	padding:10px 0 4px 0;
	margin:0;
	font-weight: bold;
	font-size: 100%;
	clear: both;
}

p {
	padding:6px 0 10px 0;
	margin:0;
	font-weight: normal;
	font-size: 100%;
}

ul.std {
	margin: 5px 0px 8px 15px;
	list-style-position: outside;
	list-style-type: disc;
}

ul.std li { 
	padding-left: 6px; 
	padding-bottom: 6px;	
}

table.std { 
	border: 1px solid #000; 
	margin: 5px 0px 8px 0px;	
}

table.std tr, table.std tr td {
	border: 1px solid #000; 
	padding: 5px;	
}

table.std .header { background: #CCC; }

/* Clearfix */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
	* html .clearfix { height:1%; }

*+html .clearfix { height:1%; }

.clearfix { display:block; }

/* Default styling classes */
.clear { clear: both; }
a {
	text-decoration: none;
	color: #769a3e;
}

a:hover { color: #326eb6; }

/* H1 Image Replacement */
.head-rep span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

.head-rep { padding: 0; }

h1#logo {
	width: 268px;
	height: 74px; 
	background: url(../images/logo.jpg);	
	float: left;
}

/* <h1 id="logo" class="head-rep" title="About us"><span>About us</span></h1> /*

/* Menu bar */
.menubar ul {
	padding:0;
	margin: 0;
	list-style-type:none;
}

.menubar ul li { 
	display:inline; 
	padding:0;
	margin: 0;
}

.menubar ul li a {
	float:left;
	display:block;
	padding:0;
	margin: 0;
}

.menubar ul li span {
	visibility: hidden;
	padding:0;
	margin: 0;
}

/* Menu Rollover */

#menu_11:hover img, #menu_13:hover img, #menu_15:hover img, #menu_17:hover img { visibility:hidden; }

#menu_11 {
	max-width: 158px;
	max-height: 203px;
	background: url(../images/menu-ro_11.jpg) no-repeat 0 0;
	margin-left: 35px;
}

#menu_13 {
	max-width: 158px;
	max-height: 203px;
	background: url(../images/menu-ro_13.jpg) no-repeat 0 0;
	margin-left: 71px;
}

#menu_15 {
	max-width: 158px;
	max-height: 203px;
	background: url(../images/menu-ro_15.jpg) no-repeat 0 0;
	margin-left: 71px;
}

#menu_17 {
	max-width: 157px;
	max-height: 203px;
	background: url(../images/menu-ro_17.jpg) no-repeat 0 0;
	margin-left: 71px;
}

/* HTML Code
<div class="menubar">
  	<ul>
      <li><a id="menu_01" href="<?php WEBROOT(); ?>index.php" title="Home"><img src="images/menu/menu_01.jpg" alt="Home" width="35" height="49" /></a></li>
	</ul>
</div>
*/

/* PNG Menu
#menu-01:hover { background-position: 0px -37px; }

#menu-01 {
	width: 129px;
	height: 37px;
	background: url(../images/menu/menu_01.png) no-repeat 0 0;
}

<div class="menubar">
	<ul>
		<li><a id="menu-01" href="<?php WEBROOT(); ?>index.php" title="Home"><span>Home</span></a></li>
	</ul>
</div>
*/

/* Slider */
#slider {
      display: none;
	  width: 100%;
	  max-height: 354px;
	  margin: 0 auto;
    }
.slidesjs-pagination .active {
      color:red;
    }
	
/*
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js" type="text/javascript"></script>
<script>
    $(function() {
      $('#slider').slidesjs({
        width: 961,
        height: 353,
		pagination: {
      		active: false
		},
		navigation: {
      		active: false
		},
		 play: {
		  active: false,
		  effect: "slide",
		  interval: 5000,
		  auto: true,
		  swap: true,
		  pauseOnHover: true,
		  restartDelay: 2500
		}
      });
    });
  </script>
*/

/* Colorbox */
/* 
<link rel="stylesheet" href="css/colorbox.css" type="text/css" media="all" title="All" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("a[rel='colorbox']").colorbox();
	});
</script>
*/

/* Main Container (Center Content) */

#container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	background: #FFF;
}

header {
	max-height: 100px;
	background: #12151a;
	color: #FFF;
	padding: 12px 22px;
}

nav {
	font: 14px/16px 'TeXGyreHerosRegular', Arial, sans-serif;
	text-transform: uppercase;
	float: right;
	clear: right;
	margin-top: 10px;
}

nav ul { list-style-type:none; }
nav ul li { 
	display: inline; 
	margin-left: 15px;
}

nav a {
	text-decoration: none;
	color: #FFF;
}

nav a:hover { color: #769a3e; }

#contact-us { 
	font: 22px/24px 'TeXGyreHerosRegular', Arial, sans-serif;
	float: right;
}

#contact-us span { font: 14px/16px 'TeXGyreHerosRegular', Arial, sans-serif; }

main article {
	float: left;
	width: 25%;
	padding: 2.5% 4%;	
}

main article h2 {
	color: #326eb6;
	font: 18px/20px 'TeXGyreHerosRegular', Arial, sans-serif;
}


#grey { background: #ececec; }

section.menubar {
	width: auto;
	height: 204px;
	background: #769a3e;
	padding: 22px;	
}

footer {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FFF;	
	background: #12151a;
	height: 93px;
	line-height: 93px;
	color: #FFF;
	font-size: 10px;
	padding: 0 4%;
}

footer p { 
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

footer a:link, footer a:visited {
	color: #FFF;
	text-decoration: underline;
}

footer a:hover { 
	color: #FFF; 
	text-decoration: none;
}

section#slider {
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #769a3e;
}

main#index {
	background-image: url(../images/bg-index.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
section img {
	max-width: 100%;
	height: auto;
}
main#internal article:first-child {
	width: 58%;
}
/* Breakpoints */

/* Mobile */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 
/* Styles */
#container { max-width: 95%; }
nav { 
	clear: both; 
	font-size: 180%;
}
main article {
	width: 90%;
	clear: both;
}
main#internal article:first-child {
	width: 90%;
	clear: both;
}
section.menubar { display: none; }
footer { font-size: 130%; }
main#index { background: #FFF; }
}


/* Tablets */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 
/* Styles */
#container { max-width: 95%; }
main article {
	width: 90%;
	clear: both;
}
main#internal article:first-child {
	width: 90%;
	clear: both;
}
section.menubar { display: none; }
footer { font-size: 130%; }
main#index { background: #FFF; }
}