@charset "UTF-8";
/* CSS Document */

/*****Reset*****/  
/*Remove margin and padding from elements*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
  
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
a, a:active, a:focus {
	outline: none;
}
a img {
	border: none;
}

/*****Basic Elements*****/  
/*Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.*/  

html,body {
	overflow-x: hidden;
}

body {
	font-family: "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	color: rgb(68,68,68);
	font-size: 16px;
	background-color: rgb(244,244,244);
}

body#start {
	background: url(../res/img/jonathan_bg.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

a, a:hover {
	color: rgb(190,70,70);
}

h1 {
	font-size: 170%;
	padding-bottom: 30px;
}

h2 {
	font-size: 100%;
    font-weight: bold;
    line-height: 2em;
    padding-bottom: 30px;
}

p {
	padding-bottom: 30px;
}

dt, dd {
	padding-bottom: 5px;
}

.dl-horizontal dt {
	text-align: left;
	width: 130px;
}

.dl-horizontal dd {
	margin-left: 140px;
}
  
/*****Generic Classes*****/  
/*Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently*/
  

/*****Basic Layout*****/  
/*Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site*/
 
.langDe {
	display: block;
}

.langEn {
	display: none;
}
  
.voffset5 { margin-top: 5px; }
.voffset10 { margin-top: 10px; }
.voffset15 { margin-top: 15px; }
.voffset30 { margin-top: 30px; }
.voffset45 { margin-top: 45px; }
.voffset60 { margin-top: 60px; }
.voffset75 { margin-top: 75px; }
.voffset90 { margin-top: 90px; }
.voffset150 { margin-top: 150px; }
.voffset200 { margin-top: 200px; }
  
/*****Header*****/  
/*Define all elements in the header*/
  
#headerWrap {
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
	background-color: rgb(255,255,255);
}

#langNav {
	font-size: 80%;
}

#langNav a {
	color: rgb(68,68,68);
}

#langNav a.active {
	color: rgb(190,70,70);
}

#navHeader {
	padding: 0;
}

#facebookLink {
	position: absolute;
    right: 0;
    top: 5px;
}
  
/*****Content*****/  
/*Define all elements in the content area*/

#mainContent {
	margin-top: 60px;
}

#rightContent img {
	width: 100%;
	height: auto;
} 

#announcement {
	padding: 30px;
	background-color: rgba(255,255,255,0.9);
	position: absolute;
	margin-left: 15px;
	bottom: 50px; 
} 

.galleryContent {
	padding: 0px 0px 0px 9px;
}

.fancybox-nav {
	height: 90%;
}

.fancybox img {
	width: 225px;
	height: 225px;
	padding: 0;
	margin: 10px 8px;
}

.tooltip.bottom {
    margin-top: 6%;
}

.inlineImage img {
	width: 100%;
	height: auto;
}

.imageCaption {
	padding-top: 15px;
	font-size: 80%;
}
  
/*****Footer*****/  
/*Define all elements in the footer*/
  

  
/*****Etc*****/  
/*Continue to define the other sections one by one*/
  
/* Bootstrap modification */

.navbar {
	margin-bottom: 5px;
}

.navbar-default {
    background-color: rgba(248, 248, 248,0);
    border-color: rgba(231, 231, 231,0);
}

.navbar-default .navbar-brand {
    color: rgb(51, 51, 51);
    font-size: 180%;
    height: auto;
    padding: 5px 15px;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
	color: rgb(51,51,51);
}

.navbar-right {
	margin-right: 20px !important;
	margin-top: -6px;
}

.nav > li > a { 
	padding-left: 20px;
	padding-right: 20px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: rgba(231, 231, 231,0);
    color: rgba(190, 70, 70, 1)
}


@media screen and (max-width: 767px) {
	
	.navbar-default .navbar-brand {
		font-size: 120%;
		padding-top: 12px;
	}
	
	#facebookLink {
		top: 12px;
	}
	
	.dl-horizontal dd {
		margin-left: 0px;
		padding-bottom: 15px;
	}
	
	.navbar-toggle {
		margin-right: 60px;
	}
	
	#announcement {
		margin-left: 0;
	}
	
	.fancybox img {
	    height: 40%;
	    width: 40%;
	}
	.tooltip.bottom {
	    margin-top: 12%;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.nav > li > a { 
		padding-left: 10px;
		padding-right: 10px;
	}
	.tooltip.bottom {
	    margin-top: 10%;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	.fancybox img {
		width: 218px;
		height: 218px;
	}
	.tooltip.bottom {
	    margin-top: 7.5%;
	}
}

@media screen and (min-width: 1200px) {
	.fancybox img {
		width: 212px;
		height: 212px;
	}	
}