/* Style Library/CDS/css/main.css */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);

body { font: 16px/1.5 'Open Sans', sans-serif; font-weight:400; color:#444; margin:0; padding:0; letter-spacing: 0.025em; }

div.login-link, .ms-signInLink { display:none; height:0; } /* hiding sign in link */

/* Link */
a:link, a:visited, .ms-link, .ms-link:visited { color: #0072c6; text-decoration:underline; }
a:hover, .ms-link:hover { color: #f9972a; }

/* Headings */
H1.cds-rteElement-H1     { -ms-name:"Heading 1"; }
h1, H1.cds-rteElement-H1 { clear:both; font-size: 1.5em; color:#f9972a; font-weight:700; line-height: 1.4; margin: 1em 0; }

H2.cds-rteElement-H2     { -ms-name:"Heading 2"; }
.ms-rtestate-field h2,
h2, H2.cds-rteElement-H2 { clear:both; font-size: 1.35em; color:#0072c6; font-weight:700; line-height: 1.4; margin: 1em 0; }

H3.cds-rteElement-H3     { -ms-name:"Heading 3"; }
h3, H3.cds-rteElement-H3 { clear:both; font-size: 1.25em; color:#666; font-weight:700; line-height: 1.4; margin: 1em 0; }

H4.cds-rteElement-H4     { -ms-name:"Heading 4"; }
h4, H4.cds-rteElement-H4 { clear:both; font-size: 1.15em; color:#333; font-weight:700; line-height: 1.4; margin: 1em 0; }

HR.cds-rteElement-Hr     { -ms-name:"Horizontal Rule"; } 
hr, hr.cds-rteElement-Hr { /* [ReplaceColor(themeColor:"Light1-Medium")] */ background-color:#b6b6b6; height:1px; }

p, P.cds-rteElement-P    { -ms-name:"Paragraph"; }
p, P.cds-rteElement-P    {/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#000; }

/* new MS class for responsive image */
.ms-rteImage-5 { -ms-name:"Responsive"; }

.topBar { height: 35px; background: #332a87; border-bottom: 5px solid #f9972a; }
.topBar .content { width: 940px; margin: 0 auto; color:#fff; font-size: 0.7em; text-align: right; padding-top: 6px; box-sizing:border-box; letter-spacing: 0.05em; border:none; background:none;  }
.topBar .content .cds-searchbox { width: 40%; float:left; position:relative; text-align:left; }
.topBar .content .topinfo { width: 60%; float:right; text-align:right;  padding-top: 3px; }
.topBar .content .topinfo a:link, .topBar .content .topinfo a:visited  { font-weight:bold; color:#fff; padding-right: 15px; }
.topBar .content .topinfo a:hover { color:#f9972a; }
span.cds-phone  { padding-left: 15px; }

.ms-srch-sb { background: #000066; }
.ms-srch-sb-border, .ms-srch-sb-borderFocused { border: 1px solid #555; }
.cds-searchbox input,
.ms-srch-sb input { width: 160px; font-size: 1.1em;color: #ccc; border:none; padding: 2px 8px; }
.ms-srch-sb-searchImg { background: #000066; }
.ms-srch-sb-searchImg:hover { border: 1px solid #000066; }


/* Header */

header { height: auto; clear:both;  } 
#logo   { clear:both; position:relative; }
#logo h1 { text-indent: -9999px; }
header #logo a {
	z-index:20;
	display:block;
	width: 325px; height:210px;
	margin: 0px auto;
	background: url(/childdevelopmentservices/Style%20Library/CDS/images/cds-logo.png); }

header #logo a span { display:none; }

/* Hands */
.hand1, .hand2, .hand3, .hand4, .hand5, .hand6 { width:65px; height:57px; position:absolute; z-index:50; }

.hand1 { left: 20%; top: 25px; }
.hand2 { left: 30%; top: 20px; }
.hand3 { left: 35%; top: 50px; }
.hand4 { right: 35%; top: 10px; }
.hand5 { right: 30%; top: 65px; }
.hand6 { right: 20%; top: 30px; }


/* Footer */

footer  { height: 45px; background: #332a87; border-top: 5px solid #f9972a; color:#fff; font-size: 0.7em; text-align: center; padding: 10px 15px 8px 15px; box-sizing:border-box; letter-spacing: 0.05em; } 

/* Main content */

.mainContent {	
	clear:both;
	width:940px;
	margin: 0 auto 40px auto;
	min-height: 120px;
	Font-size: 0.85em;
	overflow: auto; }

#s4-titlerow { clear:both; margin: 0; padding:0; height: auto; }

/*section { width: 940px; clear:both;  margin: 0 auto; overflow:auto; }*/

.content {}

/* ===========================================
	HOME PAGE
============================================== */

/* Section Carousel */

section.imageSlidder { width: 100%; clear:both;  margin: 0; padding:0; height: auto; z-index:1; }

/* Home - Section Welcome */

section.welcome h2 { font-family: 'Droid Serif', serif; font-style: italic; font-size:1.75em; font-weight:400; color: #332A87; margin-bottom:20px; text-align:center; } 

section.welcome ul.promo { margin: 0; padding:0; }
section.welcome ul.promo li { display: inline;  margin: 0; padding:0; }
section.welcome ul.promo li:last-child { margin: 0 0 0 0; }

section.welcome ul.promo li img { width: 32%; height:auto; padding:0; margin-right:1.5%; }
section.welcome ul.promo li:last-child img { margin-right:0; }

section.ourMission { margin: 15px auto; }
section.ourMission h2 { font-size: 1.5em; font-weight: 400; color:#2c2c2c;  } 
section.ourMission p  { font-size: 1.125em; color: #808080; line-height: 1.5; }

/* Home - last row */

section.lastRow { padding: 36px 0; border-top: 9px solid #f7f7f7; }
section.lastRow h2, section.ourMission h2 { font-family: 'Droid Serif', serif; font-style: italic; font-size:1.75em; font-weight:400; color: #332A87; margin-top:10px; }
section.lastRow .home-questionForm { width: 49%; height: auto; float:left; background: #e26737 url(../images/dotted-line.png) repeat-x 6px 8px; padding: 20px 15px; box-sizing: border-box; }
section.lastRow .home-questionForm iframe { width:100%;height:415px; }
section.lastRow .home-socialmedia { width: 46%; height: auto; float:right;  padding: 0; box-sizing: border-box; }
section.lastRow .home-socialmedia img { width: 75%; height: auto; }

/* cds blockquote */

.cds-quote { position:relative; font: 1em/1.5 'Droid Serif', serif; margin:0; padding: 15px; margin-bottom:20px; background: #fffae4; border-top: 2px dotted #e26737; border-bottom: 2px dotted #e26737;  }

blockquote { margin: 0 20px; }
	
blockquote::before { content:'\201c'; position:absolute; top:0px; left: 15px; }
blockquote::after  { content:'\201d'; position:absolute; bottom:0px;  padding-left: 8px; }

blockquote::before, blockquote::after  {  
	display: inline;
	font-family: sans-serif; color: #e26737; 
	font-weight: bold;
	font-size: 200%; }
	
	
/* ========================================== 
	CONTENT PAGE
========================================== */ 

section.pageTitlebar { font-style: italic; padding: 11px 0px 11px; position: relative; background: #f3eeee; border-bottom: 1px dashed #d6d5be; margin-bottom:40px; overflow:auto; }

.pageTitle { width:940px; margin:0 auto; }

.pageTitle h1 { 	float: left; color: #332A87; margin: 0; font-size: 1.5em; font-weight: 700; }

.breadcrumb  { float:right; text-align:right; }

.breadcrumb ul, .breadcrumb ul li { margin: 0;  font-size:.85em; }
.breadcrumb ul li { display:inline; }

.breadcrumb ul li a, .breadcrumb ul li a:visited { color: #332A87; text-decoration:none; padding: 0 0 0 20px; }
.breadcrumb ul li a:hover { color: #900; }

.breadcrumbCurrentNode, .breadcrumb a, .breadcrumb a:visited { margin: 0 10px;  font-size:.85em; }
.breadcrumb a:hover { color: #900; }

/* PAGE LAYOUTS */

.mainContent .LeftColumn-2colA  { float:left; width: 68%; padding-right:3%; border-right:1px dashed #d6d5be; box-sizing: border-box; min-height: 120px; }
.mainContent .RightColumn-2colA { float:right; width: 28%; min-height: 120px; }

.mainContent .LeftColumn-2colB, .mainContent .LeftNavColumn-2colC   { float:left; width: 28%; min-height: 120px; }
.mainContent .RightColumn-2colB, .mainContent .RightColumn-2colC    { float:right; width: 68%; padding-left:3%; border-left:1px dashed #d6d5be; box-sizing: border-box; min-height: 120px; }

img.pageimage { width:100%; height: auto; }
img.pageimage50 { width:50%; height: auto; }

.imgleft  { float:left; margin-right: 10px; }
.imgright { float:right; margin-left: 10px; }

.moreinfo { margin-top:30px; }

/* Staff page */

p.staffCol1, .staffCol1 { clear: left; float:left; width: 48%; margin: 1em 4% 2em 0; }
p.staffCol2, .staffCol2 { clear:right; float:left; width: 48%; margin: 1em 0 2em 0; }

.staffCol1 img, .staffCol2 img { float:left; margin: 0 10px 0 0; }

/* Get Notification Form */

aside .notification { 
	margin-bottom:30px;
	position: relative;
	overflow: auto;
	background: #FFFFFF;
	border-radius: 6px;
	color: #7E7975;
	border:1px solid #efefef;
	-webkit-box-shadow:  0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow:  0px 0px 5px 0px rgba(0,0,0,0.5); }
		
aside .notification h3 { font-size:1.35em; font-style:italic; color: #332A87; margin: 15px; }

/* LEFT NAVIGATION */

.LeftNavColumn-2colC { /*background: #f3eeee;  padding: 0; border-radius:5px;*/ }
.LeftNavColumn-2colC ul, .LeftNavColumn-2colC .leftNav ul { margin:0; padding:0; list-style-type:none; }

.LeftNavColumn-2colC ul li a, .LeftNavColumn-2colC .leftNav ul li a { display:block; padding: 0 5px; color:#000; background: #f3eeee; border-bottom: 1px solid #d6d5be; margin-top:1px; }

.LeftNavColumn-2colC ul li a:hover, .LeftNavColumn-2colC .leftNav ul li a:hover { background: #888; color:#fff; }

/* Horizontal links */

ul.horizontallinks { margin: 25px 0; padding:0; list-style-type:none; text-align:center; }
ul.horizontallinks li { display:inline; }
ul.horizontallinks li a { display: inline-block; padding: 5px 10px; margin: 0px 5px 15px 5px; background: #fffae4;
border: 1px solid #e2d1a4; border-radius: 5px; text-decoration: none; }
ul.horizontallinks li a:hover { color:#f9972a; border: 1px solid #f9972a; }


/* ===========================================
	GLOBAL NAVIGATION
============================================== */

nav#globalNav {
	clear: both;
	position:relative;
	padding: 11px 0 0 0;
	box-sizing: border-box;
	border-top: 1px solid #332a87;
	font-family: 'Droid Serif', serif; 
	z-index: 30; }

nav#globalNav::after { content:''; display:block; clear:both; }

nav#globalNav a.mobile_menu { 
	width: 32px; height: 32px; 
	background: #332a87  url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	position: absolute; top: 22px; right: 5%; margin-left: -16px;
	border-radius:5px;
	display:none; }

nav#globalNav ul { list-style:none; margin:0; padding:0; }
nav#globalNav ul > li:hover { background-color: #f9972a; }
nav#globalNav ul li:hover > ul { display: block; } /* hover rule overriding the rule to hide nested ul below */

nav#globalNav ul li a { 
	display: inline-block; 
	color:#332a87; 
	padding: 10px 20px; 
	text-decoration:none; 
	width:300px; 
	position:relative;  }
	
nav#globalNav ul li:nth-child(5) ul li a, nav#globalNav ul li ul li ul li a { width:150px; }

nav#globalNav ul > li > a, nav#globalNav ul > li > a:visited { color:#332a87; }
nav#globalNav ul > li:hover > a { color:#fff; }

nav#globalNav ul > li > ul > li > a { font-size:0.95em; }

nav#globalNav ul > li > ul > li:hover { background-color: #666; }
nav#globalNav ul > li > ul > li > ul > li:hover { background-color: #000; }

/*nav#globalNav ul li a:hover { background-color: #666; }*/

nav#globalNav ul ul { position: absolute; top: 100%; background-color: #f9972a; display:none; text-align:left; } /* hiding nested ul */

nav#globalNav ul ul li { position: relative; border-bottom: 1px solid #332a87 }
nav#globalNav ul ul ul li  { border-bottom: 1px solid #999; }

nav#globalNav ul ul ul { left: 100%; top:0px; background-color: #666;  }

nav#globalNav ul ul ul a { color:#fff !important; }

/* top level */

nav#globalNav > ul { text-align:center;  }
nav#globalNav > ul > li { display:inline-block; height: auto; }
nav#globalNav > ul > li > a { width: auto; padding: 12px 25px 16px 25px;  }

nav#globalNav a[aria-haspopup="true"]::after {
	content: '';
	display:block; width: 0px; height: 0px;
	position: absolute;
	top:16px; right:5px;
	/* css triangle */
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #fff; }

nav#globalNav >ul > li > a[aria-haspopup="true"]::after {
	left: 25px; right:auto;
	bottom: 6px; top:auto; 
	/* css triangle */
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #332a87; }

nav#globalNav >ul > li:hover > a[aria-haspopup="true"]::after {
		border-top: 4px solid #fff; }