/* general styles */

@font-face {
	font-family: OpenSans-CondLight;
	src: url("font/OpenSans-CondLight.ttf") format("truetype");
}

@font-face {
	font-family: OpenSans-CondBold;
	src: url("font/OpenSans-CondBold.ttf") format("truetype");
}

body {
	font-family: OpenSans-CondLight;
	background: #F5F5DD;
}

a {
	outline: none;
}

a img {
	padding: 2px;
	border: 1px solid black;
	background-color: white;
}

a img:hover {
	background-color: red;
}

/* header styles */

.header {
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 3px;
	text-align: center;
	background: transparent url(img/linethin.png) repeat-x 0 50%;
}

.header-box {
	background: #449900;
	border: 2px solid white;
	border-radius: 15px;
	box-shadow: 8px 9px 8px rgba(120,120,120,0.9);
	padding: 0px 12px 3px 15px;
        position: relative;
        top: -4px;
}

.header-left {
	text-transform: none;
	font-variant: small-caps;
	color: white;
}

.header-divider {
	color: white;
	position: relative;
	top: -4px;
}

.header-right {
	text-transform: none;
	font-variant: small-caps;
	color: #FFCC00;
}

.smallheader {
	font-size: 20px;
	font-weight: 500;
	color: white;
	text-align: center;
	margin-top: -5px;
	margin-bottom: 21px;
}

.smallheader-box {
	position: relative;
	padding: 4px 10px 5px 10px;
	border: 2px solid white;
	border-radius: 12px;
	box-shadow: 6px 7px 6px rgba(120,120,120,0.9);
	background: #449900;
}

.topheader-left {
	float: left;
}

.topheader-right {
	float: right;
}

.topheader {
	margin-top: -121px;
	font-size: 20px;
	font-weight: 500;
	border: 2px solid white;
	border-radius: 12px;
	box-shadow: 6px 7px 6px rgba(120,120,120,0.9);
	background: #449900;
}

.topheader:hover {
	border: 2px solid red;
}

.topheader a {
	color: white;
	text-decoration: none;
}

.topheader a:before {
	vertical-align: super;
	content: "...";
	color: #449900;
	font-size: 80%;
}

.topheader a:after {
	vertical-align: sub;
	content: "...";
	color: #449900;
	font-size: 80%
}

@media only screen and (max-width: 600px) {
  .topheader {
    margin-top: 0.5rem;
  }
}

.rating {
	float: right;
	margin-top: -148px;
	font-size: 16px;
	font-weight: normal;
}

/* index styles */

.albums {
	width: 100%;
	margin: auto;
}

.album {
	float: left;
	margin: 8px;
}

.square {
	object-fit: cover;
	width: 226px;
	height: 226px;
}

.caption-date {
	font-size: 15px;
	text-align: right;
	margin-top: -6px;
	padding-right: 3px;
}

.caption-course {
	font-size: 20px;
	white-space: nowrap;
	overflow: hidden;
	width: 226px;
	text-overflow: ellipsis;
	padding-bottom: 4px;
	margin-top: -7px;
}

.album-header {
	clear: left;
	color: white;
	font-family: OpenSans-CondBold;
	font-size: 60px;
	letter-spacing: 2px;
	text-align: left;
	margin-left: 10px;
	text-shadow: -3px -3px 3px white, 3px 3px 3px black;
}

.album-header-up {
	font-family: OpenSans-CondBold;
	text-align: center;
	font-size: 40px;
	letter-spacing: 10px;
	margin-top: -60px;
}

.album-header-up a {
	color: white;
	text-decoration: none;
	text-shadow: -2px -2px 2px white, 2px 2px 2px black;
}

.album-header-up a:hover {
	color: red;
}

/* album styles */

.fotos {
	width: 100%;
	margin: auto;
}

.foto {
	float: left;
}

.landscape {
	margin-top: 75px;
}

.portrait {
	margin-top: 0px;
}

.caption-foto {
	font-size: 20px;
	text-align: center;
	margin-top: -8px;
}

.caption-foto-date {
	font-size: 14px;
	text-align: right;
	margin-top: -25px;
        margin-bottom: 10px;
	padding-right: 5px;
}

.fancybox-title {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 20px;
}

.shrink-expand-icon {
	float: right;
}

.shrink-expand-icon a img {
	border: none;
}