/* 
AdaptLife Palette
#0071bb blue
#f93 orange

Defaults
================================================================*/
*, dl, dd, dt { margin: 0; padding: 0; }
img { border: 0; }
a, a:visited { color: #f93; text-decoration: none;  }
.clear { clear: both; height: 0; line-height: 0; }
ul, ul li { list-style: none; }
html { min-height:100%; margin-bottom:1px; } 
body { margin: 0; font: 62.5% arial,helvetica,sans-serif; color: #333; background-color: #fff; text-align: center; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  
img, iframe { max-width: 100%; }
img { height: auto; }
address { font-style: normal; }

/* Headings,text defaults
================================================================*/

/*fontsquirrel*/
@font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
#tagline, #nav, .feature, h1, h2, h3, .image, address, #footer, .header-mobile { font-family: 'QuicksandBold',arial,helvetica,sans-serif; }

#content { font-size: 1.2em; line-height: 1.4em; }

/*headings*/
h1, h2, h3 { font-weight: normal; }
h1, h2 { font-size: 1.5em; /*18/12*/ margin-bottom: 0.5em; /*9/18*/ color: #0071bb; }
h2.alt { font-size: 12px; color: #f93; border-top: 1px dotted #999; text-transform: uppercase; padding-top: 10px; } 
#content h3, h4 { font-size: 11px; font-weight: 600; color: #0071bb; text-transform: uppercase }

/*common text sizes and styles*/
#nav, .feature li { text-transform: uppercase; }

#content p, #content ul { clear: left; margin: 0 0 1.363636em; /*15/11*/  }
#content li { padding-left: 15px; /*margin-right: 150px;*/ margin-bottom: 0.272727em; /*3/11*/ background:url(../images/dot-orange.gif) 0 7px no-repeat; }

/* Forms
===============================================================*/
input,textarea,select,button { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
label { display: block; margin-bottom: 8px; }
.folaigh { display: none; }

form { padding: 11px 0 20px; background: url(../images/divider.gif) top left repeat-x; }
input, textarea, select { width: 90%; padding: 5px; margin-bottom: 12px; border: 1px solid #f93; }
select { width: 94%; }

button { padding: 5px 15px; background-color: #f93; color: #fff; border: 0; cursor: pointer; font-weight: bold; text-transform: uppercase; }

form .col { margin-bottom: 10px; }
form .section { clear: both; }

.error { color: #c00; }
span.error { padding-left: 5px; }
p.error { padding: 5px; font-weight: bold; border: 1px solid #c00; }

/* Layout
================================================================*/
#container { position: relative; max-width: 850px; margin: 0 auto; text-align: left; }

/*wrapper around other 2 columns*/
#wrap-main { position: relative; z-index: 1; }

/*column 2 - logo and content*/

/*logo and tagline*/
#branding { position: relative;  }

/*footer*/
#footer { clear: both; padding: 11px 0; text-align: right; color: #999; }
#footer span { color: #f93; }
#footer strong { color: #0071bb; }

.pmcredit { padding-top: 10px; }

/* Special cases
================================================================*/

/*photo box right aligned in content*/
.image {
    background-color: #FFFFFF;
    color: #0071BB;
    position: relative;
    margin-bottom: 10px ;
}
.image img { display: block; margin-bottom: 4px; border-bottom: 1px solid #f93; }
.image span { padding-right: 10px; }

/*call to action at bottom of page*/
.cta { padding: 11px 0 0 32px; min-height: 12px; color: #f93; background: url(../images/cta.png) top left no-repeat; font-weight: bold; }

/*back to top of page link*/
.backtop { display: block; float: right; padding: 2px; border-top:1px dotted #999; }


/*mobile friendly styles 2015*/
/*areas not visible on all devices*/
.header-mobile, #menu, #branding, #sidebar, #features { display: none; }

@media screen and (max-width: 349px)
{
    #nav-mobile { font-size: 1.3em; }
}

@media screen and (min-width: 350px)
{
    #nav-mobile { font-size: 1.4em; }
}

@media screen and (max-width: 479px)
{
    .cta a { display: block; }
    .header-mobile .bar { height: 40px; }
    .js #wrap-main { padding-top: 60px; }

    .header-mobile .logo img { max-height: 40px; }
}

@media screen and (min-width: 480px)
{
    .image {
        float: right;
        padding-left: 10px;
        text-align: right;
        margin-top: -4px;
    }
    .header-mobile .bar { height: 50px; }
    .js #wrap-main { padding-top: 70px; }

    .js #menu { margin-top: 10px; } 

}

@media screen and (max-width: 767px) {
    #content { margin: 15px 15px 20px; }
    #content, address, #footer { font-size: 1.4em; line-height: 1.5em; }
    h2.alt { font-size: 14px; }
    .cta { font-size: 15px; }

    .header-mobile { display: block; width: 100%; z-index: 1000; background: #f93; }
    .header-mobile .bar { padding: 11px 0 9px;  }
    .header-mobile .logo { display: inline-block; width: 50%; margin-left: 15px; }
    .header-mobile .logo img { display: block; }

    .header-mobile li a { display: block; color: #fff; text-transform: uppercase; padding: 10px 15px 8px; border-top: 2px solid #fff; }

    .header-mobile li.nav-feature a { background: #999; }

    #nav-mobile li.current a, #page-home #nav-mobile li.nav-home a, #page-about #nav-mobile li.nav-about a, #page-why #nav-mobile li.nav-why a, #page-ot #nav-mobile li.nav-ot a, #page-benefit #nav-mobile li.nav-benefit a, #page-contact #nav-mobile li.nav-contact a, #page-family #nav-mobile li.nav-family a { background: #0071bb; }
    #nav-mobile a:hover, #nav-mobile a:focus { background: #f60; }
    #nav-mobile li.nav-feature a:hover, #nav-mobile li.nav-feature a:focus { background: #666; }

    .js .header-mobile { position: fixed; }
    
    .js .header-mobile ul.closed { display: none; }
    .js .header-mobile ul.open { display: block; }

    .js #menu { display: inline-block; float: right; padding: 5px 15px; width: 26px; height: 27px; background-position: center center; background-repeat: no-repeat; }
    .js .bar a.closed { background-image: url('../images/menu-open.png'); }
    .js .bar a.open { background-image: url('../images/menu-close.png'); }

    #page-who .section { padding-top: 50px; }

    address, #footer { text-align: center; }
    address span.fn, address span.tel { display: block; }

    .pmcredit { font-size: 12px; }
}

@media screen and (min-width: 768px) {
    .js #wrap-main { padding-top: 0; }

    #container { border-top: 8px solid #666; }
    #branding { display: block; margin: 19px 0 101px 1px; }

    /*column 1 - large motif and nav*/
    #sidebar { display: inline-block; position: absolute; top: 0; left: 0; width: 25%; padding-top: 395px; border-left: 1px solid #b3b3b3; border-right: 1px solid #fff; background: #fff url(../images/bg-sidebar-internal.png) 0 124px no-repeat; z-index: 100; }
    #nav { border-top: 1px solid #ccc; }
    #nav li { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
    #nav a { display: block; padding: 6px 6px 6px 21px; background: url(../images/dot-blue.gif) 10px center no-repeat; }
    #nav a, #nav a:visited { color: #666; }

    #page-home #sidebar { background-image: url(../images/bg-sidebar.png); }

    /*nav highlights*/
    #nav li.current a, #page-home #nav li.nav-home a, #page-about #nav li.nav-about a, #page-why #nav li.nav-why a, #page-ot #nav li.nav-ot a, #page-benefit #nav li.nav-benefit a, #page-contact #nav li.nav-contact a, #page-family #nav li.nav-family a { background-color: #0071bb; background-image: url(../images/dot-white.gif); color: #fff; }
    #nav a:hover { background-color: #f93; color: #fff; }

    #wrap-main { border-bottom: 12px solid #f93; margin-left: 25%; width: 75%; min-height: 70em; background:url(../images/bg-contact.png) bottom right no-repeat; }

    #main { float: left; display: inline; width: 71.5%; }
    .bodytext { font-size: 12px; }

    /*main page content*/
    #content { margin-left: 20px; margin-bottom: 48px; }

    .image {
        font-size: 1.2em;
        margin: 0px -20px 10px 15px;
    }

    /*column 3 - target audience boxes*/
    #features { float: right; display: inline; width: 160px; }
    .feature { height: 143px; margin-top: 4px; }

    /*column 3 - target audience boxes*/
    .feature { margin: 0 0 10px; padding: 2px 10px 10px 26px; color: #fff; background: #f93 url(../images/arrow-o.gif) top left no-repeat; font-size: 1.3em; line-height: 18px; }
    .feature h3 { font-size: 1em; margin-bottom: 11px; }
    .feature ul, .feature li { list-style: disc; }
    .feature li { margin-left: 1em; }
    .feature, .feature a, .feature a:visited { color: #fff; }
    .feature a:hover { color: #0071bb; }
    /*blue box*/
    #professionals { background-color: #0071bb; background-image: url(../images/arrow-b.gif); }
    #professionals a:hover { color: #f93; }

    /*contact details - bottom right*/
    address, #footer { font-size: 1.1em; line-height: 1.363636em; /*15/11*/ }
    address { position: absolute; bottom: 15px; right: 15px; font-style: normal; color: #fff; line-height: 1.181818em; /*13/11*/ }
    address a, address a:visited { color: #fff; }
    address a:hover { color: #0071bb; }
    address .fn { display: none; }
    address .tel, address > a { display: block; }
    address .last { margin-bottom: 1.27272727em; /*14/11*/ }
    #footer { padding-right: 15px; }

    .cta { margin-top: 36px; }

    .pmcredit { padding-top: 30px; }

    /*forms*/
    form { padding-bottom: 0; }
    input, textarea, select { width: 196px; padding: 2px;  }
    select { width: 202px; padding: 1px 2px; }
    textarea { height: 69px; }
    textarea.wide { width: 90%; height: 166px; }
    button { padding: 2px 10px; }

    /*2 column layout e.g. contact form*/
    .col { float: left; width: 202px; }
    .col1 { margin-right: 22px; }
}

/*original layout width*/
@media screen and (min-width: 850px) {
    #sidebar { width: 219px; }
    #wrap-main { margin-left: 219px; width: 630px; border-left: 1px solid #ccc; }
    * html #wrap-main { height: 70em; }
    #main { width: 450px; }

    textarea.wide { width: 420px; }

    address { left: 498px; right: auto; }
    #footer { padding-right: 0; }
}