@viewport { min-width: 400px; }

/* Reset - This website is responsive. As long as the device viewport is >= 460px wide, the site will look beautiful */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 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, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0 }

body {
    background: #444;                               /* For boring old browsers that don't support CSS3 gradients */
    line-height: 1.0em;    
    font-size: 1.0em;
    -webkit-background-size: 100%;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: -webkit-linear-gradient(#222, #888);
    background: -moz-linear-gradient(#222, #888);
    background: -ms-linear-gradient(#222, #888);
    background: -o-linear-gradient(#222, #888);
    background: linear-gradient(#222, #888);
    background-repeat: no-repeat;
    overflow-x: hidden                              /* Prevents a horz scrollbar when the header changes to use a menu, absolutely positioned */
}

html, body
{
    min-height: 100%;
}

h1	{
color: #222;
font: bold 1.6em Times New Roman, serif;
margin: 5px 0;
}
h2	{
color: #222;
font: bold 1.5em Times New Roman, serif;
margin: 5px 0;
}
h3	{
color: #222;
font: bold 1.4em Times New Roman, serif;
margin: 5px 0;
}
h4	{
color: #222;
font: bold 1.3em Times New Roman, serif;
margin: 5px 0;
}
h5	{
color: #222;
font: bold 1.2em Times New Roman, serif;
margin: 5px 0;
}
h6	{
color: #222;
font: bold 1.1em Times New Roman, serif;
margin: 5px 0;
}
blockquote { font: 1.0em Times New Roman, serif; }

nav { float: left; width: 100%;  background: #FFF; border: 3px solid #373737; margin: 0px 0px 5px 0px; padding: 0px 0px 0px 0px; height: 30px }
p { margin: 0 0 12px 0; font: 1.0em Calibri, Tahoma, sans-serif }
img { max-width: 100%; height: auto }
a:link { color: #668CFF }
a:visited { color: purple }
a:hover { color: blue }
a:focus { color: blue }
a:active { color: black }

nav a:link { color: #668CFF; text-decoration: none; font: bold 1.2em Times New Roman, serif }
nav a:visited { color: #668CFF; text-decoration: none }
nav a:hover { color:  #000000}
nav ul { list-style: none; margin-top: 4px }
.current { color: #!important }

header {
    background: #668CFF;
    width: 100%;
    height: 115px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 2px solid black;
    z-index: 200;
    margin: 0;
    padding: 0
}
#logo-wrap {
    width: 90px;
    margin: 5px 0px 5px 20px;
    float: left;
    display: block
}
#logoShadow { float: left; width: 64px; height: 88px; background-image: url('../images/ShadowCounselingLogo.png'); background-repeat: no-repeat }
#SiteTitle { font: italic 3em bold Times New Roman, serif; text-shadow: 2px 2px 4px #777; margin: 10px 0px 0px 0px }
#tagline { font: italic 1.15em Times New Roman, serif; color: #FFF; margin: 2px 5px 0px 150px }
#page-wrap { position: relative; margin: 160px auto 10px auto; padding: 0; max-width: 980px; height: auto }
.LinkFull { display: block; width: 100%; height: 100%; text-decoration: none }
.clearLeft { clear: left }
.clearAll { clear: both; height: 0px }

#MenuIcon {                                                /* Mobile menu icon */
    display: hidden;
    width: 40px;
    height: 40px;
    background: #52748B url('../images/MenuIcon.png') center;
}
a:hover#MenuIcon {
    background-color: #444;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0
}
ul#myMenu > li {
    display: inline-block;
    float: left;
    padding: 0 15px 0 15px
}
ul#myMenu li ul {               /* sub menu style */
    display: none;
    position: absolute;
    background: #EEE;
    margin: 0;
    padding: 10px 15px 18px 15px;
    border: 1px solid #52748B;
    -moz-box-shadow: 3px 3px 4px #52748B;
    -webkit-box-shadow: 3px 3px 4px #52748B;
    box-shadow: 3px 3px 4px #52748B;
    z-index: 201
}
ul#myMenu li ul li { margin: -4px 0 -6px 0; padding: 0 }                       /* sub menu list item style */
/*ul#myMenu li ul li a { color: #6C972B }                      */               /* Font color of child pages in nav menu */
ul#myMenu li > a:after { content: url('../images/navDownArrow.png') }
ul#myMenu li > a:only-child:after { content: '' }
ul#myMenu li:hover ul { display: block !important }
ul#myMenu li:hover ul li { display: block !important }

#main-content {
    box-sizing: border-box;
    background: #EEE;
    color: #000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 4px #EEE;
    -webkit-box-shadow: 1px 1px 4px #EEE;
    box-shadow: 1px 1px 4px #EEE;
    margin: 0 0 7px 0;
    padding: 15px
}
/* Carousel images style */
#main-content a > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px
}

#sidebar {
    box-sizing: border-box;
    background: #CCC;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 4px #EEE;
    -webkit-box-shadow: 1px 1px 4px #EEE;
    box-shadow: 1px 1px 4px #EEE;
    margin: 0 0 7px 0;
    padding: 15px 8px
}
.lnkSidebarOP { display: block; height: 100% }
#sidebar a:link { text-decoration: none }
#sidebarCareerOpps a:link { text-decoration: none; font-weight: bold; color: #251F4C }
#sidebarCareerOpps a:visited { color: #251F4C }
#sidebarCareerOpps a:hover { color: #52748B }
#sidebarCareerOpps a:focus { color: #52748B }
#sidebarCareerOpps a:active { color: #52748B }
#sidebarCareerOpps {
    height: 200px;
    border: 1px solid #888;
    background: #EEE;
    color: #000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow:inset 0px -1px 5px #232323;
    -webkit-box-shadow:inset 0px -1px 5px #232323;
    box-shadow:inset 0px -1px 5px #232323;
    margin-bottom: 7px;
    padding: 9px 9px 20px 9px
}
#sidebarCOHead { font: 1.2em bold Ebrima, Tahoma, sans-serif; color: #251F4C }
#NowHiringWrapper {
    width: 135px;
    margin: 0 auto
}
#NowHiringSidebarText {
    position: relative;
    float: left;
    height: 75px;
    text-align: center
}
#vCenteredNHST {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font: 1.1em Ebrima, Tahoma, sans-serif;
    color: #251F4C
}
#NowHiringSidebarIcon {
    float: right;
}
#sidebarResources {
    border: 1px solid #888;
    background: #444;                               /* For boring old browsers that don't support CSS3 gradients */
    color: #EEE;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient(#888, #222);
    background: -moz-linear-gradient(#888, #222);
    background: -ms-linear-gradient(#888, #222);
    background: -o-linear-gradient(#888, #222);
    background: linear-gradient(#888, #222);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 9px
}
#sidebarResHead { font: 1.2em bold Ebrima, Tahoma, sans-serif; color: #EEE }
#sidebarResources a { color: #EEE }
#footer {
    box-sizing: border-box;
    background: #668CFF;
    color: #FFF;
    height: 40px;
    font: .90em bold Times New Roman, serif;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 1px 1px 4px #EEE;
    -webkit-box-shadow: 1px 1px 4px #EEE;
    box-shadow: 1px 1px 4px #EEE;
    margin: 0;
    padding: 10px
}
#footerLeft {
    float: left;
}
#footerLeft li { display: inline-block }
#footerLeft a:link { text-decoration: none; color: #FFF }
#footerLeft a:visited { color: #FFF }
#footerLeft a:hover { text-decoration: underline }
#footerLeft a:active { text-decoration: underline }

#footerRight {
    float: right;
    padding: 0;
    margin: 0;
}
#footerRight li { display: inline-block }
#footerRight a:link { text-decoration: none; color: #FFF }
#footerRight a:visited { color: #FFF }
#footerRight a:hover { text-decoration: underline }
#footerRight a:active { text-decoration: underline }

/************** page-specific classes **************/
.PageHeader {
    width: 100%;
    box-sizing: border-box;
    font: 1.2em bold Times New Roman, serif;
    color: #000;
    border: 1px solid #DDD;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 0 0 20px 0;
    padding: 7px 10px
}

.ThumbBorder {
    border: 2px solid #777;
    margin-top: 10px;
}
.ThumbCaption {
    max-width: 450px;
    color: #222;
    font: bold 1.3em Calibri, Tahoma, sans-serif;
    text-align: center;
    margin: 5px 0 15px 0;
}
.SubHead { font: bold 1.1em Times New Roman, serif; margin: 7px 0 10px 0 }
.MiniHead { font: bold 1.1em Calibri, Tahoma, sans-serif }
.PaneDark {
    background: #444;
    color: #FFF;
    border: 1px solid #000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 20px 0 0 0;
    padding: 5px
}
.PaneLight {
    background: #DDD;
    color: #000;
    border: 1px solid #000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 20px 0 0 0;
    padding: 5px
}
.BoldMe { font-weight: bold }
.hMainBlue { background: #668CFF; color: #FFF }
.hPrivacy { background: transparent }
.hTerms { background: transparent }
.hMidnight { background: #251F4C; color: #FFF }

.HCPcolor { color: #6C972B }
.MPcolor { color: #650044 }
.NHcolor { color: #251F4C }

ul#AboutUsClients li { color: #D77948 }                             /* colored bullet li styling */
ul#AboutUsClients li span { color: #000 }
ul.StaffingUl li { color: #650044 }
ul.StaffingUl li span { color: #000 }

#ResWrapper iframe { width: 700px; height: 500px; border: 1px solid #111; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px }
#ContactJobsiFrameWrap iframe { width: 300px; height: 1185px }
#ContactStaffingiFrameWrap iframe { width: 300px; height: 800px }
#PositionsWrapper { max-width: 540px; margin: 20px auto 5px auto }
#PositionsPane1 {
    float: left;
    width: auto;
    max-width: 340px;
    height: auto;
    min-height: 128px;
    border: 1px solid #D77948;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 0;
    padding: 0 0 8px 0
}
#PositionsPane2 {
    float: right;
    width: auto;
    max-width: 340px;
    height: auto;
    min-height: 128px;
    border: 1px solid #D77948;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 0;
    padding: 0 0 8px 0
}
.PositionsHead {
    background: #D77948;
    text-align: center;
    padding: 4px 0;
    color: #FFF;
    border: 1px solid #D77948;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0
}
#PositionsPane1 ul { list-style-type: disc; margin: 8px 10px 10px -8px }
#PositionsPane1 ul li { color: #D77948 }
#PositionsPane1 ul li span { margin: 0 10px 0 -4px; color: #000 }
#PositionsPane2 ul { list-style-type: disc; margin: 8px 10px 10px -8px }
#PositionsPane2 ul li { float: left; width: 50%; color: #D77948 }
#PositionsPane2 ul li span { margin: 0 10px 0 -4px; color: #000 }

#ResWrapper { margin: 12px 0 3px 0 }
.ResHeader {
    width: 95%;
    color:#FFF;
    background: #808080;
    border: 1px solid #6C972B;
    -moz-border-radius: 0 6px 0 6px;
    -webkit-border-radius: 0 6px 0 6px;
    border-radius: 0 6px 0 6px;
    font: 1.1em bold Times New Roman, serif;
    padding: 3px 7px
}
#ResPane1 {
    float: left;
    width: 47%;
    height: auto;
    min-height: 334px;
    border: 1px solid #DDD;
    border-bottom: 0;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    padding: 8px
}
#ResPane2 {
    float: right;
    width: 47%;
    height: auto;
    min-height: 334px;
    border: 1px solid #DDD;
    border-bottom: 0;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    padding: 8px
}
#ResFooter {
    margin: 0 0 25px 0;
    padding: 4px;
    background: #DDD;
    font: .80em Times New Roman, serif;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    border-left: 1px solid #DDD
}
#ResFooter img { margin-left: 7px }

#ContactWrapper { height: 100%; margin: 12px 5px 5px 5px }
#ContactPane1 {
    float: left;
    width: 47%;
    height: auto;
    min-height: 290px;
    border: 1px solid #DDD;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 8px
}
#ContactPane2 {
    float: right;
    width: 47%;
    height: auto;
    min-height: 290px;
    border: 1px solid #DDD;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 8px
}
#LocationsWrapper { height: 100%; margin: 12px 5px 5px 5px }
#LocationsPane1 {
    float: left;
    width: 47%;
    height: auto;
    min-height: 290px;
    border: 1px solid #DDD;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 8px
}
#LocationsPane2 {
    float: right;
    width: 47%;
    height: auto;
    min-height: 290px;
    border: 1px solid #DDD;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 8px
}
#JSHeader { width: 100%; position: relative }
.JSHeaderImg { margin-right: 20px }
.JSHeaderText { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font: 1.2em bold Ebrima, Tahoma, sans-serif; padding: 8px; color: #6C972B }
a.JSHeaderLink { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font: 1.2em bold Ebrima, Tahoma, sans-serif; padding: 8px; color: #6C972B; text-decoration: none }
a.JSHeaderLink:hover { color: #52748B }
#MPHeader { width: 100%; position: relative }
.MPHeaderImg { margin-right: 20px }
.MPHeaderText { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font: 1.2em bold Ebrima, Tahoma, sans-serif; padding: 8px; color: #650044 }
a.MPHeaderLink { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font: 1.2em bold Ebrima, Tahoma, sans-serif; padding: 8px; color: #650044; text-decoration: none }
a.MPHeaderLink:hover { color: #52748B }

.imgResources { 
    border: #000000 2px outset;
}
#back-top {
    position: fixed;
    bottom: 50px;
    right: 80px
}
#back-top a {
    width: 50px;
    display: block;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}
#back-top span {
    width: 50px;
    height: 50px;
    border: 1px solid #888;
    display: block;
    margin-bottom: 7px;
    background: #52748B url('../images/upArrow.png') no-repeat center center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s
}
#back-top a:hover span {
    border: 1px solid #FFF;
    background-color: #222
}
#ol404Options li { margin: 5px 0; font: 1.0em Calibri, Tahoma, sans-serif }
/****************************/

@media only screen and (max-width: 1009px), only screen and (max-device-width: 1009px) {
    #ResWrapper iframe { width: 99% }
    #ContactWrapper iframe { width: 99%; }
}
@media only screen and (max-width: 787px), only screen and (max-device-width: 787px) {
    header { position: absolute; height: 105px }
    #logo-wrap { width: 90px; margin: 7px 20px 0 5px; text-align: center }
    #MenuIcon { display: inline-block; position: absolute; right: 20px; top: 8px }
    #page-wrap { margin: 110px auto 10px auto }
    ul#myMenu li ul { width: 80%; display: block; position: relative; top: 8px; left: 30px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px }
    ul#myMenu li ul li { display: block !important; margin-top: 0px; padding: 0 }
    ul#myMenu li ul li a { color: #52748B }                 /* font color of sub menu children */

    nav { float: right; width: 100px; background: transparent; margin: 5px 10px 5px 0; padding: 10px 0 0 0; border: none }
    nav ul, nav:active ul {                                 /* jQueryUI Mobile Menu style */
        display: none;
        position: absolute;
	padding: 10px 20px;
        background: #fff;
        border: 3px solid #52748B;
	right: 20px;
        top: 44px;
	max-width: 200px;
        -moz-border-radius: 4px 0 4px 4px;
        -webkit-border-radius: 4px 0 4px 4px;
        border-radius: 4px 0 4px 4px
    }
    ul#myMenu li {
	display: block;
	width: 100%;
	padding: 7px 0;
        margin: 0
    }
    ul#myMenu li ul {                                       /* sub menu styles - mobile version */
        background: transparent;
        border: none;
        margin: 2px 0 7px -10px;
        padding: 0 0 7px 0;
        -moz-box-
        : none;
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .CycleSlideTitle { font-size: 2.0em }
    .CycleSlideSubTitle { font-size: 1.1em }
    .CycleSlideFooter { font-size: 1.2em; bottom: 3% }
}
@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    #ContactPane1 {
        float: none;
        width: 97%
    }
    #ContactPane2 {
	margin-top: 7px;
        float: none;
        width: 97%
    }
    #LocationsPane1 {
        float: none;
        width: 97%
    }
    #LocationsPane2 {
	margin-top: 7px;
        float: none;
        width: 97%
    }#footer { height: 65px }
}
@media only screen and (max-width: 701px), only screen and (max-device-width: 701px) {
    #ResWrapper { width: 97%; min-width: 200px }
    #ResPane1 {
        float: none;
        width: 97%
    }
    #ResPane2 {
	margin-top: 7px;
        float: none;
        width: 97%
    }
    #SiteTitle {
        font: italic 2.1em Times New Roman, serif;
        margin: 20px 10px 0 0
    }
    #tagline { margin-left: 0 }
}
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
    #footer { height: 120px }
}