html { height:100%; min-height:100%; overflow-y:auto; overflow-x:hidden; }
a { outline: 0; }
a:link { color: #2288ff; }
a:visited { color: #22ff88; }
a:not(.no):active { color: #ff0; animation: pulsate 2s infinite !important; }
a:not(.no):hover {
	text-shadow: 2px 2px 3px #000;
	position: relative;
	top: -1px;
	left: -1px;
	filter: url(/img/filters.svg#yellow-glow);
    -webkit-filter: drop-shadow(0px 0px 0.25em #ffff66);
    filter: drop-shadow(0px 0px 0.25em #ffff66);
}
.desktop {
        visibility: visible;
	display: initial;
}
.mobile {
        visibility: hidden;
        display: none;
}
.contact-mobile {
        visibility: hidden;
	display: none;
}
#cssmenu > ul > li > .separator,
#cssmenu > ul > li > a {
        padding: 0.75em 1.5em !important;
}
.jicons-icons {
	display: inline;
}
li {
  line-height: 1.25em;
}
.breadcrumb span {
	color: #000;
}
.breadcrumb a span {
	color: #04A;
}
ul > li > a:link { text-decoration: none; }
.logo {
	position: absolute;
	top: -5px;
	right: 4%;
	animation: slideright 1s;
}
.logoL { position: absolute; right:8px; }
.logoR { position: absolute; right:-50px; }
.well {
	border: 0px none !important;
	background-color: rgba(0,0,0,0) !important;
}
#thumbs > a {
	margin: 0.22em;
	display: inline-block;
}
#thumbs > a > img {
	vertical-align: middle;
	max-width:96px;
	max-height:96px;
	overflow:hidden;
}
.bigcap {
	font-size:200%;
	color: #3a87ad;
}


.animPageRight {
	position: relative;
	animation: slidePageRight 1s;
	animation-direction: normal;
        animation-fill-mode: forwards;
}
.animPageLeft {
	position: relative;
	animation: slidePageLeft 1s;
	animation-direction: normal;
        animation-fill-mode: forwards;
}

@keyframes slidePageRight {
	0% { left: 0; }
	100% { left: -100vw; }
}
@keyframes slidePageLeft {
	0% { left: 0; }
	100% { left: 100vw; }
}
.dropcap{
    float:left;
	font-size:200%;
	margin-top:14px;
	margin-right:5px;
	color:#8C8273;
}
.code {
        font-family: "Lucida Console", Monaco, monospace;
}

div.code {
	display: block;
	padding: 0 1em 1em;
	margin: 1em 0;
	white-space: pre;
	border: 2px solid #0088AA;
	border-radius: 4px;
	font-size: 12pt;
	overflow-x: auto;
	background: rgba(0,0,0,0.6);
}

.pill {
	margin: 1em 0em;
}
.jicons-icons {
	display: inline;
}

.brightside {
	color: #ff0 !important;
	font-size: 1.1rem !important;
	margin: 0.5rem;
	padding: 0.5rem 1.25rem;
}
.darkside {
	color: #C60 !important;
	font-size: 1.0rem !important;
	margin: 0.5rem;
	padding: 0.5rem 1.25rem;
}

.linktext {
	font-family: "Lora", "Gentium", serif;
}

blockquote.bubbletext {
    position: relative;
    padding: 0.1em 1em;
    margin: 0.5em 20%;
    color: #fff;
    z-index: 999;
    background: transparent linear-gradient(#54B906, #165C00, #032300) repeat scroll 0% 0%;
    border-radius: 30px;
}
blockquote.bubbletext p {
    margin: 1em;
    font-size: 1.25em;
    text-shadow: 1px 1px 0.5px rgba(0,0,0,0.8);
}
blockquote.bubbletext::after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 75%;
    border-width: 0px 20px 50px 0px;
    border-style: solid;
    border-color: transparent #032300;
    display: block;
    width: 0px;
}

#bubble-image {
	top: 3em;
}

.icon {
	filter: url(/img/filters.svg#drop-shadow);
	-webkit-filter: drop-shadow(3px 3px 0.2em #000000);
	filter: drop-shadow(3px 3px 0.2em #000000);
}
#bubble-image:hover,
.btn:hover,
.pill:hover,
.logo:hover,
.linktext:hover,
.icon:hover {
	filter: url(/img/filters.svg#yellow-glow) !important;
	-webkit-filter: drop-shadow(0px 0px 0.25em #ffff66) !important;
	filter: drop-shadow(0px 0px 0.25em #ffff66) !important;
}

.pill:hover,
.linktext:hover,
.icon:hover {
	transform: scale(1.25);
        animation: balloon 0.5s;
}

.logo:hover,
.btn:hover {
	transform: scale(1.1);
	animation: bulge 0.5s;
}

@media screen and (min-width: 1081px) and (max-width: 1599px) {
	body {
		margin: 0;
        background: url(/img/TreeBarkingHalo.jpg) no-repeat center center fixed;
    	background-size: cover;
    	color: #dddd66;
		font-size: 1.1em !important;
	}
	.title {
        font-family: 'Lora', 'Gentium', serif;
        text-align: center;
        text-shadow: 0px 0px 16px #000, 1px 1px 0px #000000;
        margin: 1% 9em;
        color: #ffffff;
	}
	#content {
		position: absolute;
		width: 100%;
		top: 4em;
		left: 0;
		margin: 1em;
	}
#thumbs {
	max-height: 310px;
	overflow-y: scroll;
}

	#main {
		margin: 0em 21.5em 0 2em;
	}
	#footer { margin: 5em 21.5em 0em 2.25em; }
	#footer-1 { margin: 0 0 !important; }
	#footer-2 { margin: 0 0.5em !important; }
	#sidebar {
		position: absolute;
		width: 16em;
		margin: 0 3em;
		top: 0 !important;
		right: 0;
	}
}

@media screen and (min-width: 1600px) {
	body {
		margin: 0;
		background: url(/img/TreeBarkingHalo.jpg) no-repeat center center fixed;
    	background-size: cover;
    	color: #dddd66;
		font-size: 1.25em !important;
	}
#thumbs {
	max-height: 600px;
	overflow-y: auto;
	margin: 0;
}
#thumb < a {
	margin: 0.2em;
}

	.title {
		font-family: 'Lora', 'Gentium',serif;
		text-align: center;
		text-shadow: 0px 0px 1em #000, 1px 1px 0px #000000;
		margin: 2% 22em;
		color: #ffffff;
	}
	#content {
		position: absolute;
		width: 100%;
		top: 4em;
		left: 0;
		margin: 0.5em 3em;
	}
	#main {
		margin: 0em 28.5em 0 2em;
	}
	#footer-1 {
		padding: .5em 1.5em .25em 1.5em !important;
	}
	#footer-2 {
		padding: 0em 2em 1em 2em !important;
	}
	#footer { margin: 5em 28.5em 0em 2em; }
	#sidebar {
		position: absolute;
		width: 16em;
		top: 0px !important;
		margin: 0em 6em;
		right: 0;
	}
}

@media screen and (max-width: 1080px)
and (min-width: 806px) and (max-resolution: 1.2dppx) {
	body {
		margin: 0;
        background: url(/img/TreeBarkingHaloMed.jpg) no-repeat center center fixed;
    	background-size: cover;
    	color: #dddd66;
	}
	.title {
        font-family: 'Lora','Gentium',serif;
        text-align: center;
        text-shadow: 0px 0px 16px #000, 1px 1px 0px #000000;
        margin: 0em 1.2em;
        color: #ffffff;
	}
#thumbs {
	max-height: 450px;
	overflow-y: scroll;
}

	#content {
		position: absolute;
		width: 100%;
		top: 4em;
		left: 0;
		margin: 0.5em;
	}
	#main {
		margin: .5em 18.5em 0em 0.5em;
	}
	#footer { margin: 5em 18.5em 0 0.75em; }
	#sidebar {
		position: absolute;
		width: 16em;
		margin: 0 1.5em;
		top: 0 !important;
		right: 0;
	}
}

@media print {
	body {
		margin: 0;
		background-color: #ffffff;
		color: #000000;
		font-size: 1em;
	}
	.title {
		font-family: 'Lora', 'Gentium', serif;
		text-align: center;
		margin: 0em 1.2em;
		color: #000000;
	}
	#content {
		position: relative;
		width: 100%;
		top: 1em;
		left: 0;
		margin: 0;
	}
	#main { margin: 0; }
	#footer { margin: 5em 1em 0 1em; visibility:hidden !important; }
	#sidebar { visibility: hidden !important; }
	#topbar { visibility: hidden !important; }
	#menubar { visibility: hidden !important; }
.desktop {
        visibility: hidden;
	display: none
}
.mobile {
        visibility: hidden;
        display: none;
}
.contact-mobile {
        visibility: hidden;
	display: initial;
}
#cssmenu > ul > li > .separator,
#cssmenu > ul > li > a {
        padding: 0.75em 1.5em !important;
}

}

@media screen and (min-width: 640px) and (max-width: 805px) 
and (max-resolution: 1dppx) {
	body {
        background: url(/img/TreeBarkingHaloLow.jpg) no-repeat center center fixed;
    	background-size: cover;
    	color: #dddd66;
		font-size: 0.92em;
		margin: 0;
	}
	.title {
        font-family: 'Lora', 'Gentium', serif;
        text-align: center;
        text-shadow: 0px 0px 16px #000, 1px 1px 0px #000000;
        margin: 0em 1.2em;
        color: #ffffff;
	}
#thumbs {
	height: 200px;
	overflow-y: scroll;
}
	
	.logo {
		transform: scale(.85);
		position: absolute;
		right: 0;
		margin: 0;
		top: 0;
	}
	img.pill {
		transform: scale(.75);
		margin: 1em 0;
	}
	#menubar {
		font-size: 1em;
	}
	#content {
		position: relative;
		width: 100%;
		top: 4em;
		left: 0;
		margin: .5em 0;
	}
	#main {
		margin: 0 0.25em;
	}
	#footer { margin: 5em 0.25em 0; }
	#sidebar {
		position: relative;
	}
	#side-top,
	#side-bottom {
		position: absolute;
		width: 16em;
		right: 0.25em;
	}
	#side-top { top: -0.5em; }
	#side-bottom { top: 8em; }
	#side-mid {
		min-height: 16.25em !important;
		margin: 0em 24em 0.25em 0.25em !important;
	}
}

@media screen and (max-width: 640px) and (max-resolution: 1dppx),
screen and (min-resolution: 1.2dppx) {
	body {
		margin: 0;
        background: url(/img/TreeBarkingHaloLow.jpg) 
			no-repeat center center fixed;
    	background-size: cover;
    	color: #dddd66;
		font-size: 0.85em;
	}
.desktop {
        visibility: hidden;
	display: none;
}
.mobile {
        visibility: visible;
	display: initial;
}
.quickicons { left: -48px; transform: scale(0.75); }
.contact-mobile {
        visibility: hidden;
	display: none;
}
#cssmenu > ul > li > .separator,
#cssmenu > ul > li > a {
        padding: 0.75em 1em !important;
}
	.title {
        font-family: 'Lora', 'Gentium', serif;
        text-align: center;
        text-shadow: 0px 0px 16px #000, 1px 1px 0px #000000;
        margin: 0em 1.2em;
        color: #ffffff;
	}
	blockquote.bubbletext p {
	    margin: 0.5em 0.25em;
		font-size: 1em;
	}
	blockquote.bubbletext::after {
		left: 12em;
	}
	.logoR {
		top: -15px;
	}
	.logoL { right: 0; }
	.logo {
		transform: scale(.55);
		top: 0.5em;
	}
#thumbs {
	max-height: 400px;
	overflow-y: scroll;
}
#thumbs > a {
	margin: 0.7em;
}

	img.pill {
		transform: scale(.75);
		margin: 1em 0;
	}
	#menubar {
		font-size: .80rem !important;
	}
	#content {
		position: relative;
		width: 100%;
		top: 4em;
		left: 0;
		margin: 0;
	}
	#main {
		margin: 0;
	}
	#footer-1 { margin-left: 0 !important; margin-right: 0 !important; }
	#footer-2 { margin-left: 0.25em !important; margin-right: 0.25em !important; }
	#footer { margin: 3em 0.25em; }
	#sidebar {
		position: relative;
		margin: 2em 0;
	}
}

@media screen
and (min-width: 640px)
and (min-resolution: 1.5dppx)
and (max-width: 800px)
and (orientation: landscape) {
	body {
		margin: 0;
        background: url(/img/TreeBarkingHaloMed.jpg) no-repeat center center fixed;
    	background-size: cover;
		min-height: 100%;
    	color: #dddd66;
		font-size: 1em;
	}
.desktop {
        visibility: hidden;
	display:none
}
.mobile {
        visibility: visible;
	display: initial;
}
.contact-mobile {
        visibility: visible;
	display: initial;
}
#cssmenu > ul > li > .separator,
#cssmenu > ul > li > a {
        padding: 0.75em 1em !important;
}

	#main-top {
		min-height: 200px;
		position: relative;
	}
	#thumbs {
		max-height: 100px;
		overflow-y: scroll;
		margin: 0.25em !important;
	}
	#thumbs > a {
		margin: 0.25em !important;
	}

	.title {
        font-family: 'Lora', 'Gentium', serif;
        text-align: center;
        text-shadow: 0px 0px 16px #000, 1px 1px 0px #000000;
        margin: 0 9em 0;
        color: #ffffff;
        z-index: 999;
	}
	#content {
		position: absolute;
		width: 100%;
		top: 3.75em;
		left: 0;
	}
	svg {
		position: fixed !important;
		bottom: -60px !important;
	}
	blockquote.bubbletext {
		left: 0 !important;
		margin: 0.25em 0.25em !important;
		width: 30em;
	}
	#main {
		margin: 0.25em 16.75em 0 0.25em;
	}
	#footer { margin: 3em 16.75em 0 0.25em; }
	#footer-1 { margin-left: 0 !important; margin-right: 0 !important; }
	#footer-2 { margin-left: 0.25em !important; margin-right: 0.25em !important; }
	#bottom-spacer {
		height: 12em !important;
	}
	#sidebar {
		position: absolute;
		width: 16em;
		margin: 0;
		top: 0;
		right: 0.25em;
	}
}
.chzn-results li {
        line-height: 1em;
	color: #666;
}
.chzn-results li.active-result {
	color: #002;
}
.content {
	background-color: #000;
	background: linear-gradient(rgba(35,35,35,0.65), rgba(10,10,10,0.6), rgba(0,0,0,0.6));
        backdrop-filter: blur(5px);
	border: 1px solid rgba(30,30,30,0.4);
	border-radius: 5px;
	filter: url(/img/filters.svg#drop-shadow);
	-webkit-filter: drop-shadow(3px 3px 0.2em #000000);
	filter: drop-shadow(3px 3px 0.2em #000000);
	box-shadow: 2px 3px 16px rgba(0,0,0,0.6);
	color: #ffffff;
	font-family: "Roboto", "Liberation Sans", "Droid Sans", "Arial", sans-serif;
	font-weight: 300;
}

strong, b {
	font-weight: 500;
}

#main-top { margin: 0.5em 0.25em 1em; min-height: 9.75em; padding: 1em 1em 1em; position: relative; }
#main-under { margin: 0.5em 0.25em 1em; min-height: 1em; padding: 1em; }
#side-top { margin: 0.5em 0.25em 0;  padding: 0.5em 1em 0.5em; }
#side-mid { margin: 1em .25em 0; min-height: 5.5em; padding: 0 1em 0.5em; font-size: 0.8em; }
#side-bottom { margin: 1em .25em 5em;  padding: 1em; }
#footer-1 { margin: 0 0.5em 0; padding: 0em 1em 0em 1em; }
#footer-2 { margin: 0 1em 0; padding: 0em 1em 1em 1em; font-size: 0.7em; }

#bottom-spacer {
	visibility: hidden;
	height: 8em;
	margin: 0 4em 0 2em;
}

.quickicons {
	position: relative;
	top: 5px;
	animation: slideleft 2s;
}

.animatedtitle {
	position: relative;
	animation: slideup 3s ease-out, fadein 4s;
}

.breadcrumb span {
	color: #000;
}
.breadcrumb a span {
	color: #04A;
}

.title h1 {
	font-size: 2.5em;
	font-family: "Liberation Sans", "Droid Sans", "Arial", sans-serif;
	font-weight: normal;
	text-align: center;
	text-shadow: 0px 0px 1em #000, 4px 4px 2px #000000;
	color: #ffffff;
	position: relative;
	margin: 1.75em 0em 0.25em;
	animation: slidedown 3.5s ease-out, fadein 3.5s, shrink 4s ease-out;
	animation-fill-mode: forward;
}

@keyframes slideup {
    from { top: 1200px; }
    to { top: 0px; }
}
@keyframes popup {
	from { bottom: -600px; transform: scale(0.5); }
	to { bottom: 0px; transform: scale(1); }
}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fadeout {
	from { opacity: 1; visibility: visible; }
	to { opacity: 0; visibility: hidden; }
}
@keyframes slidedown {
	from { top: -200px; }
	to { top: 0; }
}

@keyframes slideleft {
	from { left: -800px; }
	to { left: 0; }
}

@keyframes slideright {
	from { right: -1200px; }
	to { right: 0; }
}

@keyframes blowup {
	from { opacity: 1; transform: scale(1.1); }
	to { opacity: 0; transform: scale(25); }
}

@keyframes spinflip {
	from { transform: rotateX(0deg) rotateZ(0deg); }
	to { transform: rotateX(360deg) rotateZ(720deg); }
}

@keyframes shrink{
    from { transform: scale(5); }
    to { transform: scale(1); }
  }

@keyframes grow {
	from { transform: scale(.5); }
	to { transform: scale(1); }
}

@keyframes balloon {
	from { transform: scale(1); }
	to { transform: scale(1.25); }
}

@keyframes bulge {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

@keyframes pulsate {
      0%{ transform: scale(1); }
      50%{ transform: scale(1.025); }
    100%{ transform: scale(1); }
  }

.item-open-anim {
	animation: blowup 2.5s ease-in-out, fadeout 3s linear !important;
	animation-fill-mode: forwards;
}

#topbar {
	padding: 10px;
	position: fixed;
	left: 0;
	top: 0%;
	width: 100%;
	background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6), rgba(35,35,35,0.6));
	font-family: 'Lora', "Gentium", serif;
	text-align: center;
	text-shadow: 1px 1px 0px #000000;
	border-bottom: 1px solid rgba(10,40,10,0.8);
	box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
        backdrop-filter: blur(5px);
	z-index: 150;
}

h3 {
	color: #0088ff;
	text-shadow: 3px 3px 3px #000;
	font-family: "Lora", "Gentium", serif;
}

h2 {
	color: #CCCC00;
	text-shadow: 3px 3px 3px #000;
	font-family: "Lora", "Gentium", serif;
}

h4 {
	font-family: "Lora", "Gentium", serif;
}

.pull-right {
	float: right;
}
.pull-left {
	float: left;
}