/*******************/
 /* Page Formatting */
/*******************/

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
  background: #d1f4ff; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, white, white, #d1f4ff, white); /* Safari */
  background: -o-radial-gradient(circle, white, white, #d1f4ff, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, white, white, #d1f4ff, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, white, white, #d1f4ff, white); /* Standard syntax */
  line-height: 1.5;
}
#mainbody {
	background-color: #ffffff;
	padding: 40px;
	box-shadow: 10px 10px 5px #b1d4df;
	outline-style: solid;
	outline-width: 1px;
	outline-color: #a7a9ab;
}

#content {
	margin-top: 0px;
	margin-bottom: 0px;
    overflow: hidden;
    position: relative;
    width: 100%;
	padding-left:15px;
	
}

@media print
{
	#crisfield, #princessanne, #ewell, #searchbox, .footer1, .footer2 {display:none;}
	a[href]:after {content: none !important;}
	table.timesheet {font-size:10px;page-break-after: always;}
	table.last_timesheet {font-size:10px;}
	
}

  /**********/
 /* Header */
/**********/

/* Logo and locations */

div.logo {
	height:100px;
	margin-bottom:10px;
	
}

img.logo {
	height:100px;
}	

div.library {
	padding:0;
}

/* Break forces hours to wrap at specified widths in mobile version */

br.hours {
	display:none;
}

div.searchbox {
	margin-left:4.166666667%;
	padding:0;
}

div.powerpac {
	margin-top:0;
	padding-top:0;	
}

div.announcement {
	border-radius: 25px;
	border: 2px solid #2c71d0;
	background: #d1f4ff;
	padding: 10px;
	width: 100%;
	margin-bottom: 20px;
}

/* Menus */

#mobilelocations {
	display:none;
}
	
#searchform {
		margin-top:0
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.navbar-dropdown:hover,
.dropdown-item:hover,
.submenu-item:hover,
.button:hover
.navbar-dropdown:focus,
.dropdown-item:focus,
.submenu-item:focus,
.button:focus
 {
	background: rgba(209, 244, 255, 0.5)
}

.navbar-dropdown:active,
.dropdown-item:active,
.submenu-item:active,
.button:active {
	background: rgba(44, 133, 208, 0.5)
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > .open > a:hover,
.navbar-default .navbar-nav > .open > .open > a:focus,
.button:focus {
    color: #000;
    background: rgba(44, 133, 208, 0.5);
	font-weight: 600;
}

.navbar-default .navbar-nav > li > a,
.dropdown-menu > li > a   {
	color: #333333;
	text-decoration: none;
}

  /**************/
 /* Index Page */
/**************/

/* Carousel */

#carousel,
 {
	display: inline;
	height: 300px;
}

.carousel-indicators {
  bottom:-30px;
}

.carousel-inner {
   margin-bottom:50px;
}

.carousel-indicators li {
  background-color: #999;
  background-color: rgba(70,70,70,.25);
}

.carousel-indicators .active {
  background-color: #444;
}
	.carousel-control.left, .carousel-control.right {
    background-image: none
}

.carousel-inner > .item > a > img {
	height:420px;
	width: 100%;
}
	
/* Program calendar */

#programs {
	
	font-size: small;
	padding: 10px;
	float: right;
	border: 1px solid #a7a9ab;
	height: 250px;
	margin-bottom:50px;
    
    position: absolute;
    right: 0;
    top: 0;
}

/* Ad shuffle */

div.shuffle { 
    width:100%;
	height: 150px;
	padding-left:5%;
	margin-bottom:10px;
	position: relative;
}

.shuffle > div {
     width:30%;
      
}

.shuffle-left {
    float:left;
    margin-left:0px;
} 

.shuffle-center {
    margin: 0 auto;
}

.shuffle-right {
    position:absolute;
    top:0;
    right:0;
} 

div.shuffle > div > img { height:150px;}

  /****************/
 /* Site Content */
/****************/

/* General content */

a {
	text-decoration: underline;
}

/* Images */

/* Left */

.img-lt {
    float:left;
    margin-right:20px;
	margin-bottom:20px;
	height: 200px;
	display:block;
} 

/* Right */

.img-rt {
    float:right;
    margin-left:20px;
	margin-bottom:20px;
	height: 200px;
	display:block;
} 

/* Banner */

.img-banner {
	    float:right;
    margin-left:20px;
	margin-top:20px;
	margin-bottom:20px;
	max-width:100%;
	height:auto;
	display:block;
}

/* Image rows */

div.imgrow { position:block;
    width:100%;
	padding-left:5%;
}

div.imgrow > div {
     width:30%;      
}

.imgrow-left {
    float:left;
    margin-left:0px;
} 

.imgrow-center {
    margin: 0 auto;
}

.imgrow-right {
    position:absolute;
    bottom:0;
    right:0;
} 

div.imgrow > div > img {
	max-height:200px;
	width:auto;
}

/* Horizontal rule (e.g., database pages) */

hr.bar {
  -moz-border-bottom-colors: #2c71d0;
  -moz-border-image: none;
  -moz-border-left-colors: #2c71d0;
  -moz-border-right-colors: #2c71d0;
  -moz-border-top-colors: #2c71d0;
  border-color: #2c71d0;
  -moz-use-text-color: #2c71d0;
  border-width: 1px 0;
  margin: 18px 0;
  color: #2c71d0;
  background-color: #2c71d0;
  border-style: solid #2c71d0;
}

/* Branch pages */

/* Hides mobile version of hours */

.hours-mobile {
	display:none;
}

/* Events pages */

/* Hides mobile (agenda-style) version of calendar */

.calendar-mobile {
	display:none;
}

/* Database pages */

div.database > p {
	margin-top: 10px;}
	
/* Postcard pages */

div.postcards-home > div.row > div.postcard > a > img,
div.postcards-home > div.row > div.postcard > h3 {
	max-width:400px;
}	
	
div.postcard > section > div {
	padding-bottom: 30px;
}

/* Comment Forms */

label,input,textarea {
	display: inline-block;
	vertical-align: baseline;
}

label {
	 display: flex
}

  /**********/
 /* Footer */
/**********/

/* Hotlist buttons */

div#hotlist {
	margin-top: 10px;
}

div.hotlist-button {
	border-radius: 25px;
    padding: 20px; 
    margin-left:4%;
	margin-right: 4%;
	width:12%;}


div.hotlist-button:first-child:nth-last-child(5),
div.hotlist-button:first-child:nth-last-child(5) ~ div {
    width: 12%;
	margin-left:4%;
	margin-right: 4%;
}

div.hotlist-button:first-child:nth-last-child(6),
div.hotlist-button:first-child:nth-last-child(6) ~ div {
    width: 12.6%;
	margin-left:2%;
	margin-right: 2%;
}

/* Forces wordwrap when six buttons present; hides when only five. */

div.hotlist-button:first-child:nth-last-child(5) > a > button > br.hotbr,
div.hotlist-button:first-child:nth-last-child(5) ~ div > a > button > br.hotbr {
    display: none;
}

/* Blue bar */

#bar {
	margin: 15px 0px 15px 0px;
	height: 4px;
	background: #2c71d0;
}

  /*********************/
 /* Wireless Printing */
/*********************/


div#wireless {
	margin-top: 10px;
}

.wireless-button {
	font-size: 100%;
	border-radius: 25px;
    padding: 20px; 
    margin-left:4%;
	margin-right: 4%;
	width:12%;}
	
  /**********************/
 /* Newspaper Database */
/**********************/

.panel-body {
  padding-bottom: 0px;
  
}

.panel-group {
  margin-bottom: 10px;
  
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 100;
  top: 150%;
  left: 00%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 25%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
td.results {
padding:10px;}

td.results a p {
color:black !important;}

a:focus,
li.dropdown-item > a:hover,
li.dropdown-item > a:focus,
.navbar-dropdown > a:hover,
.navbar-dropdown > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus
{
    background: rgba(80, 163, 255, 0.5) !important;
	border-style: solid;
	border-color: black;
	border-width: medium;
}

div.announcement a {
	color:black !important;
}