/*
* CPLS Styles
* January 2014 - present
*/
/* Table of Contents
==================================================
	#
	#Site Styles
	#Elements
	#Floats and Aligns
	#Padding and Margins
	#Bands
	#Containers
	#Headers
	#Search Box 
	#Login Box 
	#Navs and Lists
	#Footers
	
	#Classes
	#Colors
	#Image Classes
	#Kid Classes
	#Font Classes
	#Page Styles	
	#Media Queries
	#Font-Face


/* #
================================================== */
	/*darkest purple: #000033;
	/*green: #006847;
	/*yellow #FFFF00;
	/*gray: #C8D1DD;
	/*water blue: #1A457C;
	/*red: #F20F0F;
	/*yves: #0033CC;
	/*pink :#EA077C;
	/*paleblue: #37A8E4;
	/*cream: #fcf8f0;
	/*dark: #09182b;
	
	/*neon green: #0bea07;
	/*neon aqua:  #07eae7;
	/*narnia green #7cea07;
	/*jewel green #07ea75
	/*neon purple: #7507ea;
	/*rose-pink: #CC3366;
	/*palest blue: #B7DFE9
	
	kids
	/*pink :#EA077C;
	/*paleblue: #37A8E4;
	
	teens
	/*pink: #ff25a5;
	/*bright-blue: #25a5ff;
	/*purple: #7f25ff;
	/*lime: #a5ff25;
	
	 
/* #Site Styles
================================================== */


/* #Elements
================================================== */

::selection {
	background: #FF0; 
	color:#000; /* Safari */
	}
	
::-moz-selection {
	background: #FFFF00; 
	color:#000; /*Firefox*/
	}

blockquote { 
	margin: 0 0 20px; 
	padding: 9px 20px 0 19px; 
	border-left: 1px solid #ddd; 
	}
	
dt {
	font-size: 17px;
	line-height: 24px;
	color: #000;
	font-style: italic;
	font-weight:bold;
	margin: 0 0 20px;
	padding: 9px 20px 0 19px;
	border: 1px solid #ddd;
	}
	
dd {
	margin: 0 0 20px; padding: 0 20px 0 19px;
	color:#000000; 
	}	

a:hover {
	text-decoration:none;
	color:#0FA0CE;
	}

.button.button-purple,
button.button-purple,
input[type="submit"].button-purple,
input[type="reset"].button-purple,
input[type="button"].button-purple {
  color: #FFF;
  background-color: #273691;
  border-color: #33C3F0; }
.button.button-purple:hover,
button.button-purple:hover,
input[type="submit"].button-purple:hover,
input[type="reset"].button-purple:hover,
input[type="button"].button-purple:hover,
.button.button-purple:focus,
button.button-purple:focus,
input[type="submit"].button-purple:focus,
input[type="reset"].button-purple:focus,
input[type="button"].button-purple:focus {
color: #FFF;
background-color: #273691;
border-color: #1EAEDB; }







/* #Floats and Aligns
================================================== */

.left {
	float:left;
	}

.right {
	float:right;
	}

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

.center {
	text-align:center;
	}

/* #Padding and Margins
================================================== */
	
.diez-derecha {
	padding-right:10px;
	}

.diez-izquierda {
	padding-left:10px;
	}

.right-margin {
	margin-right:10px;
	}
	
.left-margin {
	margin-left:10px;
	}

.add-top {
    margin-top:20px;
	}

.add-bottom {
    margin-bottom: 20px !important;
	}

.remove-bottom {
    margin-bottom:0;
	}


/* #Bands
================================================== */


/* #Containers
================================================== */

.container.complete {
	border: 1px; 
	border-color: #4f77ac; 
	border-style: solid;
	background-color:#fff;
	}

.shadowContainer {
	box-shadow: 10px 10px 5px #888888;
	}


/* #Headers
================================================== */

/*header#logo {}
	/*background: #ffffff url('http://www.mywater.com/cpl/_images/callouts/comic-callout-2.png') no-repeat;*/	             																	/*background: #ffffff url('http://www.mywater.com/cpl/_images/banners/pink-banner.png') no-repeat;*/
	background: #CCCCCC url('/cpl/_images/banners/banner12.png') no-repeat;
	/*height:205px;*/
	background-size: 100%;
	/*background: url("/ {/sprite.png") no-repeat 0 0;*/
	/*should create sprite with background  {, would help with media-query*/
   
#kidsHeader {
	background: #fff url('/cpl/_images/banners/kids_summer_banner_2016.png') no-repeat;
	background-size: 100%;
   }

#teensHeader {
	background: #fff url('/cpl/_images/banners/teen_summer_banner_2016.png');
	background-repeat:no-repeat;
	background-position:top center;
	background-size: 100%;
   }

#loginHeader {
	/*background: #f1892e url('/cpl/_images/banners/sunset-banner3.png') no-repeat;*/
	background: #f1892e url('/cpl/_images/banners/banner12.png') no-repeat;
	background-position:top left;
	background-size:100%;
}

/*h1.logo a {
	width: 550px;
	height: 150px;
	display: block;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	border-bottom:none;
	}*/


/* #Search Boxes 
================================================== */

form#frmSearch {
	/*margin-top:20px;*/
	}



/* Larger than tablet */
@media (min-width: 750px) {
	form#frmSearch .button,
form#frmSearch button,
form#frmSearch input[type="submit"],
form#frmSearch input[type="reset"],
form#frmSearch input[type="button"],
form#frmSearch input[type="text"] {
	margin-top:45px;
}

}


/*form#frmSearch input[type="text"] {
/*	width:130px;}
*/

@media (min-width: 550px) {
form#frmSearch .button,
form#frmSearch button,
form#frmSearch input[type="button"] {
margin-top:5px;
}
	}

form#frmSearch img {
	/*margin:.1rem .5rem;*/
	
}
	}
	
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}


	
/*form#frmSearch fieldset {
padding: 10px;
margin-bottom: 0px;
	}*/

/*form#frmSearch input[type="text"] {
	display: inline-block;
	margin: 0 10px;
	width:170px;
	}*/
	
/*form#frmSearch input[type="image"] {
	display:inline-block;
	margin-top:6px;
	}*/

/*form#frmSearch input[type="button"] {
	display:inline-block;
	margin-bottom:0px;	
}*/

/*form#frmSearch label {
	display:inline;
	color:#fff;
	padding-right:5px;
	}*/

/*form#frmSearch span {
	color:#000;
	}*/

/*form#frmSearch p.a:link {
	color:#000;
	text-align:right;
	}*/

/*form.sidebyside {
	margin-bottom: 0px;
}*/

/*form.sidebyside input[type="text"]{
 display:inline-block;
}*/

	
/* #Login Box
================================================== */

/*#loginBox {
	padding: 0px 30px 7px 20px;
	/*margin-right: 40px;
	}*/

#loginBox form {
	margin:0;
	}
	
#loginBox fieldset {
	margin-bottom: 0px;
	}

#loginBox input#strSearchInput {
	display: inline-block;
	margin: 0;
	}
	
/*#loginBox input[type="image"] {
	display:inline;
	padding-top:0;
	}*/

#loginBox input[type="submit"] {
	display:inline;
	margin-bottom:0px;	
}

#loginBox input[type="password"] {
	display:inline;
	margin-bottom:0px;	
}

#loginBox label {
	display:inline;
	color:#fff;
	padding-right:5px;
	}

#loginBox span {
	color:#fff;
	}

#formMain {
	width:210px;
	}

/* #Navs and Lists
================================================== */

 ol.alpha {list-style-type: lower-alpha;}
 ul.circle {list-style-type:circle;}
 
 div.md-content ul.circle {padding-left:1.5rem;}
 
hr.thick {
	height:5px;
	border:none;
}

/* #headerNav
================================================== */

#headerNav {
	margin-top: 0;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0;
	background-color: #37A8E4;
    }

nav#headerNav ul {
    margin: 1rem 0;
	}

#headerNav ul li {
	display: inline;
	margin: 0 10px 0 0;
	font-weight: bold;
	font-size: 16px;
    letter-spacing:0.5px;
	}

#headerNav ul li a {
	text-decoration: none;
	color: white;
	}
	
#headerNav ul li a:hover {
	color:black;
	border-bottom:none;
	}

/* #textNav
(used on Sunshine State pages & Databases)
================================================== */
.textNav ul li {
	display: inline-block;
	/*IE 6 & 7 Hack*/
  	zoom: 1;
 	display: inline;
	line-height:1.7;
	font-size:1.5em;
	}

.textNav ul li a:hover { color:#000;}	

/* #hoursNav
================================================== */

.hoursNav ul {
    list-style: none;
	}

.hoursNav ul li {
	text-decoration: none;
	line-height: 1em;
	}

.hoursNav a, .hoursNav a {
	text-decoration: none;
    font-weight: bold;

	}

/* #sunshineNav
================================================== */



/* #teenNav
================================================== */
ul.teenNav a:link {
	padding-right:.5em;
	font-size:1.75em;
	font-family: 'Averia Sans Libre', cursive;
	color:#1a457c;
	text-decoration:none;
	border-bottom:none;
	}

ul.teenBookNav a:link {
	font-size:1.5em;
	line-height:1.5em;
	font-family: 'Averia Sans Libre', cursive;
	color:#1a457c;
	border-bottom:none;
	}

ul.kidsNav {padding:1em;}

ul.kidsNav a:link {
	color:#1a457c;
	font-size:1.75em;
	font-family: 'Coming Soon', Georgia, serif;
	text-decoration:none;
	border-bottom:none;
	line-height:1.05em;
	font-weight:bold;
	}

nav.refNav {
	background-color:#C7DCE3;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
	}

ul.refNav {
	padding:1em;
	list-style-type:none;
	}

ul.refNav a {
	font-size:1.5em;
	color:#1a457c;
	text-decoration:none;
	border-bottom:none;
	line-height:1.05em;
	}

ul.refNav li a:hover {
	color:#000;
}

ul.readNav {
	padding:1em;
	list-style-type:none;
	}

ul.readNav a {
	/*padding:0.5em;*/
	font-size:1.5em;
	color:#1a457c;
	text-decoration:none;
	border-bottom:none;
	line-height:1.05em;
	}

/*list-links is used on databases.asp*/

p.list-links a, p.list-links a:hover {
    font-size: 44px;
    font-weight: normal;
    line-height: 50px;
	}
	
/* #Tables
================================================== */

table.info td, table.info thead th {text-align:center;}

table.info tr:nth-of-type(even) {background:#C7DCE3;}

/*table.info th:nth-of-type(2n+2), table.info td:nth-of-type(odd) {
	background:#37A8E4;
	color:white;
	}*/

/* #Footers
================================================== */

.navFooter, .cityFooter {
	background:#c7dce3;
	padding-top:15px;
	}

.navFooter a, .cityFooter a {
	text-decoration: none;
    color: #096886;
	}

.cityFooter img {
	float:left;
	border: 1px #4f77ac solid;
	margin-right: 15px;
	}	

.cityFooter p {
    color: #333333;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: .75em;
	line-height:1.4em;
	}

.navFooter ul, .cityFooter ul {
    list-style: none;
	}
	
.cityFooter a {
	font-weight:normal;
}

/* #Classes
================================================== */

.rounded { 
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
	}

.opaque {
	background: url('/cpl/_images/bg/opaque.png') repeat;}

.opaqueBubble {background: url('/cpl/_images/bg/opaque.png') repeat;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
	}

.newsArticle {
	background:#fbfefe;
	padding:5px;
    margin-bottom: 10px;
    border:5px solid #c7dce3;
    border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	}
	
.newsArticleRed {
	background:#fbfefe;
	padding:5px;
    margin-bottom: 10px;
    border:15px dotted #FF0709;
    border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	}
	
.newsArticleYellow {
	background:#fbfefe;
	padding:5px;
    margin-bottom: 10px;
    border:15px dotted #FEF709;
    border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	}

.newsArticleBlue {
	background:#fbfefe;
	padding:5px;
    margin-bottom: 10px;
    border:15px dotted #02ADE6;
    border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px;
	}
	
/* Larger than mobile */
@media (min-width: 400px) {
    .newsArticle {
	min-height: 350px;
	border-radius:15px; 
	-moz-border-radius:15px; 
	-webkit-border-radius:15px; 
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .newsArticle {
    min-width:350px;
    margin-left:2%;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {
    .newsArticle {
    min-width:280px;
	}
}

.dynamic {
	font-size:.9em;
	color:#F20F0F;
	margin:0;
	}

.callout {
	height:300px;
	margin-bottom:6px;
	padding:6px;
	}
	
div.callout a {color:#FFFF00;}

.feature {
	height:193px;
	width:391px;
	}

.bookshelf {padding-left:20px;}

.ligne {
	border-top: thin gray solid;
	padding-top:20px;
	}

.subtitle {
	font-size:0.9em;
	color:#09182B;
	}

.subtitle a {
	color:#1a457c;
	text-decoration:none;
	}

.slideshow {
	padding:0;
	margin:0;
	}

/*used on databases.asp*/
.help-links {float:right;}

.booklist p a, .booklist li a {
	font-style: italic;
	color:#1a457c;
	font-size:1.2em;
	}

.readerWidget iframe {max-width:100%;}

.clip-me {  
  clip-path: inset(20px); /* or "none" */
  /* values are from-top, from-right, from-bottom, from-left */
} 

iframe#map {width:inherit;}

.printable:before {
    background: none repeat scroll 0 0 #222222;
    color: #eeeeee;
    content: "Printable";
    font: 1em Helvetica Neue,sans-serif,Droid Sans Fallback;
    left: -2.25em;
    padding: 0.15em 0.25em;
    position: absolute;
    top: 0.2em;
    transform: rotate(-5deg);
	}

/* #Colors
================================================== */

.blue-gradient {
  height: 115px;
  background-color: #1a457c;
  background-image:
    linear-gradient(
      #1a457c, #fff
    );
}

.bluegradient-tall {
  height: 200px;
  background-color: #1a457c;
  background-image:
    linear-gradient(
      to bottom, 
      #1a457c, #fff
    );
}


.tall-gradient {
  height: 230px;
  background-color: red;
  background-image:
    linear-gradient(
      to bottom, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 85%,
      #d7f0a2 15%,
      #fffdc2 85%
    );
}

.expanding-gradient {
  height: 100%;
  background-color: red;
  background-image:
    linear-gradient(
      to bottom, 
      #fffdc2,
      #fffdc2 15%,
      #d7f0a2 85%,
      #d7f0a2 15%,
      #fffdc2 85%
    );
}
.yellow {background-color: #FFFF00;}

.yellow.blue-text {padding:3px;}

.yellow-text {color:#F3F315;}

.soft-yellow {background-color:#f9f75d;}

.soft-orange {background-color:#FBBF66;}

.orange {background-color:#ff6500;}

.orange-text {color:#ff6700;}

.blue-text {color:#1a457c;}

.teal {background-color:#00B7D1;}
	
.gray {background-color: #c7dce3;}

.grayBox {
	background-color: #E5E5E5;
	padding: 10px;
 	border:1px solid #999;
 	margin: 0 0 20px 0;
	}

.paleblueBox {
	background-color:#37A8E4;
	padding: 10px;
 	border:1px solid #999;
 	margin: 0 0 20px 0;
	}

h3.paleblue, h4.paleblue, h2.blue, h3.blue, h4.blue {
	background: #37A8E4;
	color: #FFFF00;
	padding: 5px;
	margin-top: 20px;
}
    
h3.paleblue a, h4.paleblue a, h3.blue a, h4.blue a {color:yellow; text-decoration: none;}
.bluebox {border:10px solid #37A8E4; padding:5px;}


.magenta-text {color:#CE3392; font-weight:bold;}
	
.green {background-color:#4CCC4C; color:#fff;}
div.green h1, div.green h2, div.green h3, div.green h4, div.green h5, div.green p, div.green p.subtitle {color:#fff;}
.green-text {color:#006847;}
.green-text a {color:#006847;}
div.green h1 a {color:#fff;}


.red {background-color:#BF1E2E; color:#fff;}
.red p {color:black;}
.red-text {color:#BF1E2E;}
.redbox {border:10px solid #BF1E2E; padding:5px;}

.white {background-color:#ffffff;}
.white-text {color:#ffffff;}
.strong-white-text {color:#ffffff;font-weight:bold;}

.cream {background-color:#fcf8f0;}

.paleblue {background-color:#37A8E4;}
	
.pink {background-color:#EA077C; color: #fff;}

.yves {background-color:#0033CC; color:#fff;}
	
.neon-green {background-color: #0bea07;}

.neon-aqua {background-color: #07eae7;}

.narnia-green {background-color: #7cea07;}

.jewel-green {background-color:#07ea75;}

.neon-purple {background-color: #7f25ff;}

.lime {background-color:#a5ff25;	}

.bright-blue {background-color:#25a5ff; color:#fff;}

.rich-raisin {color:#250e15;}

.happy-plum {
	background-color:#70414C; 
	color: #ffffff;
	}

.bone {background-color:#FBF5E4;}

/* #Image Classes
================================================== */

.imageStrip .two.columns {
	margin-left:2%;	
	}

.cover {
	height: 130px;
	width: 88px;
	margin-right: 5px;
	}

.smallCover {
	height: 65px;
	width: 44px;
	}

.largeCover {
	Height:195px;
	Width:132px;
	}

.snapshot {
    border: 1px solid #666666;
    padding: 10px 10px 60px 10px;
    }

.border-box {border 5px solid #1a457c;}

.shadowbox {box-shadow:2px 3px 2px #aaaaaa;}
.shadow {box-shadow: 0 0 10px #444444;}

.tiltRight {
	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	}

.tiltLeft {
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	margin-right:5px;
	}

div.imageGrid div.imageContainer, 
div.imageGrid div.imageContainer120,
div.imageGrid div.imageContainer140, 
div.imageGrid div.imageContainer150, 
div.imageGrid div.imageContainer200,
div.imageGrid div.imageContainer300 {
	margin:20px 0 0 20px;	
	}

.imageContainer {
	width:100px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}

.imageContainer120 {
	width:120px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}	
	
.imageContainer140 {
	width:140px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}

.imageContainer150 {
	width:150px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}

.imageContainer200 {
	width:200px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}

.imageContainer300 {
	width:300px;
	float:left;
	background-color:inherit;
	margin: 1px 1px 5px 0;
	margin:0 auto;
	}

.caption {
	background:inherit;
	text-align:center;
	padding: 1px;
	}

.container div.caption a, .container div.caption a:visited{
	font-style: normal;
	font-weight: normal;
	text-decoration:none;
}

div.caption h3, div.caption h4 {
	text-align:center;
	margin:.3em 0;
	line-height: 1;
	}

.fit-width {
	max-width:100%;
	max-height:auto;
	}

.20-margin {margin-left:20px;}

/* #Kid Classes
================================================== */

div.blog td a {
	font-family: 'Coming Soon', serif;
	color:#3a5cc2;
	font-size:20px;
	line-height:1.2em;
	font-weight:bold;
	border-bottom:none;
	}

h2.kids {
	color:#1a457c;
	font-weight:bold;
	font-family: 'Coming Soon', serif;
	}

h3.kids {
	font-weight:bold;
	font-family: 'Coming Soon', serif;
	color:#00B7D1;
	}

.kids a {
	border-bottom:none;
	}

div.blog li.rss-item a {
	color:#1a457c;
	font-size:20px;
	line-height:1.2em;
	font-family: 'Coming Soon', serif;
	}	

/* #Font Classes
================================================== */
.teens {
	font-family: 'Averia Sans Libre', cursive;
}

 .manga {
	 font-family: 'Rock Salt', cursive;
 }
 
 .comic {
	font-family: 'Bangers', cursive;
	}

.manga2	{
	font-family: 'Trade Winds', cursive;
	color:#CE3392; font-weight:bold;
	}

li.comic {
	font-size:2em;
	line-height:1em;
	}

h1.comic {
	font-size:6em;
	line-height:1em;	
	}

article h3.center a {
    text-transform: none;
}


.button .button-primary .strong-white-text .bigbutton {
font-size:x-large;	
}