@charset "utf-8";
/* CSS Document */
/* Copyright 2015 The Counseling Consultant - All Rights Reserved */

/************************************************/
/*  RESET CSS                                   */
/************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*************************************************************************************/
/*  General																																					 */
/*************************************************************************************/
.fr {float: right;}
.fl {float: left;}
.cf {clear:both; height:0; font-size: 1px;line-height: 0px;}
.cr {clear:right;}
.rp {position:relative;}
.ap {position:absolute; top:0px; left:0px;}
.nc {cursor: default;}
.bo {font-weight:bold;}
.w100 {width:100%;}
.m30 {margin-top:30px;}
.accent {color:#648f2d; font-weight:bold;}
.center {text-align:center;}

a {text-decoration:none;}

h1 {font-family: "adonis-web",serif; font-size:93px; text-align:center; color:#b89f70; padding-top:0px; text-shadow:1px 1px 0px rgba(0,0,0,0.75);}

h2 {font-family: "proxima-nova",sans-serif; font-size:37px; text-align:center; color:#73564c; margin-top:-12px;}

h3 {font-family: "proxima-nova",sans-serif; font-size:35px; text-align:left; color:#fff2d9;}

h4 {font-family: "proxima-nova",sans-serif; font-size:25px; text-align:left; color:#73564c;}

body {
	background-color:#fff2d9;
	font-family: "proxima-nova",sans-serif; 
	font-weight:400;
	text-align:justify; 
	/*color:#73564c;*/
	color:#736346;
}

.justify {color:#fff2d9;}

#container {
	position:relative;
	margin-left:auto; 
	margin-right:auto; 
}

#logo {margin:20px auto 0px auto; display:block;}

.subject {margin-top:20px;}

.subject h3 {
	width:100%;
	padding:10px 0px; 
	background-color:#b89f70; 
	border-radius:5px; 
	box-shadow:1px 1px 1px rgba(0,0,0,0.75);
	text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  cursor: pointer;
}

.subject h4 {
	margin-top:10px;
}

.arrow {
	display:inline-block;
	margin:0px 10px 3px 20px;
	width:16px;
	height:16px;
}

.closed	{background-image:url(../images/closed.jpg);}
.open 	{background-image:url(../images/open.jpg);}
	
.detail {position:relative; width:90%; margin-top:12px; margin-bottom:20px; padding-left:5%; padding-right:5%;}

.detail a {color:#648f2d; text-decoration:underline;}
.detail a:visited {color:#7db337;}

.detail p {position:relative; margin-top:5px; font-size:16px; line-height:18px;} /* increase legibility */

.detail .top {position:absolute; bottom:30px; right:40px; font-size:14px; opacity:0.5; color:#8c702d;}
.detail .top:hover {opacity:1;}
.detail .top:visited {color:#8c702d;}

.column {float:left; width:47.5%; margin-right:4%; display:inline-block;}

.column.single {width:100%; margin-right:0%;}

.column.last {margin-right:0px;}

.column li {margin:5px 0px 5px 30px; list-style-type:circle; text-align:left;}

.thumbnail	{display:block; width:100%; margin-top:30px; margin-bottom:20px; text-align:center;}
.thumbnail img {border-radius:3px; box-shadow:1px 1px 1px rgba(0,0,0,0.5);}

.smallPic {float:right; width: 47.5%; margin-left: 4%; margin-bottom:20px; text-decoration:none; text-align:center;}
.smallPic img {width:100%; border-radius: 3px; box-shadow:1px 1px 10px rgba(0,0,0,0.3);}

.footer {
	width:100%;
	height:330px;
	margin-top:70px;
	text-align:center;
	background-image:	url(../images/footer.jpg);
}

.footer h2 {font-family: "adonis-web",serif; font-size:60px; text-align:center; color:#b89f70; padding-top:90px; text-shadow:1px 1px 2px rgba(0,0,0,0.75);}
.footer h3 {font-family: "proxima-nova",sans-serif; font-size:24px; text-align:center; color:#b89f70; margin-top:-8px;}

.copyright {margin-top:145px; font-size:10px; color:#b89f70;}


/**************************************/
/* Icons                              */
/**************************************/

.minutes, .agenda {display:inline-block; min-height:41px; padding-left:36px; margin:0 auto; padding-top:20px; background: left center no-repeat; text-align:left;}

.minutes {background-image:url(../images/morro-hills-community-services-district-icon-minutes.png)}
.minutes:hover {background-image:url(../images/morro-hills-community-services-district-icon-minutes-hover.png);}

.agenda {background-image:url(../images/morro-hills-community-services-district-icon-agenda.png)}
.agenda:hover {background-image:url(../images/morro-hills-community-services-district-icon-agenda-hover.png);}


/**************************************/
/* Banners                            */
/**************************************/
#banners {
	position:relative;
	z-index:1;
	width:100%;
	overflow:hidden;
}

#banners a {text-decoration:none;}

#banners .imgCont {
	position:absolute; 
	z-index:2; 
	top:0%; 
	width:95%; 
	margin-left:2.5%; 
	margin-right:2.5%; 
	border-radius: 3px; 
	overflow:hidden; 
	box-shadow:1px 1px 10px rgba(0,0,0,0.3);   
	background-position:center; 
	background-repeat:no-repeat; 
}

#banners p {float:right; margin-right:2.5%; font-size:20px; font-variant:small-caps;}
#banners p:hover {color:#9a2a52;}

#banner-Welcome p {margin-top:70px;}
#banner-Signup p {margin-top:91px;}
#banner-Maintenance p {margin-top:91px;}

#banner-Welcome, #banner-Signup, #banner-Maintenance {
	position:absolute;
	top:0%; 
	display:none;	
	width:100%;
	height:100%;
	text-align:center;
}

#banner-Welcome {display:block;}    /* make first banner display */

#banners h1, #banners h2 {
	position:relative; 
	z-index:2; 
	width:auto;
	padding:3px 5% 6px 5%;	
	box-shadow:1px 1px 1px rgba(0,0,0,0.3); 
	color:white;
	text-shadow:2px 2px 2px rgba(0,0,0,0.6); 
	border-radius:3px;
}

#banners h1 {float:left; padding-bottom:8px; margin-top: 3em; font-size:100px; font-family: "proxima_novathin", sans-serif; background-image:url(../images/morro-hills-community-services-district-banner-tile-gold.png);}
#banners h2 {float:right; width:auto; margin-top: -0.2em; font-size:77px; font-style:italic; font-family: "proxima_novaregular", sans-serif; background-image:url(../images/morro-hills-community-services-district-banner-tile-green.png);}


/************************************************/
/* Bubbles                                      */
/************************************************/

#bubbles {
	width:55px;
	height:15px;
	margin:10px auto;
}	

#bubble-1, #bubble-2, #bubble-3 {
	float:left;
	width:15px;
	height:15px;
	display:inline;
	margin-right:5px;
}

#bubble-3 {margin-right:0px;}

.bubble-on   {background: url(../images/morro-hills-community-services-district-bubble-on.png);}
.bubble-off  {background: url(../images/morro-hills-community-services-district-bubble-off.png);}



/**************************************/
/* Forms                              */
/**************************************/

.button {
	display:inline-block;
	width:auto; 
	height:auto; 
	padding:10px; 
	margin-top:10px;
	margin-left:1.5%; 
	font-size:18px; 
	-webkit-appearance: none; 
	box-shadow:1px 1px 1px rgba(0,0,0,0.5); 
	color:#fff2d9; 
	background-color:#b89f70; 
	border-radius:5px; 
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
	border-width:0px; /* get rid of default formatting */
}

.button:hover {background-color:#ccb07c;}

.field {float:left; width: 97%; margin-left: 1.5%; margin-right: 1.5%; }

.field label {
	width:100%; 
	margin-top:10px; 
	margin-bottom:5px; 
	display:block;
}

.field label span, .red {color:red;}

.field input, .field textarea {
  box-sizing: border-box;
	width:100%; 
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px; /* padding left & right pushes to over 100% */
	padding-right:5px;
	margin-top:5px; 
	margin-bottom:5px; 
	display:block;
	background-color:#fffbf5;
	box-shadow:-1px -1px 0px rgba(0,0,0,0.4);
	border-radius:3px;
  border:1px solid rgba(0,0,0,0.2);
	color:#73564c;
	/*
	-webkit-appearance: none; keep iOS from messing up forms ... but kills radio buttons
	*/
}

.field textarea {
	outline:none;
	overflow:auto; /* remove IE scrollbar until needed */
	resize:none;
}

.field textarea:focus, .field input:focus, .field select:focus {border:#ff9100 dotted 1px; outline:none;}

.field option, .field select {
  box-sizing: border-box;
	width:100%;
	padding-top:3px; 
	padding-bottom:3px; 
	padding-left:5px; /* padding left & right pushes to over 100% */
	padding-right:5px;
	background-color:#fffbf5;
	box-shadow:-1px -1px 0px rgba(0,0,0,0.4);
	border-radius:3px;
  border:1px solid rgba(0,0,0,0.2);/*#25801a;*/
	font-size:15px;	
	color:#73564c;
}

.isRadio {margin-bottom:10px;}
.isRadio input {display:inline; width:13px; box-shadow:none;}
.isRadio input:focus {outline:none;}

.thanks {display:none; width:30%; margin:80px auto; text-align:center;}
.thanks h4 {font-size:50px; text-align:center;}
.thanks p {line-height:18px;}

	
	
/**************************************/
/* MailChimp Signup Form              */
/**************************************/

.field.f23C {width: 66%; margin-left: 17%; padding-left: 0; padding-right: 0;}

.field.f12L, .field.f12R {width: 47%;}

.field.f13L, .field.f13M, .field.f13R {width: 30.33%;}

.field.f23R {width: 63.66%;}

.field.f13L2, .field.f13M2, .field.f13R2 {width: 13.66%;}

.field.f14L {width:22%;}
.field.f34R {width:72%;}

.field.f34L {width:72%;}
.field.f14R {width:22%;}


/**************************************/
/* Contact Us Form                    */
/**************************************/
.phone {font-family: Arial, sans-serif}
#emailForm {float:left; width:70%; margin:15px 15% 50px 15%;}
#emailForm h4 {font-size:30px;}
#emailForm p {margin-bottom:10px;}

#emailBody.field textarea {height:200px;}
#emailAddr {width:48%; margin-right:4%;}
#emailTarget {width:48%;}

#emailButton {position:relative;}
#emailBusy {display:none; position:absolute; left:129px; top:13px; width:16px; height:16px; background-image:url(../images/ajaxload-info-green.gif);}

#emailThanks.thanks {float:left; width:100%; margin:25px auto;}


/**************************************/
/* News                               */
/**************************************/
.news {margin-top:20px; margin-bottom:40px; }
.news img {width:100%; border-radius:5px; box-shadow:1px 1px 1px rgba(0,0,0,0.75);}
.news .headline {margin-top:10px; font-size:30px; color:#736346;}
.news .dateline {color:#648f2d;}
.news .thumbnail img {width:auto;} /* undo .news img width 100% */

sup {vertical-align:text-top;}

.news sup {font-size:11px;}
.news .headline sup {font-size:20px;}


/**************************************/
/* News Archive                       */
/**************************************/
.newsArchive h4 {margin-top:30px;}
.archive {float:left; width:33%;}
.archive .thumbnail {margin-top:20px;}



/**************************************/
/* Welcome                            */
/**************************************/

#banner {
	position:relative;
	width:90%; 
	margin-left:5%;
	height:125px; 
	margin-top:40px;
	margin-bottom:60px;
	padding-bottom:20px; 
	border-top: 1px #e5d9c3 solid; 
	border-left: 1px #e5d9c3 solid; 
	border-bottom:40px #60533c solid; 
	border-radius:5px;	
	box-shadow:1px 1px 1px rgba(0,0,0,0.75); 
	background-color:#f2e6ce;
}

#bannerImg {float:left; width:20%; margin-top:-103px; margin-right:3%;}

#banner p {float:left; width:74%; margin-top:10px;}

#banner h2 {float:left; margin-top:20px; font-family: "adonis-web",serif; font-size:36px; color:#736346; /*text-shadow:1px 1px 0px rgba(0,0,0,0.75);*/}

#kill {position:absolute; height:25px; width:25px; right:8px; top:8px;}


@media only screen
and (min-width : 1000px) {

	.b1000 {display:block;}
	.i1000 {display:inline;}
	.ib1000 {display:inline-block;}
	
	#viewport {width:1000px;}

   /* Adjust widths of main structures */
	#container {width:1000px;}	

	.detail .imgCont, #banners .imgCont {height:460px;}
	#banners {height:470px; margin-top:30px;}

	#banner-Welcome 			.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-welcome-1000.jpg);}
	#banner-Signup 				.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-paver-1000.jpg);}
	#banner-Maintenance 	.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-road-1000.jpg);}

	
}


@media only screen
and (min-width : 768px)
and (max-width : 999px) {

	.b768 {display:block;}
	.i768 {display:inline;}
	.ib768 {display:inline-block;}
	
	#viewport {width:768px;}

	/* Adjust widths of main structures */
	#container {width:748px;}

	.detail .imgCont, #banners .imgCont {height:351px;}
	#banners {height:360px; margin-top:20px;}

	#banner-Welcome 			.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-welcome-768.jpg);}
	#banner-Signup 				.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-paver-768.jpg);}
	#banner-Maintenance 	.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-road-768.jpg);}
}


@media only screen
and (min-width : 480px)
and (max-width : 767px) {
	
	.b480 {display:block;}
	.i480 {display:inline;}
	.ib480 {display:inline-block;}

	#viewport {width:480px;}
	
	/* Adjust widths of main structures */
	#container {width:460px;}
	h1 {font-size:67px;}
	h2 {font-size:27px; margin-top:-8px;}
	.column {width:100%; margin-right:0px;}	
	.footer {height:280px;}
	.footer h2 {font-size:44px;}
	.footer h3 {font-size:18px; margin-top:-6px;}
	.copyright {margin-top:100px;}
	
	.field.f12L, .field.f12R, .field.f13L, .field.f13M,	.field.f13R, .field.f23R, .field.f14L, .field.f34R, .field.f14R {width: 100%; margin-right: 0%;}

	#emailSubject, #emailBody, #emailAddr, #emailTarget	{width:100%; margin-right:0%;}
	#emailForm {float:left; width:80%; margin:20px 10% 50px 10%;}
	
	.detail .imgCont, #banners .imgCont {height:216px;}
	#banners {height:225px; margin-top:15px;}
	
	#banner-Welcome 			.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-welcome-480.jpg);}
	#banner-Signup 				.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-paver-480.jpg);}
	#banner-Maintenance 	.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-road-480.jpg);}
	
	.smallPic {float:right; width: 100%; margin-left: 0%;}
}


@media only screen
and (max-width : 479px) {

	.b320 {display:block;}
	.i320 {display:inline;}
	.ib320 {display:inline-block;}
	
	#viewport {width:320px;}
	
	#logo {width:170px;}
	#logoH2 {margin-top:-5px;}

	
	/* Adjust widths of main structures */
	#container {width:300px; margin-top:20px;}
	h1 {font-size:44px; margin-top:10px;}
	h2 {font-size:18px; margin-top:10px;}
	h3 {font-size:24px;}
	.arrow {margin-bottom:0px;}
	.column {width:100%; margin-right:0px;}	
	.footer {height:280px;}
	.footer h2 {font-size:40px;}
	.footer h3 {font-size:16px; margin-top:-5px;}
	.copyright {margin-top:100px;}
	
	.field.f12L, .field.f12R, .field.f13L, .field.f13M,	.field.f13R, .field.f23R, .field.f14L, .field.f34R, .field.f14R {width: 100%; margin-right: 0%;}

	#emailSubject, #emailBody, #emailAddr, #emailTarget	{width:96%; margin-right:0%;}
	#emailForm {float:left; width:90%; margin:20px 5% 50px 5%;}

	.detail .imgCont, #banners .imgCont {height:320px;}
	#banners {height:330px; margin-top:15px;}
	
	#banner-Welcome 			.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-welcome-320.jpg);}
	#banner-Signup 				.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-paver-320.jpg);}
	#banner-Maintenance 	.imgCont {background-image:url(../images/morro-hills-community-services-district-banner-road-320.jpg);}
	
	.smallPic {float:right; width: 100%; margin-left: 0%;}
}