body,html {
    margin:0;
    padding: 0;
	font-family: "Segoe UI"; #"calibri"; #"georgia";
}

img {
  max-width: 100%;
}

 .fieldName {
   display: inline-block;
   width: 10%;
   padding-right: 10px;
   #font-family: sans-serif;
 }
 
.input { width: 20em; }

.button {
	display: inline-block;
	margin: 4px 2px;
	
	background-color: #c2e1fc;
	border: 1px solid #1c94ff;
	color: #0068AD;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	cursor: pointer;
	font-weight: bold;
}

.entry {
	padding: 10px 15px;
}
.grey-back {
	background-color: #eee;
}

.button-block {
	width: 40%;
	display: block;
	margin: auto;
	
	background-color: #c2e1fc;
	border: 1px solid #1c94ff;
	color: #0068AD;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	cursor: pointer;
	font-weight: bold;
}

.button:hover {
	text-decoration: none; 
	color: #0048EE;
}

.submitForm { background-color: #eee; padding: 15px 32px;}

.head-container {
    position: relative;
    text-align: center;
    #color: white;
	width: 100%;
	margin:0;
    padding: 0;
}

.title {
    position: absolute;
    top: 55%;
    left: 83%;
    transform: translate(-50%, -50%);
	font-size: 300%;
	font-weight: bold;
	#text-shadow: 2px 2px #555555;

}

.body-container {
    position: relative;
    left: 15%;
	width: 70%;
	#font-family:"georgia";
	margin:0;
    padding: 0;
}

.topnav {
	text-align: center;
	overflow: hidden;
	#background-color: #fafafa;
	margin:0;
	padding: 0;
	border-top:1px solid gray; border-bottom: 1px solid gray;
}

.topnav a {
	display: inline-block;
	width: 10%;
	#height: auto;
	#float: left;
	color: #0068AD;
	text-align: center;
	padding: 0px 25px;
	text-decoration: none;
	font-size: 15px;
}

.topnav a:hover {
	#background-color: #f1f1f1;
	color: #0048EE;
}

.topnav a.active {
	#background-color: #aaa;
	#color: gray;
	#text-decoration: overline;
}

a:link, a:visited {
	text-decoration: none; color: #0068AD;
}

a:hover {
	text-decoration: none; color: #0048EE;
}

li {
    margin-bottom: 5px;
}

.footer {
	position: relative;
	height: 50px;
	#font-family:"georgia";
}

table {
	width: 100%;
}

tr:nth-child(even) {
    background-color: #dbeeff;
	#eee;
	padding: 5px;
}

tr:nth-child(odd) {
   background-color: #fff;
   padding: 5px;
}

th {
    background-color: #3b88ce;
	#ccc;
    color: white;
	padding: 5px;
}

th.sortable {
  position: relative;
  cursor: pointer;
}

th.sortable::after{
	font-family: FontAwesome;
	content: "\f0dc";
	position: absolute;
	right: 8px;
	color: #DDD;
}

th.sortable.asc::after {
  content: "\f0d8";
}

th.sortable.desc::after {
  content: "\f0d7";
}

th.sortable:hover::after {
  color: #1b68ae;
}

td {
    border-collapse: collapse;
	padding: 5px;
	text-align: center;
}

/* slider */

.cd-image-container {
  position: relative;
  width: 100%;
  #max-width: 768px;
  margin: 0;
  padding: 0;
  #background: #e11;
}

.cd-image-container img {
  display: block;
  width: 100%;
}

.cd-image-label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ffffff;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
.is-visible .cd-resize-img {
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #dc717d url("../img/cd-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
  /* change background color when element is active */
  background-color: #445b7c;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}

/* BROWSE GALLERY */

div.gallery {
    margin: 5px;
	padding: 2px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
	height: 200px;
	#position: relative;
}

div.gallery:hover {
    border: 1px solid #0048EE;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
	#position: absolute; 
	width: 100%;
	#bottom: 0;
    padding: 10px;
	margin: auto;
    #text-align: center;
	font-size: 12px;
}