@import "../../../default/styles/reset.css";
@import "../../../default/styles/standard.css";
@import "navigation.css";

/* HTML Styles */
html, body {margin: 0; padding: 0; color: #666666; font: 100% Arial,Verdana,Tahoma,sans-serif;}

h1 {color:#0076BD; font-size: 18px; font-weight: bold; margin: 0 0 20px 0;}
h2 {font-size: 15px; font-weight: bold; margin: 0 0 10px 0;}
h3 {color:#0076BD; font-size: 12px; font-weight: bold; margin: 0 0 0 0; line-height: 20px;}

img {height: auto; width: 100%;}

p {color: #666666; font-size: 13px; margin: 0 0 15px 0; line-height: 20px;}
small {color: #666666; font-size: 11px; line-height: 20px;}
#content-wide ul {list-style: disc; margin: 0 0 35px 20px;}
#content-wide ul li {line-height: 20px; font-size: 13px;}

label {display: block; color: #666666; font-size: 13px;}
.csc-mailform-field {margin: 0 0 15px 0;}

.csc-default {margin: 0 0 20px 0;}
div.csc-textpic .csc-textpic-imagewrap img {border: 1px solid #ccc;}
div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {margin-bottom: 5px; padding: 0 2px 0 0;}

a {color: #0076BD; text-decoration: none;}

.wrapper {max-width: 1200px; margin: 0 auto; padding: 0 1%;}

header {margin: 0 0 20px 0; padding: 0 0;}

section#content {}

#langnav-mobile {display: none;}

#langnav {margin: 30px 0 0 0;}
#langnav a {color: #666666; font-size: 13px; font-weight: bold;}
#langnav a.active {color: #0076BD;}

#footnav {border-top: 2px solid #E0E0E0; clear: both; color: #777777; font-size: 12px; font-weight: normal; line-height: 20px; margin: 50px auto 20px auto; padding: 10px 0; text-align: center;}
#footnav p {color: #777; font-size: 12px; font-weight: normal; line-height: 20px; text-align: center;}
#footnav p a {color: #777; font-size: 12px; font-weight: normal; line-height: 20px; text-align: center; text-decoration: none;}
#footnav p a:hover {text-decoration: underline;}

#side-left {float: left; margin: 0 2% 0 0; padding: 0 0 0 1%; width: 23%;}
#content-wide {float: left; width: 74%;}

#content-left {float: left; width: 48%; margin: 0 4% 0 0;}
#content-right {float: left; width: 48%; margin: 0 0 0 0;}

#mainnav a {color: #666666; font-weight: bold; text-decoration: none; font-size: 14px;}
#mainnav li {margin: 0 0 5px 0;}
#mainnav a:hover {color: #0076BD; font-weight: bold; text-decoration: none; font-size: 14px;}
#mainnav .active a {color: #0076BD; font-weight: bold; text-decoration: none; font-size: 14px;}

#callus {background: #4d678f; color: #fff; font-size: 14px; width: 160px; padding: 5px; margin: 50px 0 0 0;}
#callus span {font-size: 20px;}
#callus span a {color: #fff;}

#social {font-size: 13px; margin: 50px 0 0 0; line-height: 20px;}
#social img {height: auto; width: auto;}

.ref-item {width: 31%; float: left; height: auto; margin: 0 3% 0 0; padding: 0;}
.ref-item-last {margin: 0 0 0 0;}
.ref-item .image {margin: 0 0 5px 0; display: block;}

#content-wide .ref-item .text h3 {font-size: 12px; margin: 0 0 0 0;}
#content-wide .ref-item-wide .text h3 {font-size: 12px; margin: 0 0 0 0;}
#content-wide .ref-item .text p {font-size: 12px; margin: 0 0 0 0; height: 120px;}
#content-wide .ref-item-wide .text p {font-size: 12px; margin: 0 0 0 0;}
#content-wide .ref-item img {border: 1px solid #EEEEEE; margin: 0;}

.csc-mailform-field input, textarea {width: 270px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; padding: 4px 8px; font-family: arial;}

header img.mobile-logo {display: none;}


@media all and (max-width: 799px) {
	#side-left {float: none; width: 100%; margin: 0; padding: 0;}
	#content-wide {float: none; width: 100%;}
	#social {display: none;}
	#callus {display: none;}
	
	#content-wide .ref-item .text h3 {font-size: 12px; line-height: 17px;}
	#content-wide .ref-item-wide .text h3 {font-size: 12px; line-height: 17px;}
	#content-wide .ref-item .text p {font-size: 12px; height: 120px; line-height: 17px;}
	#content-wide .ref-item-wide .text p {font-size: 12px; line-height: 17px;}

	#mainnav {margin: 0 0 30px 0;}	
	#langnav {display: none;}
	#langnav-mobile {display: block; text-align: left; margin: 0 0 10px 0;}	
	header img.mobile-logo {display: none;}
}

@media all and (max-width: 649px) {
	.wrapper {max-width: 1200px; margin: 0 auto; padding: 0 2%;}	

	header {margin: 0 0 10px 0; padding: 0 0;}	
	#side-left {float: none; width: 100%;}
	#content-wide {float: none; width: 100%;}
	#social {display: none;}
	#callus {display: block; width: 100%; padding: 0; margin: 0 0 20px 0; text-align: center; color: #fff;}
	
	#content-wide .ref-item .text h3 {font-size: 12px; line-height: 17px;}
	#content-wide .ref-item-wide .text h3 {font-size: 12px; line-height: 17px;}
	#content-wide .ref-item .text p {font-size: 12px; height: auto; line-height: 17px; margin: 0 0 20px 0;}
	#content-wide .ref-item-wide .text p {font-size: 12px; line-height: 17px;}
	
	.ref-item {width: 100%; float: none; margin: 0 0 0 0;}

	#mainnav {margin: 0 0 20px 0;}	
	#mainnav a {background: #dceffd; text-align: center; display: block; padding: 5px 0;}	
	#mainnav a:hover, #mainnav a:active {background: #c0d2e8;}	
	#mainnav .active a {background: #c0d2e8;}	
	#mainnav li {margin: 0 0 1px 0;}
	
	#langnav {display: none;}
	#langnav-mobile {display: block; text-align: center; margin: 0 0 10px 0;}

	#content-left {float: none; width: 100%; margin: 0 0 0 0;}
	#content-right {float: none; width: 100%; margin: 0 0 0 0;}
	header img.web-logo {display: none;}
	header img.mobile-logo {display: block; width: 300px; margin: 0 auto;}
}