﻿/* €€€€€€€€€€€€€€€€€€€€
This stylesheet is a composite of the CHT site layout created by John Parker BSc MSc
Inspirational Web Designs www.inspirationalwebdesigns.co.uk
Plus adaptions of stylesheets which are freely available on the web, full credit is given
Copyright (c) 2014 John Parker. All rights reserved.
€€€€€€€€€€ */

/* €€€€€€€€€€ */
/* BUTTON IMAGE */

/* These buttons were generated by www.css-button-generator.com */

/* Default Blue Button */
.bluButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #84bbf3;
	padding:5px 10px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	background:-ms-linear-gradient( top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #79bbff), color-stop(100%, #378de5) );
	background-color:#79bbff;
	color:#ffffff;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #bbdaf7;
 	-moz-box-shadow:inset 1px 1px 0px 0px #bbdaf7;
 	box-shadow:inset 1px 1px 0px 0px #bbdaf7;
}.bluButton:hover {
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	background:-ms-linear-gradient( top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #378de5), color-stop(100%, #79bbff) );
	background-color:#378de5;
}.bluButton:active {
	position:relative;
	top:1px;
}

/* Red Button */
.redButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d02718;
	padding:5px 10px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
	background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) );
	background-color:#f24537;
	color:#ffffff;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	-moz-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	box-shadow:inset 1px 1px 0px 0px #f5978e;
}.redButton:hover {
	background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
	background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) );
	background-color:#c62d1f;
}.redButton:active {
	position:relative;
	top:1px;
}

/* Green Button */
.grnButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #74b807;
	padding:5px 10px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background-color:#89c403;
	color:#ffffff;
	display:inline-block;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
}.grnButton:hover {
	background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
	background:-ms-linear-gradient( top, #77a809 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #77a809), color-stop(100%, #89c403) );
	background-color:#77a809;
}.grnButton:active {
	position:relative;
	top:1px;
}

/* Black Border */
.blkButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	border-color: #000000;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color:#f9f9f9;
	color:#111111;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.blkButton:hover {
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	background:-ms-linear-gradient( top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );
	background-color:#e9e9e9;
}.blkButton:active {
	position:relative;
	top:1px;
}

/* Gold Button */
.auButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #ffaa22;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
	background-color:#ffec64;
	color:#333333;
	display:inline-block;
	text-shadow:1px 1px 0px #ffee66;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
 	box-shadow:inset 1px 1px 0px 0px #fff6af;
}.auButton:hover {
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color:#ffab23;
}.auButton:active {
	position:relative;
	top:1px;
}

/* Silver Button */
.agButton {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color:#f9f9f9;
	color:#333333;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.agButton:hover {
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	background:-ms-linear-gradient( top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );
	background-color:#e9e9e9;
}.agButton:active {
	position:relative;
	top:1px;
}

/* Gold What's New Button */
.auWhatsNew {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	min-width: 550px;
	border-radius:8px;
	border:1px solid #ffaa22;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
	background-color:#ffec64;
	color:#333333;
	display:inline-block;
	text-shadow:1px 1px 0px #ffee66;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
 	box-shadow:inset 1px 1px 0px 0px #fff6af;
}.auWhatsNew:hover {
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color:#ffab23;
}.auWhatsNew:active {
	position:relative;
	top:1px;
}

/* Silver What's New Button */
.agWhatsNew {
	font-size:14px;
	font-family:Trebuchet MS;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	min-width: 550px;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color:#f9f9f9;
	color:#333333;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.agWhatsNew:hover {
	background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
	background:-ms-linear-gradient( top, #e9e9e9 5%, #f9f9f9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );
	background-color:#e9e9e9;
}.agWhatsNew:active {
	position:relative;
	top:1px;
}

/* €€€€€€€€€€ */
/* HOVER EFFECTS */

/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.5
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */

/* 2D TRANSITIONS */

/* Grow */

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */

.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.shrink:hover {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

/* Pulse */

@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pulse:hover {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Pulse Grow */

@-webkit-keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.pulse-grow {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pulse-grow:hover {
  -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Pulse Shrink */

@-webkit-keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse-shrink {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pulse-shrink:hover {
  -webkit-animation-name: pulse-shrink;
  animation-name: pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Push */

@-webkit-keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.push {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.push:hover {
  -webkit-animation-name: push;
  animation-name: push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pop */

@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pop {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pop:hover {
  -webkit-animation-name: pop;
  animation-name: pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Rotate */

.rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.rotate:hover {
  -webkit-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
}

/* Grow Rotate */

.grow-rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow-rotate:hover {
  -webkit-transform: scale(1.1) rotate(4deg);
  -ms-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

/* Float */

.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

/* Sink */

.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.sink:hover {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

/* Hover */

@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

.hover {
  display: inline-block;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover:hover {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Hang */

@-webkit-keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

.hang {
  display: inline-block;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hang:hover {
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hang;
  animation-name: hang;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Skew */

.skew {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.skew:hover {
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Forward */

.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.skew-forward:hover {
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Backward */

.skew-backward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.skew-backward:hover {
  -webkit-transform: skew(10deg);
  -ms-transform: skew(10deg);
  transform: skew(10deg);
}

/* Wobble Vertical */

@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    -ms-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-vertical:hover {
  -webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */

@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    -ms-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-horizontal:hover {
  -webkit-animation-name: wobble-horizontal;
  animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Top */

@-webkit-keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -ms-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -ms-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -ms-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-top {
  display: inline-block;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-top:hover {
  -webkit-animation-name: wobble-top;
  animation-name: wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Bottom */

@-webkit-keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -ms-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -ms-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -ms-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-bottom {
  display: inline-block;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-bottom:hover {
  -webkit-animation-name: wobble-bottom;
  animation-name: wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Skew */

@-webkit-keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -ms-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -ms-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -ms-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-skew {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-skew:hover {
  -webkit-animation-name: wobble-skew;
  animation-name: wobble-skew;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Buzz */

@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz:hover {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: .15s;
  animation-duration: .15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Buzz Out */

@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    -ms-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    -ms-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz-out:hover {
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* BORDER TRANSITIONS */

/* Border Fade */

.border-fade {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

.border-fade:hover {
  box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */

.hollow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

.hollow:hover {
  background: none;
}

/* Trim */

.trim {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.trim:hover:before {
  opacity: 1;
}

/* Outline Outward */

.outline-outward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-outward:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-outward:hover:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline Inward */

.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-inward:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-inward:hover:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */

.round-corners {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.round-corners:hover {
  border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */

/* Glow */

.glow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.glow:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Outset */

.box-shadow-outset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.box-shadow-outset:hover {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */

.box-shadow-inset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.box-shadow-inset:hover {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */

.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
}

.float-shadow:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}

.float-shadow:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Hover Shadow */

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

@keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

.hover-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
}

.hover-shadow:hover {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.hover-shadow:hover:before {
  opacity: .4;
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hover-shadow;
  animation-name: hover-shadow;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Shadow Radial */

.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.shadow-radial:before,
.shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.shadow-radial:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.shadow-radial:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.shadow-radial:hover:before,
.shadow-radial:hover:after {
  opacity: 1;
}

/* SPEECH BUBBLES */

/* Bubble Top */

.bubble-top {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  left: -webkit-calc(50% - 10px);
  left: calc(50% - 10px);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
  -webkit-transition-property: top;
  transition-property: top;
}

.bubble-top:hover:before {
  top: -10px;
}

/* Bubble Right */

.bubble-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
  top: -webkit-calc(50% - 10px);
  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
}

.bubble-right:hover:before {
  right: -10px;
}

/* Bubble Bottom */

.bubble-bottom {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
  left: -webkit-calc(50% - 10px);
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
}

.bubble-bottom:hover:before {
  bottom: -10px;
}

/* Bubble Left */

.bubble-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left;
  transition-property: left;
  top: -webkit-calc(50% - 10px);
  top: calc(50% - 10px);
  left: 0;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
}

.bubble-left:hover:before {
  left: -10px;
}

/* Bubble Float Top */

.bubble-float-top {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-float-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  left: -webkit-calc(50% - 10px);
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top;
  transition-property: top;
}

.bubble-float-top:hover {
  -webkit-transform: translateY(5px) translateZ(0);
  -ms-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}

.bubble-float-top:hover:before {
  top: -10px;
}

/* Bubble Float Right */

.bubble-float-right {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-float-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: -webkit-calc(50% - 10px);
  top: calc(50% - 10px);
  right: 0;
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
}

.bubble-float-right:hover {
  -webkit-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  transform: translateX(-5px);
}

.bubble-float-right:hover:before {
  right: -10px;
}

/* Bubble Float Bottom */

.bubble-float-bottom {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-float-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  left: -webkit-calc(50% - 10px);
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
}

.bubble-float-bottom:hover {
  -webkit-transform: translateY(-5px) translateZ(0);
  -ms-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}

.bubble-float-bottom:hover:before {
  bottom: -10px;
}

/* Bubble Float Left */

.bubble-float-left {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.bubble-float-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: -webkit-calc(50% - 10px);
  top: calc(50% - 10px);
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: left;
  transition-property: left;
}

.bubble-float-left:hover {
  -webkit-transform: translateX(5px);
  -ms-transform: translateX(5px);
  transform: translateX(5px);
}

.bubble-float-left:hover:before {
  left: -10px;
}

/* CURLS */

/* Curl Top Left */

.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-top-left:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */

.curl-top-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.curl-top-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-top-right:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */

.curl-bottom-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: -webkit-linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-bottom-right:hover:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */

.curl-bottom-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: -webkit-linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curl-bottom-left:hover:before {
  width: 25px;
  height: 25px;
}

/* €€€€€€€€€€ */
/* DROP IN BOX */

div.dropinboxchtstyle{
width:300px;
height:200px;
border:1px solid #848484;
padding:5px;
background:#F3F781;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

.drop-shadow{
-webkit-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 10px 10px 2px #888888;
}

.lifted{
-moz-border-radius:4px; 
border-radius:4px;
}


/* €€€€€€€€€€ */
/* MENU STRUCTURE - Now superseded by SmartMenu

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

ul#menu {padding:0; list-style:none; background:url('images/gradient.jpg'); text-align:center; margin:0 auto; font-size:12px; font-family:tahoma, sans-serif; height:40px; width:100%; position:absolute; left:0; top:90px;border-bottom:1px solid #CCC; z-index:1;}
ul#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px;}
ul#menu table {border-collapse:collapse; font-size:1em; float:left; margin:-1px;}

ul#menu ul li {float:left; margin:0; text-align:left;}
ul#menu ul li a {display:block; line-height:20px; margin:0; padding:0 10px; background:transparent; width:150px;}

ul#menu li {display:inline; margin:0 -2px; text-align:left;}
ul#menu li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0 20px 0 0; background:url(images/button.gif) right top; line-height:30px; text-decoration:none; color:#000;}
ul#menu li a.sub {background:url(images/button-arrow.gif) right top;}
ul#menu li a.sub :hover {color :#ccc;cursor:default;}

html>/**/body ul#menu li {display:inline-block; padding:0;}

* html ul#menu li a. {margin-right:3px;}
* html ul#menu li a {margin-bottom:-4px;}

ul#menu li a b {display:block; height:36px; float:left; padding:0 0 0 20px; background:url(images/button.gif) left top; cursor:pointer;}

ul#menu li a:hover {position:relative; background-position:right bottom; color:#fff;}
ul#menu li a:hover b {background-position:left bottom;}

ul#menu li:hover {position:relative;}
ul#menu li:hover > a {background-position:right bottom; color:#fff;}
ul#menu li:hover > a b {background-position:left bottom;}

ul#menu :hover ul {left:1px; width:105px; top:41px;}
* html ul#menu :hover ul {top:36px;}

ul#menu :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;}
ul#menu :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; width:95px; background:#ddd; color:#000;}
ul#menu :hover ul li a.fly {background:#ddd url(images/arrow.gif) no-repeat right center;}
ul#menu :hover ul li a:hover {background:#abc; color:#fff;}
ul#menu :hover ul li:hover > a {background:#abc; color:#fff;}

ul#menu :hover ul li a.fly:hover {background:#abc; url(images/arrow-over.gif) no-repeat right center;}
ul#menu :hover ul li:hover > a.fly {background:#abc; url(images/arrow-over.gif) no-repeat right center;}

ul#menu :hover ul ul {left:-9999px;}

ul#menu :hover ul :hover ul {left:105px; top:0; width:150px;}

ul#menu :hover ul :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;}
ul#menu :hover ul :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; background:#bbb; color:#000;}
ul#menu :hover ul :hover ul li a:hover {color:#fff; background:#840;} */

/* 3D Text */

body{
	background:#d5d5d5;
}
#text3d{
	width:960px;
        height:500px;
	padding:50px 10px 0 10px;
	margin:0 auto;
        text-align:center;
}
#text3d h1{
    font:normal 60pt Arial;
    color:#FFFFFF;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
#text3d p{
    font:normal 40pt Arial;
    color:#FFFFFF;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

/* €€€€€€€€€€ */
/* ZOOM SETTINGS */

.magnifyarea { /* CSS to add shadow to magnified image. Optional */
	box-shadow: 0 10px 6px -6px #A4A4A4;
	-webkit-box-shadow: 0 10px 6px -6px #A4A4A4;
	-moz-box-shadow: 0 10px 6px -6px #A4A4A4;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
	background: white;
}

.targetarea { /* CSS for container div(s) of the zoomable image */
	width: 325px; /* wide or wider than the widest zoomable image */
	height: 338px; /* high or higher than the tallest zoomable image */
	margin-top:3px;
}

#two { /* Added CSS for second target div of zoomable images */
	height: 243px; /* high or higher than the tallest zoomable image */
}

.targetarea img { /* zoomable image */
	margin: auto; /* for horizontal centering */
	display: block; /* also for horizontal centering */
	position: relative; /* along with on the fly calculations in script, for vertical centering */
	border-width: 0;
}

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
	padding-top: 25px;
	width: 325px;
	text-align: center;
}

.thumbs a { /* trigger links on the thumbnail images */
	text-decoration: none; /* avoid underlines of images, text or spaces in these links */
}

.thumbs img { /* trigger images - the thumbnails used to load new zoomable images into the targetarea */
	border-width: 0; /* avoid default borders in some browsers */
}

#description, #description2 {
	position: absolute; /* required for description folows image bottom (descpos: true) */
	width: 325px; /* should be width of zoomable image container (.targetarea) */
	text-align: center;
	font: bold 95% sans-serif;
	margin-top: 3px; /* when following image bottom, this sets a fixed distance for that */
	color: #222;
	background-color: #fff;
}

/* €€€€€€€€€€ */
/* IFRAME STYLE */

iframe{border-style:solid;border:1px solid #848484;border-radius:1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;}


/* €€€€€€€€€€ */
/* GRID STYLE */


#gridC {text-align: center;}

#grid,#grid3,#grid4,#grid3nest,#grid4nest,#grid6,#gridrec,#gridPortrait,#gridLandscape {
    width:95%;
    padding:1%;
    border:1px solid #999;
    border-radius:1vw;
    margin:0 auto 1.5%;
    list-style-type:none;
    overflow:hidden;
    background-color:#fff;
    box-shadow:1vw 1vw 1vw #999;    
 }
 
#grid3 {
    width:50%;
 }
#grid4 {
    width:75%;
 }
 #gridrec {
    width:65%;
 }
#grid3nest {
    width:75%;
    padding:0;
    border:0;
    box-shadow:none;
 }
#grid4nest {
    width:100%;
    padding:0;
    border:0;
    box-shadow:none;
 }
#grid-holder34nest {
    width:75%;
    padding:1%;
    margin:0 auto 1.5%;   
    border:1px solid #999;
    border-radius:1vw;
    background-color:#fff;
    box-shadow:1vw 1vw 1vw #999; 
}
#grid6 {
    width:98%;
 }
 #gridPortrait {
    width:55%;
 }
#grid li {
    float:left;
    width:19%;
    margin:0.5%;
 }
#grid3 li {
    float:left;
    width:32%;
    margin:0.5%; 
}
#grid4 li {
    float:left;
    width:24%;
    margin:0.5%;
 }
 #gridrec li {
    float:left;
    width:24%;
    margin:0.5%;
 }
#grid3nest li {
    float:left;
    width:32%;
    margin:0.5%; 
}
#grid4nest li {
    float:left;
    width:24%;
    margin:0.5%;
 }
#grid6 li {
    float:left;
    width:15.5%;
    margin:0.5%;
 }
 #gridPortrait li {
    float:left;
    width:12%;
    padding: 5px 4%;
 }
#grid a,#grid3 a,#grid4 a,#grid3nest a,#grid4nest a,#grid6 a,#gridrec a,#gridPortrait a,#gridLandscape a,#grid img,#grid3 img,#grid4 img,#grid3nest img,#grid4nest img,#grid6 img,#gridrec img,#gridPortrait img,#gridLandscape img {
    display:block;
    width:100%; 
 }
#gridLandscape li {
    float:left;
    width:13%;
    padding: 5px 3%;
 }
 #gridLandscape {
    width:70%;
 }
#grid a:hover,#grid3 a:hover,#grid4 a:hover,#grid3nest a:hover,#grid4nest a:hover,#grid6 a:hover,#gridPortrait a:hover,#gridLandscape a:hover {
    opacity:0.5;
 }
 
 /* €€€€€€€€€€ */
/* Scaleable Thumbnail musings */
 
 #justRight {float: right; width: 10%; height: 8%; margin: 1%;}
 #justLeft {float: left; width: 10%; height: 8%; margin: 1%;}
 
 #nailIT {
    width:95%;
    padding:1%;
    border:1px solid #999;
    
    margin:0 auto 1.5%;
    list-style-type:none;
    overflow:hidden;
    background-color:#fff;
       
 }
#nailIt li {
    float:left;
    width:50%;
    margin:0.5%;
 }
#nailIT a,#nailIT img {
    display:inline;
    width:100%; 
 }
#nailIT a:hover {
    opacity:0.5;
 }
 
 /* €€€€€€€€€€ */
/* Cookie Consent */

.consent { position:fixed; display:table; left:0; bottom:0; width:100%;  background:#6E6E6E; }
.consent p, .consent span { display:table-cell; vertical-align:middle } 
.consent button { float:right }
.consent { -webkit-animation:fadeBar 1s 1s both; animation:fadeBar 1s 1s both }
@-webkit-keyframes fadeBar {
	0% { opacity:0; -webkit-transform:translateY(100%) }
	100% { opacity:1; -webkit-transform:none }
	}
@keyframes fadeBar {
	0% { opacity:0; transform:translateY(100%) }
	100% { opacity:1; transform:none }
	}

/* €€€€€€€€€€ */	
/* Mill Logo Bullet */

ul.logo {
list-style-image: url('../graphics/listLogo.jpg');
padding-left: 40px;
}
	
/* €€€€€€€€€€ */
/* Accordion Styles */

.glossymenu{
margin:0 auto;
padding: 0;
width: 95%; /*width of menu*/
border: 1px solid #848484;
border-bottom-width: 0;
border:1px solid #848484;border-radius: 1vw;box-shadow:1vw 1vw 1vw #999;padding:10px;
}

.glossymenu a.frameTop{
background: black url(../graphics/gradient.png) repeat-x bottom left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
height: 20px;
border:1px solid #848484;border-radius: 1vw 1vw 0px 0px;
}

.glossymenu a.frameBtm{
background: black url(../graphics/gradient.png) repeat-x bottom left;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
height: 20px;
border:1px solid #848484;border-radius: 0px 0px 1vw 1vw;
}

.glossymenu a.menuitem{
background: black url(../graphics/glossyback.gif) repeat-x bottom left;
font: bold 14px "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(../graphics/glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
border: 1px solid #848484;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

/* Left Bubble */

.BubbleLeft
{
position: relative;
float: left;
width: 60%;
margin: 5px;
padding: 5px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 1px;
}

.BubbleLeft:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
bottom: -15px;
left: 5%;
}

.BubbleLeft:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
margin-top: -15px;
bottom: -16px;
left: 5%;
}

/* Right Bubble */

.BubbleRight
{
position: relative;
float: right;
width: 60%;
margin: 5px;
padding: 5px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7F7F7F solid 1px;
}

.BubbleRight:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
bottom: -15px;
left: 85%;
}

.BubbleRight:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
margin-top: -15px;
bottom: -16px;
left: 85%;
}

/* Spacer Element */

.Spacer
{
position: relative;
float: left;
width: 100%;
margin: 1px;
}

/* Hover Text */



  
.info {
    background-color: Black;
    filter: alpha(opacity=7);
    opacity: 0.7;
    position: absolute;
    display: block;
    color: White;
    font-family: Trebuchet MS;
    font-size: 12pt;
	text-align: center;
  }       

/* Ten columns for Club 100 */  

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TEN  */
.span_10_of_10 {
	width: 100%;
}

.span_9_of_10 {
  	width: 89.84%;
}

.span_8_of_10 {
  	width: 79.68%;
}

.span_7_of_10 {
  	width: 69.52%;
}

.span_6_of_10 {
  	width: 59.36%;
}

.span_5_of_10 {
  	width: 49.2%;
}

.span_4_of_10 {
  	width: 39.04%;
}

.span_3_of_10 {
  	width: 28.88%;
}

.span_2_of_10 {
  	width: 18.72%;
}

.span_1_of_10 {
  	width: 8.56%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	
    .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10, .span_10_of_10 {
	width: 100%; 
	}
