/* updated 11 mar 09 */
/* dramatically cleaned up 13 mar 10 */
/* less dramatically cleaned up 7 aug 17 */
/*Truly, it needs to be dramatically cleaned up again.*/

body
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	font-weight: 400;
/* 	line-height: 1.1em; */
	background-color: #808290;
	color: #091132;
	background-image: url(utilimages/jcbd-website-bg-2015.jpg);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	
}

#container{

}
a	
{
	color: inherit;
	text-decoration: none;
}

a:hover 	{ color: #091132; text-decoration: underline; }


h1	{ /*headline*/
	text-shadow: 2px 2px 2px white;
	font-weight: 900;
	font-size: 2em;
	line-height: 1em;
	font-weight: 900;
	padding-top: 3px;
	padding-bottom: 6px;
	padding-left: -15px;
	margin: 0px;
	}	

h2	
{	/*date*/
	
	font-size: 1.1em;
	color: #990000;
	font-weight: 900;
	letter-spacing: .4em;
	text-transform: uppercase;
	border-bottom: 1px solid #bbb;
	margin: 15px 15px 2px 5px;
	padding: 0px 0px 7px 0px;
}

h3
{
	color: #5f657b;
	line-height: 1.2em;
	text-shadow: rgba(176,212,220,0.9) 2px 2px 2px;
	background-color: #EEE;
	padding: 5px;
	margin: 0;
}

h4
{
	/*date*/
	font-size: 0.9em;
	line-height: 1em;
	font-weight: normal;
	color: #FFDDA6;
	border: 1px solid #FFDDA6;
	margin: 0px 5px 10px 5px;
	background-color: #10205A;
	padding: 5px;
}


blockquote{
	color: #495f80;
	
}


.content p	{
	
	text-align: left;
	font-size: 1.2em;
	line-height: 1.25em;
}


img
{

}

svg#jcbdlogo
{
	height: 5.35em;
}
  	
  	
#left
{
	width: 22%;
	margin-top: 0;
	margin-left:  1em;
	font-size: 0.75em;
	letter-spacing: .1em;
}


.menu {
	list-style: none;
	border: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-indent: 0;
}
		
.menu li {
		margin: 0px;
		border-bottom: 1px solid #c2c3c8;
		}
		
.menu li a
{
	display: block;
	border-left: 5px solid #a62729;
	border-right: 5px solid #6c76a6;
	background-color: rgba(230,241,255,0.76);
	color: #091132;
	text-decoration: none;
	border-style: none solid none solid;
	padding: 5px;
}


.menu #currentplace, .menu #currentplace a
{
	color: white;
	background-color: rgba(56, 60, 81, 0.85);
}

.menu li a:hover
{
	border-left: 5px solid #1c64d1;
	border-right: 5	px solid #5ba3e0;
	background-color: #2586d7;
	color: white;
}

.content
{
	padding: 2em;
	position: absolute;
	top: 6em;
	left: 25.2%;
	border: solid 1px white;
	background: rgba(242, 242, 242, 0.75);
	width:  66%;
	margin-right:  3em;
}

.homepage
{
width: 80%;
left: 10%;
max-width: 900px;

}


.content a
{
font-weight: bold;
	color: #495f80;
}

.demo a
{
color: #a1c2f2;
}

.content ul
{
line-height: 110%;

}


.copyright, .copyright p
{
	font-size: 1em;
	line-height: 120%;
	padding-top: 5px;
	padding-left: 10px;
	clear:  both;
	color: #9b9dae;
}

.intro, .gallerylist
{
	color: #eef3ff;
	background-color: rgba(56,60,81,0.85);
	font-size: 1.1em;
	line-height: 1.3em;
	text-align: left;
	letter-spacing: 0em;
	margin-top: 1em;
	padding-left: 0.7em;
	padding-top: 1em;
	-webkit-border-bottom-right-radius: 10px;
  	-webkit-border-top-left-radius: 10px;
  	-moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
	border: 2px solid #adb3cc;
}

.intro ul, ol
{
	font-size: 1.1em;
	line-height: 1.2em;
	list-style-image: url(utilimages/listBullet.gif);
	list-style-type: disc;
	color: #adc2ff;
}

.gallerylist ul, ol{

	width: 100%;
	list-style-type: none;
	text-indent: 0;
	padding:  0px;
}

.intro a, .gallerylist a
{
color: white;
}


.intro li
{
	padding:  0.2em;
}
.gallerylist li
{
	padding:  0.2em;
	border-bottom: 1px solid #63769b;
	margin-bottom: 0.2em;
	margin-left: 0.2em;
}	


.here
{
color: white;
font-style: bold;
}


.basic
{
	border: 1px solid #2d2d2d;
}


.floatimage
{
	float: left;
	clear: right;
	border: 2px solid #191919;
    height:  76px;
}

.floatimage span
{
display: none;
}


.floatimage img{
	border: 0px;
}

.invisible, .design1, .design2
{
display: none;
}

.floatimage:hover span
{
	display: block;
	position: absolute;
	left: 0px;
	top: -66px;
	width: 320px;
	padding: 5px;
	margin: 10px;
	color: #091132;
	font-size: 1.1em;
	background-color: #FFDDA6;
	border-color: white;
	border-width: 2px;
	border-style: solid;
	line-height: 14px;	
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.photorow{
	padding:  0px;
	list-style-image: none;
	list-style-type: none;
}

ul .photorow{
	list-style-image: none;
}

.onerow
{
		clear: both;
}

.mosaiccontainer
{
	background-color: rgba(56, 60, 81, 0.85);
	margin-top: 10px;
	margin-bottom: 10px;
	width: 610px;
	height: 680px;
	border: 1px solid white;
	padding-left:  25px;
	padding-top:  5px;
}

.photocontainer, .photocontainer2, .photocontainer3, .photocontainer4, .photocontainer5
{
	background-color: rgba(56, 60, 81, 0.85);
	padding: 1em;
	padding-bottom: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 1px solid white;
}


img.highlighting
{
	width: 80%;
}

.floatimage a img
{
	width: 80%;
}

.floatimage:hover { border-color: #FFD28A; }

.highlighting:hover { border-color: #FFD28A; }

.highlighting {
	margin-bottom: 5px;
	margin-right: 5px;
	border-color: #555;
	border-width: 2px;
	border-style: solid;

}

.photocontainer2
{
	display: inline;
	width: 22%;
	float: right;
	padding-bottom: 1em;
	margin-left: 0.7em;
}


.photocontainer3
{

	float: right;

}

.photocontainer4
{
	width: 16%;
	max-width: 200px;
	float: right;
	margin-left: 0.7em;
}

.photocontainer4 img
{
	width: 100%;
}

.photocontainer5 img.basic, .photocontainer2 img.basic
{
width: 100%;
}

.photospacer
{
clear:both;
text-align: right;
}


.photospacer a
{
	font-size: 1em;
	letter-spacing: .1em;
	padding: 4px;
	padding-left: 8px;
	text-align: right;
	background-color: #2A3A71;
	color: #AFC0D8;
}

.photospacer2
{
	clear: both;
	float: left;
}

.oldthumb {
	width: 128px;
	height: 85px;
	border-color: black;
	border-width: 1px;
}

.swiper-wrapper{
	margin-bottom: -6px;
}

.swiper-container{
	width:99%;
	height:93%;
	border: 0.4em solid #eee;
	
	padding: 0;
	box-shadow:1px 1px 5px 2px rgba(0,0,0,0.4);}

.swiper-slide .tooltip {
	display: none;
	background:rgba(0,0,0,0.7);
	height:0;
	position:relative;
	bottom:0;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;  
}
.swiper-slide .tooltip h1 {
	color:white;
	font-size: 1.3em;
	padding: 10px 0px 0px 20px;
	margin-top: 10px;
	font-weight: 900;
	text-shadow:0px 1px 1px #000;
}

.swiper-slide .tooltip p {
	color:white;
	font-size:0.9em;
	letter-spacing: 1px;
	padding:0px 0px 0px 20px;
	margin-top: 0px;
	text-shadow:0px 1px 1px #000;
}

.swiper-slide .tooltip a
{
	text-decoration: none;
}

.swiper-slide:hover .tooltip {
}

.swiper-slide a img
{
	padding-top: 1px; width: 100%;
}

.swiper-slide
{
}

.intro, .demo
{
	color: #d8e2ff;
	background-color: #444E71;
	font-size: 1.1em;
	line-height: 1em;
	text-align: left;
	border-color: #9FD8E5;
	border-width: 1px;
	border-style: solid;
	padding: 2%;
  	width: 90%;
	margin-top: 1.2em;
	box-shadow:1px 1px 5px 2px rgba(0,0,0,0.4);
}

.swiper-container, .intro, .demo
{
	margin: 1em auto;
	max-width: 800px;

}

.intro ul, ol
{
	margin-left: 0;
	padding-left: 0;
	padding: 0px;
	list-style-position: inside;
	color: #adc2ff;
}


.intro ul
{
	padding-top:  0.5em;
}

.crumbs
{
letter-spacing: 3px;
}

.address
{
	font-size: 0.75em;
	line-height: 1.1em;
	color: #091132;
	float:right;
	position: absolute;
	top: -80px;
	right: 1em;
	width: 32%;
	padding: 0.6em;
	background-color: rgba(230,241,255,0.76);
	text-shadow: 2px 2px 2px white;
	border-color: white;
	border-width: 1px;
	border-style: solid;
		margin-top: 15px;
	margin-left:  6em;
	box-shadow:1px 1px 5px 2px rgba(0,0,0,0.4);
}

.address a
{
	color: #296d8a;
	letter-spacing: .3em;
	text-decoration: none;
	font-weight: bold;
}

.excerpt p
{
	color:#091132; 
}

p.uptop
{
	position: absolute;
	left: 8em;
	top: 0.5em;	letter-spacing: 0.2em;
	text-shadow: 1px 1px 0px white;
}

.superbold
{
	font-weight: 900;
}

.swiper-pagination
{


}

div.homepage ul.menu {

	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    		-moz-column-count: 2; /* Firefox */
			column-count: 2;     
			-webkit-column-gap: 1em; /* Chrome, Safari, Opera */
			-moz-column-gap: 1em; /* Firefox */
			column-gap: 1em; margin-bottom: 1em; line-height: 1em;	
	margin: 2em auto;
	width: 95%;
	max-width: 800px;
/* 	box-shadow:1px 1px 5px 2px rgba(0,0,0,0.4); */
	
}

.intro
{
	margin-top: 2.5em;
}

.swiper-pagination-bullet
{
	margin-right: 0.3em;
}

@media only screen 
and (max-width: 730px) {
	.intro, .demo { font-size: 0.85em; }
	.address {display: none; }
	.homepage h1 { font-size: 2em; line-height: 1em;  }
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
svg#jcbdlogo { height: 4em;  }
.swiper-container { border: 0.2em solid #eee; }
#left { width: 98%; float: none; padding: 0; margin: 0;  }
.content { width: 90%; position: inherit;   }
.menu {     -webkit-column-count: 3; /* Chrome, Safari, Opera */
    		-moz-column-count: 3; /* Firefox */
			column-count: 3;     
			-webkit-column-gap: 4px; /* Chrome, Safari, Opera */
			-moz-column-gap: 4px; /* Firefox */
			column-gap: 4px; margin-bottom: 1em; line-height: 1em;}
.menu li a { padding: 4px; }
h1 { font-size: 1.4em; }
h2 { font-size: 1em; letter-spacing: 1px; margin-top: 0; }
.gallerylist { display: none; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.address {width: 35%; }
}