@import url('libs/base.css');
@import url('libs/type.css'); /* Set Overall Font Styles, No Color */
@import url('libs/color.css'); /* Overall Colors */
@import url('libs/forms.css');
@import url('libs/superfish.css'); /* Superfish Essential Styles Remove if not being used */
@import url('libs/nivo-slider.css'); 
/* @import url('libs/debug.css'); Uncomment to make errors visible in a browser */
/* =============================================================================
   Primary styles
   Author: 
   ========================================================================== */

html {overflow-y: scroll;background: #8d8d8d url(../img/bg-html.png) 0 0 repeat-x;}
body {margin: 0 auto; padding: 24px 0; text-align: center; width: 960px;   color: rgb(40,40,40); background-color: transparent; }
#container {text-align: left; margin: 0 25px;}
#container, footer[role="contentinfo"] div {width: 910px; margin: 0 auto;}

#content h1 {font-size: 2.5em; color:#09254D;}

/* 8.BANNER */
header[role="banner"] {position: relative; height: 130px;}
header[role="banner"] .vcard {width: auto;text-align: right; padding: 10px 10px 0 0; float:right;color:#000; position:relative; top:50px;}
header[role="banner"] .vcard a {color:#000}
header[role="banner"] .vcard * {display: inline;}
header[role="banner"] .street-address, header[role="banner"] .postal-code, header[role="banner"] .email {padding-right: 6px; border-right: 1px solid #fff;}
header[role="banner"] .locality, header[role="banner"] .tel {padding-left: 5px;}


/* 8-1.Branding */
#branding {position: absolute; top: 0; left: 25px; width: 350px; height: 80px; margin-top: 0;}
#branding a {background: transparent url(../img/logo.png) 0 0 no-repeat; width: 350px; height: 80px;}

/* 9.NAVIGATION */
nav ul {margin: 0; padding: 0;}
nav ul li {float: left; list-style: none;}

nav[role="navigation"] {width: 100%;background: url(../img/bg-nav.png) 0 0 repeat-x #353939; margin-bottom: 10px; font-size: 1em; position: absolute; left: 0; bottom: 0;-moz-box-shadow:    0px 0px 2px 1px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); height:33px; z-index:100;}
nav[role="navigation"] a {display: inline-block; text-decoration: none; padding: 10px 8px; }
nav[role="navigation"] li:first-child a {border-width: 0;}


/* 10-1.FEATURE */
#feature {background: url(../img/Front2.jpg) 0 0 no-repeat; padding: 50px 50px; margin-bottom: 20px; font-size: 1.1em;-moz-box-shadow:    0px 0px 2px 1px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); box-shadow:         0px 0px 2px 1px rgba(0, 0, 0, 0.5); height:250px;}
#feature h3 {font-weight: normal; font-size: 2.5em; color: #0b2550; text-align:center; width:65%; float:right;}
#feature p {float:right; width:100%; text-align:center; font-size:14px;line-height:18px; font-weight:bold}

/* 10-2.Slideshow or Featured Image */
#slider {margin: 0 15px 0 50px; width: 311px; height: 264px; float: right; overflow: hidden;}

/* Content */
#content {}
#content h1 {color:#09254D;;}
.contact #content { width: 100%;}
#content ul {list-style:disc}
#content img {-moz-box-shadow:    0px 0px 2px 1px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); margin:10px;}
/* 11-1.Three Columns */
#content .column {background:url(../img/bg-boxes.jpg) repeat-x #1C3A6C; width: 22%; height: 280px; overflow: hidden; float: left; margin: 0 5px 20px; padding: 0 7px; position: relative;-moz-box-shadow:    0px 0px 2px 1px rgba(0, 0, 0, 0.5);	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5); box-shadow:         0px 0px 2px 1px rgba(0, 0, 0, 0.5); color:#fff; }
.ie7 #content .col {width: 28%;}
#content .column p {font-size:11px;line-height:16px;}
#content .column ul {list-style:inside disc; line-height:20px;}
#content .column h5 {font-size:1.4em; line-height:0px; maring:0px;font-weight:normal;}
#content .column a {color:#fff;}
#content .column h4 {font-size: 1.5em;padding: 10px 5px 0; margin-bottom:  0.5em; border-bottom: 1px solid #fff;  color: #fff; font-weight:normal;} 
#content .column span {text-align: right; position: absolute; right: 10px; bottom: 10px;}
#content .column span a { text-decoration: none; font-weight: bold; background: transparent url(../img/icn-rt-arrow.png) right 2px no-repeat; padding-right: 13px; color:#fff; }
#content .col2 {float:left; width:50%;}


/* 12.COMPLEMENTARY */
div[role="complementary"] {width: 19.47%; float: right;}

/* 12-1.vCard */
.vcard {font-size: 1.1em; margin-bottom: 30px;}
.org {font-size: 1.3em;}

/* 12-2.Social */
.social li a {margin: 8px 0;}
#facebook {display: block; width: 148px; height: 44px; background: transparent url(../img/icn-facebook.png) 0 0 no-repeat;}
#twitter {display: block; width: 124px; height: 42px; background: transparent url(../img/icn-twitter.png) 0 0 no-repeat;}

/* CONTENTINFO */
footer[role="contentinfo"] { border-top:1px dashed #000; }
footer[role="contentinfo"] * { margin: 0; }
footer[role="contentinfo"] div {text-align: left; position: relative; min-height: 45px; height: 90%;  }
footer[role="contentinfo"] a { color: rgb(40,40,40); text-decoration: none; text-align: center;}
footer[role="contentinfo"] a:hover {color: #2a94c1;}
.spider {background: url(../img/spiders.png) center top; background-repeat: no-repeat; height: 10px; display:block; text-transform:uppercase; font-size:10px; padding: 40px 0 0 0; text-decoration: none; width: 100px; margin-right: 10px; position: absolute; right: 0; top: 15px; }
.spider:hover {background-position: center -50px; }
a[href="#container"] {position: absolute; left: 0; top: 45px; text-align: left; }
#copyright { width: 350px; text-align: left; position: absolute; top: 20px; left: 0;}


#googlemap {float: left; width: 500px; height: 500px; margin: 0; border:2px double #ddd; color:#000;}
#facebook {background: transparent url(../img/icn-facebook.png) no-repeat;}
#rss {background: transparent url(../img/icn-rss.png) no-repeat;}
#twitter {background: transparent url(../img/icn-twitter.png) no-repeat;}

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */


/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* TWG Specific */
.sm10 {font-size:10px;}
.hide {display:none;}
.shhhh {display:none;}
.cursor {cursor:pointer;}
.pad5 {padding:5px;}
.left {float:left;}
.tleft {text-align:left;}
.right {float:right;}
.tright {text-align:right;}
.center {text-align:center;}
.centeralign {text-align:center; margin:0 auto;}
.clear {clear:both;}
.clright {clear:right;}
.clleft {clear:left;}


/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}


/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}