/*
Theme Name: HoCo
Theme URI: http://make-things.com
Description: HoCo Family Support Template
Version: 
Author: Ben Kutil
Author URI: http://www.make-things.com
*/

/*= font-face
/*-------------------------------------------------------- */

@font-face {
	font-family: 'MyriadWebPro';
	src: url('_assets/fonts/myriadwebpro-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadwebpro-webfont.woff') format('woff'), url('_assets/fonts/myriadwebpro-webfont.ttf') format('truetype'), url('_assets/fonts/myriadwebpro-webfont.svg#webfontFGgcs3mE') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadWebPro';
	src: url('_assets/fonts/myriadwebpro-italic-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadwebpro-italic-webfont.woff') format('woff'), url('_assets/fonts/myriadwebpro-italic-webfont.ttf') format('truetype'), url('_assets/fonts/myriadwebpro-italic-webfont.svg#webfontp0Pp6sVF') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'MyriadProSemibold';
	src: url('_assets/fonts/myriadpro-semibold-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadpro-semibold-webfont.woff') format('woff'), url('_assets/fonts/myriadpro-semibold-webfont.ttf') format('truetype'), url('_assets/fonts/myriadpro-semibold-webfont.svg#webfontjrRSG3ZB') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadProCondensed';
	src: url('_assets/fonts/myriadpro-cond-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadpro-cond-webfont.woff') format('woff'), url('_assets/fonts/myriadpro-cond-webfont.ttf') format('truetype'), url('_assets/fonts/myriadpro-cond-webfont.svg#webfontJyz0c3Vk') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadWebPro';
	src: url('_assets/fonts/myriadwebpro-bold-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadwebpro-bold-webfont.woff') format('woff'), url('_assets/fonts/myriadwebpro-bold-webfont.ttf') format('truetype'), url('_assets/fonts/myriadwebpro-bold-webfont.svg#webfontHPnnnHbC') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadProBoldCondensed';
	src: url('_assets/fonts/myriadpro-boldcond-webfont.eot');
	src: local('☺'), url('_assets/fonts/myriadpro-boldcond-webfont.woff') format('woff'), url('_assets/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'), url('_assets/fonts/myriadpro-boldcond-webfont.svg#webfonta2AYcY3B') format('svg');
	font-weight: bold;
	font-style: normal;
}

/*-------------------------------------------------------- */
/*= [end] font-face */

/*  = BASE RESET
/*  -------------------------------------------------------- */
/* 
base.css | v0.1 (10172009) | Thierry Koblentz
* The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
*/
/* using height:100% on html and body allows to style containers with a 100% height
* the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
* note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
*/
html { overflow-y: scroll; height: 100%; margin: 0; padding: 0; font-size: 100%; text-align: center; background: rgb(234,251,243) url(_assets/images/bg-html.jpg) left top repeat-x; }
/* not all browsers set white as the default background color 
* color is set to create not too much contrast with the background color
* line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line) 
*/
body { overflow: visible; width: 990px; margin: 0 auto; padding: 0; font-family: 'MyriadWebPro', "Trebuchet MS", Trebuchet MS, Trebuchet, Verdana, sans-serif;; font-size: 62.5%; line-height: 18px; text-align: left; color: rgb(84,84,85);  }

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
* rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
*/
h1, h2, h3, h4, h5, h6, p, pre, dt, li, hr, legend, input, button, textarea, select, address, table { margin-top: 10px; }

h1, h2, h3, h4, h5, h6 {
  margin: 9px 0 0;
  padding: 0;
  font-family: 'MyriadProBoldCondensed', "Trebuchet MS", Trebuchet MS, Trebuchet, Verdana, sans-serif; font-weight: normal;
}

.home #main h2, .interior h1 { font-size: 30px; line-height: 30px; }

pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}

p, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 9px 0 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 18px;
}

em, i { font-style: italic; }

ol li { list-style-type: decimal}
ul li { margin: 0; list-style-type: none; line-height: 22.5px; }
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}

a:link {color: rgb(39,93,160); text-decoration: none; -webkit-transition: all .12s ease-out; text-decoration: underline; }
a:visited { color: rgb(39,93,160); }
a:hover { text-decoration: underline; color: rgb(0,0,0); }
a:focus {text-decoration: none;}
a:focus { outline: 1px solid rgb(39,93,160);}
a:active {outline: none;}
.nav a,
a.btn { display: block; }
a img { border: none; }

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* color is to make that element stands out (see color set via body)
* padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
*/
legend {
  position: absolute;
  display: none;
  color: #000;
  padding-bottom: .5em; 
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
* so to prevent such workaround, I am positioning this element off-screen
*/
caption {
  position: absolute;
  text-indent: -99999px;
}

/* all th should be centered unless they are in tbody (table body)
*/
th {text-align: center;} 
tbody th {text-align: left;} 

/* These should be self explanatory
*/
code {color: #06f;}
code, pre {font-size: small;}

/* This should be self explanatory
*/
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
*/
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

/* These should be self explanatory
*/
th, strong, dt, b {
  font-family: 'MyriadWebPro';
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr, 
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
}

.accessibility{position:absolute;top:-9999px;left:-9999px;}
.ir{position:relative;overflow:hidden;visibility:visible;} 
.ir span{ display:block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:1000; }
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} * html>body .clearfix{display:inline-block;width:100%;} * html .clearfix{/* Hides from IE-mac \*/ height:1%;/* End hide from IE-mac */} /* end clearing */ /* replace */ /* tidy these up */ 

/*  -------------------------------------------------------- */
/*  = [end] BASE RESET */

/*= GLOBAL
/*-------------------------------------------------------- */

/*= HEADER/BRANDING
/*-------------------------------------------------------- */
#header { display: inline; float: left; width: 990px; margin: 0; padding: 0; }
#branding-logo { display: inline; float: left; width: 197px; margin: 7px 0 0 9px; }

/*= SITE NAV
/*-------------------------------------------------------- */
#site { margin-top: 54px; }
#site ul,
#site li { margin: 0; padding: 0; list-style: none; }
#site, #site ul { display: inline; float: left; width: 775px; }
#site li { display: inline; float: left; margin: 0 0 0 12px; }
#site a { height: 46px; font-family: 'MyriadProBoldCondensed', "Trebuchet MS", Trebuchet MS, Trebuchet, Verdana, sans-serif; font-size: 18px; line-height: 46px; text-align: center; text-decoration: none; color: rgb(65,95,116); background: url(_assets/images/ir-nav-site.png) left top no-repeat; 
-webkit-transition: all .12s ease-out; }
.no-fontface #site a { font-size: 12px; font-weight: bold; }
#site a:hover,
#site .current_page_item a { text-decoration: none; color: rgb(255,255,255); }
#site .page-item-2 a { width: 164px; background-position: left top;  }
#site .page-item-2 a:hover,
#site .page-item-2.current_page_item a { background-position: left -46px; }
#site .page-item-30 a { width: 112px; background-position: -164px top;  }
#site .page-item-30 a:hover,
#site .page-item-30.current_page_item a { background-position: -164px -46px; }
#site .page-item-34 a { width: 172px; background-position: -276px top;  }
#site .page-item-34 a:hover,
#site .page-item-34.current_page_item a { background-position: -276px -46px; }
#site .page-item-32 a { width: 170px; background-position: -448px top;  }
#site .page-item-32 a:hover,
#site .page-item-32.current_page_item a { background-position: -448px -46px; }

/*-------------------------------------------------------- */
/*= [end] GLOBAL */

/*= HOME
/*-------------------------------------------------------- */

.home #header { height: 339px; background: url(_assets/images/promo-home.jpg) left top no-repeat; }
.home #content { display: inline; float: left; width: 990px; padding-bottom: 63px; background: url(_assets/images/bg-home-sub.png) left bottom no-repeat; }
.home #main .wrap { display: inline; float: left; width: 990px; margin: -50px 0 30px;}
.home #main { display: inline; float: left; width: 990px; color: rgb(255,255,255); background: rgb(11,115,90); }
.home #main h2 { margin: 0 0 0 25px; color: rgb(236,187,50); }
.home #main p { line-height: 22.5px; }
.home #main .col { display: inline; float: left; width: 460px; margin: 0 0 0 25px; }
.home #main #col-01 { padding-top: 9px; }
.home #main #col-03 { width: 970px;  }
.home #main #col-03 p { font-size: 22px; line-height: 30px; font-style: italic; }
.home #sub { display: inline; float: left; width: 990px; padding: 0 0 25px; background: rgb(255,187,18) url(_assets/images/bg-home-main.png) left top no-repeat; }
.home #sub .col { display: inline; float: left; width: 385px; margin: 25px 0 0 25px; color: rgb(0,0,0);}
.home #support { float: right; }
.home #sub #contacts { margin-right: 165px; }
.home #contacts-list { margin-top: 20px; }
.home #contacts-list h3 { position: relative; }
.no-fontface .home #contacts-list h3 { font-size: 15px; font-weight: bold;}
.home #contacts-list .phone { position: absolute; top: 0; right: 0; display: block; text-align: right; }
.home #contacts-list .phone .number { display: block; line-height: 18px;}
.home #contacts-list p { margin: 0; }

.home #sub #social { width: 140px; margin: 75px 0 0 -560px; text-align: center; }
.home #support h2,
.home #contacts h2 { font-size: 24px; font-weight: bold; line-height: 24px; }
.home #support strong { font-family: 'MyriadWebPro'; font-weight: bold; }
.home #social h2 { font-size: 24px; line-height: 30px; margin: 0 0 10px; color: rgb(0,0,0);}

.home #social-blog a { font-family: 'MyriadProBoldCondensed'; font-size: 16px; line-height: 16px; text-decoration: none; color: rgb(0,0,0); }
.home #social-blog a:hover { color: rgb(39,93,160); }

/*-------------------------------------------------------- */
/*= [end] HOME */

/*= INTERIOR
/*-------------------------------------------------------- */

.interior #header { height: 240px; }
.interior #content { display: inline; float: left; width: 100%; height: 100%; padding: 0 0 60px; background: transparent url(_assets/images/bg-int-home.jpg) left 130px repeat-x; }
.interior #summary { display: inline; float: left; width: 990px; color: rgb(255,255,255); border-bottom: 2px solid rgb(10,92,74); background: rgb(12,119,93);}
.interior #summary h1 { margin: 0 0 0 20px; color: rgb(236,189,74); text-shadow:rgba(0,0,0,1) 0 0 2px; }

.no-fontface .interior #summary h1 { font-size: 24px; font-weight: bold; }
.interior #summary h2 { font-family: 'MyriadProBoldCondensed'; font-size: 24px; text-shadow:rgba(0,0,0,1) 0 0 2px; }
.no-fontface .interior #summary h2 { font-size: 18px; font-weight: bold; }
.interior #summary .entry-content { width: 825px; margin: 0 0 25px 20px; }
.interior #summary p { font-size: 21px; line-height: 30px; text-shadow:rgba(0,0,0,1) 0 0 2px; }
.interior #summary a { color: rgb(236,189,74);}
.interior #summary a:hover { text-decoration: none; color: rgb(255,255,255); }
.interior #main,
.interior #sub { display: inline; float: left; width: 970px; }
.interior #main { border-top: 2px solid rgb(245,251,248); }

.interior #main h2 { margin: 25px 0 8px 20px; font-size: 30px; font-weight: normal; color: rgb(0,0,0); }
.interior #main h3 { font-size: 24px; font-weight: normal; color: rgb(12,113,90); }
.interior #main h4 { margin: 15px 0 0; font-size: 15px; font-family: 'MyriadWebPro'; font-weight: bold; line-height: 15px; }
.interior #main h4+p { margin-top: 0; }

.interior #main .column,
.interior .col { display: inline; float: left; width: 465px; margin: 0; }
.interior #main div.first { margin: 0 2%; }

.interior .col .entry-content,
.interior .column .entry-content { margin: 0 0 10px; color:rgb(12,113,90); }
.interior .col ul,
.interior .column ul { padding: 0 0 0 6px; }
.interior #main li { margin: 0 0 6px; padding: 0 0 0 9px; background: url(_assets/images/bg-list.gif) left .55em no-repeat; }

.interior #main .phone { margin: 0 0 0 4px; padding: 0 0 0 6px; font-family: georgia, serif; color: rgb(117,138,129); border-left: 1px solid rgb(117,138,129); }

.interior #sub { margin: 18px 0 0;}
.interior #sub-col-01 { margin: 0 32px 0 8px; background: rgb(254,184,19); }
.interior #sub-col-01 .entry-content { margin: 9px 12px; color: rgb(0,0,0); }
.interior #sub-col-01 a { color: rgb(0,0,0);}
.interior #sub-col-02 { margin: 15px 0 0;}
.interior #sub-col-02 .entry-content { display: inline; float: left; width: 200px; margin: 0 35px 0 0; }
.interior #sub-col-02 h2 { font-size: 18px; }
.interior #sub-col-02 p { margin: 0; font-size: 12px; line-height: 15px; }
.interior #social-list { display: inline; float: left; width: 190px; margin: 0; padding: 0; }
.interior #social-list li { display: inline; float: left; width: 78px; margin: 0 12px 0 0; padding: 0; list-style: none; }

body.firn #main { width: 465px; margin: 0 20px; }
body.firn #main h2 { margin-left: 0; }
body.firn #sub { width: 465px; margin-top: 70px; }
body.firn #sub #sub-col-01 { margin:20px 0 0 0; }

body.firn #summary { position: relative; }
body.firn #summary p { font-family: Verdana, Arial, Helvetica;}

body.firn #nav-lang { display: none; position: absolute; top: .75em; left: 19em; width: 200px; display: inline; float: left; margin: 0; padding: 0; }
body.firn #nav-lang li { display: inline; float: left; margin: 0 0 0 5px; padding: 0 0 0 5px; font-size: 12px; line-height: 1; border-left: 1px solid #fff;}
body.firn #nav-lang li:first-child { margin: 0; padding: 0; border: none; }

/*= Headers
/*-------------------------------------------------------- */
#page-2 #header { background: url(_assets/images/promo-children.jpg) left top no-repeat; }
#page-34 #header { background: url(_assets/images/promo-foreign.jpg) left top no-repeat; }
#page-30 #header { background: url(_assets/images/promo-adults.jpg) left top no-repeat; }
#page-32 #header { background: url(_assets/images/promo-disabilities.jpg) left top no-repeat; }

/*-------------------------------------------------------- */
/*= [end] INTERIOR */

#social-list li,
#social-list a,
#social-list span { width: 78px; height: 78px; }
#social-list span { text-indent: -9999px; }
#social-list a { display: block; }

.home #social-list { width: 78px; margin: 0 auto; }
.home #social-list li { margin: 0 0 10px; }
.home #social-list-linkedin span { background:url(_assets/images/ir-nav-social.png) left -78px no-repeat; }
.home #social-list-facebook span { background: url(_assets/images/ir-nav-social.png) -78px -78px; }
.home #social-list-linkedin a:hover span { background:url(_assets/images/ir-nav-social.png) left top no-repeat; }
.home #social-list-facebook a:hover span { background: url(_assets/images/ir-nav-social.png) -78px top no-repeat; }

.interior #social-list-linkedin span { background:url(_assets/images/ir-nav-social.png) left top no-repeat; }
.interior #social-list-facebook span { background: url(_assets/images/ir-nav-social.png) -78px top; }
.interior #social-list-linkedin a:hover span { background:url(_assets/images/ir-nav-social.png) left -78px no-repeat; }
.interior #social-list-facebook a:hover  span { background: url(_assets/images/ir-nav-social.png) -78px -78px no-repeat; }