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

body {
	/* color:#ff9900; */
	color: #BFBFBF;
	background: #666666;
}
	
a img {
	border: none;
}

a:link {color: #ff9900;}
a:visited  {color: #ff9900;}
a:active  {color: #ff9900;}
a:hover  {color: #ff9900;}
a {text-decoration: none;}
	
.fakelink {
	color:#ff9900;
	cursor:pointer;
}

.content {
	margin: 0 auto;
	font: 13px Verdana, sans-serif;
	width: 1024px;
}

.leftcontent {
	width: 445px;
	height:400px;
	margin-top: 55px;
	margin-left: 38px;
	text-align:left;
	float:left;
}

.maincontent {
	width:444px;
	height:400px;
	margin-top:55px;
	margin-left:535px;
	text-align:left;
	position:relative;
}

.header {
	background-color:#333;
	width:1024px;
	height:23px;
	position:fixed;
	top:15px;
	text-align:left;
	font: 13px Verdana, sans-serif;
	text-indent:10px;
	border:1px;
	border-radius:8px;
	z-index:20;
}

.headertext {
	position:relative;
	top:2px;
}

.footer {
	background-color:#333;
	width:1024px;
	height:23px;
	position:fixed;
	bottom:15px;
	text-align:left;
	font: 13px Verdana, sans-serif;
	text-indent:10px;
	border:1px;
	border-radius:8px;
}

.footertext {
	position:relative;
	top:2px;
}

.iconcontainer {
	background:url(img/iconbackground.png);
	border:5px solid #333;
	text-align: left;
	display:block;
	position:absolute;
	bottom:60px;
	margin-left:32px;
	border-radius:10px;
	-webkit-box-shadow: 5px 5px 5px #333;
	-moz-box-shadow: 5px 5px 5px #333;
	box-shadow: 5px 5px 5px #333;
	padding-top:3px;
}

.mylocation {
	background:url(img/iconbackground.png);
	border:5px solid #333;
	text-align: center;
	display:block;
	border-radius:10px;
	-webkit-box-shadow: 5px 5px 5px #333;
	-moz-box-shadow: 5px 5px 5px #333;
	box-shadow: 5px 5px 5px #333;
	padding-top:3px;
	min-width:22px;
	font: 10px Verdana, sans-serif;
	padding:5px 15px;
	color:#ff9900;
}

.mylocationtxt {
	font: 10px Verdana, sans-serif;
	color:#BFBFBF;
}

.whatsnewbox {
	background:url(img/iconbackground.png);
	border:5px solid #333;
	text-align: left;
	display:block;
	border-radius:10px;
	-webkit-box-shadow: 5px 5px 5px #333;
	-moz-box-shadow: 5px 5px 5px #333;
	box-shadow: 5px 5px 5px #333;
	padding-top:3px;
	min-width:22px;
	font: 10px Verdana, sans-serif;
	padding:5px 15px;
	color:#ff9900;
}

.whatsnewboxtxt {
	font: 10px Verdana, sans-serif;
	padding-right:5px;
	color:#BFBFBF;
}

.icon {
	float:left;
	text-align: center;
	display:block;
	font: 9px Verdana, sans-serif;
	padding:5px 15px;
}

.iconf {
	border-radius:10px;
}

.mainnav {
	margin: 0 30px;
	position: relative;
	left:1px;
	text-align:left;
}

.logo {
	position: relative;
	top:40px;
	left:280px;
	z-index:10;
}
	
.map {
	opacity:0.2;
	filter:alpha(opacity=20);
	display:block;
	position:relative;
	margin:auto auto;
}

.worldmapcontainer {
	width:800px;
	height:396px;
	position:relative;
	margin:15px auto;
}

.photoyear{
	padding:5px;
}

.flag {
	-webkit-box-shadow: 3px 3px 3px #333;
	-moz-box-shadow: 3px 3px 3px #333;
	box-shadow: 3px 3px 3px #333;
	margin:3px;
}

.flagtitle {
	font-size:smaller;
	margin:3px;
}

.topgallerycaption {
	text-align:center;
	margin-top:5px;
	font:10px Verdana, sans-serif;
}

.gallery {
	background-image:url(img/gallerybackground.png);
	border:5px solid #333;
	border-radius:8px;
	-webkit-box-shadow: 5px 5px 5px #333;
	-moz-box-shadow: 5px 5px 5px #333;
	box-shadow: 5px 5px 5px #333;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
}

.gallery-wt-dest {
	width:400px;	
}

.gallery-photos {
	width:570px;
	height:430px;
	position:relative;
	top:50px;
	display:block;
	margin:auto auto;
}

.hiddengallery  {
	visibility:hidden;
	position:absolute;
	top:20px;
}

.galleria-bar {
	visibility:hidden;
}

.galleria-progress {
	display:none!important;
}

.galleria-stage {
    bottom: 0;
	background:url(img/gallerybackground.png);
}

.video {
	display:block;
	margin:auto auto;
	position:relative;
	top:100px;
}

.backlink {
	position: absolute;
	width:1024px;
	bottom:10px;
	text-align:center;
}

.prevdest {
	float:left;
	padding-left:5px;
	font-size:smaller;	
}

.nextdest {
	float:right;
	padding-left:10px;
	font-size:smaller;	
}


/* Map Markings */

.mapbubble {
	position:absolute;
	top:-40px;
	left:-2px;
	background-color:#444;
	padding-left:8px;
	padding-right:8px;
	padding-top:2px;
	padding-bottom:4px;
	border:1px;
	border-radius:4px;
	visibility:hidden;
	text-align:center;
	min-width:80px;
	white-space:nowrap;
	z-index:10;
}

.mapMark {
	position: absolute;
	width: 15px;
	height: 15px;	
	cursor: pointer;
}

.flexbox {
	width: 15px;
	height: 15px;	
	
	display:-moz-box;
	-moz-box-orient:horizontal;
	-moz-box-pack:center;
	-moz-box-align:center;
	-moz-box-sizing:content-box;
	
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	
	display:box;
	box-orient:horizontal;
	box-pack:center;
	box-align:center;
	box-sizing:content-box;
	
	/* activate for testing */
	/*  border:1px solid #000; */
}

.mapMarkGlow { /* Outer glow */
	width: 15px;
	height: 15px;
	margin-top:-20px;
	margin-left:-5px;
	-webkit-border-radius: 19px;
	-moz-border-radius: 19px;
	border-radius: 19px;
	border: 5px solid #FC6;
	opacity: 0;

	-webkit-animation-name: webkitsonarpulse;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: .15s;
	
	-moz-animation-name: mozsonarpulse;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: .15s;
}

.mapMarkShape { /* Inner shape */
	width: 8px;
	height: 8px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ff6600;
	-webkit-box-shadow: 2px 3px 5px #333;
	-moz-box-shadow: 2px 3px 5px #333;
	box-shadow: 2px 3px 5px #333;
	border:1px solid #FC6;
	z-index:1;
	
	/* temporary workaround, FF switches to border-box for what ever rease and it cant be changed.
	   	-moz-box-sizing:content-box; unfortunately has no effect in FF */
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.mapMarkShapePrev { /* Inner shape */
	width: 8px;
	height: 8px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #333;
	-webkit-box-shadow: 2px 3px 5px #333;
	-moz-box-shadow: 2px 3px 5px #333;
	box-shadow: 2px 3px 5px #333;
	border:1px solid #333;
	
	/* temporary workaround, FF switches to border-box for what ever rease and it cant be changed.
	   	-moz-box-sizing:content-box; unfortunately has no effect in FF */
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

@-webkit-keyframes webkitsonarpulse {
	0% {
		-webkit-transform: scale(.1);
		opacity: 0;
	}
	1% {
		-webkit-transform: scale(.1);
		opacity: 0.6;
	}
	60% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes mozsonarpulse {
	0% {
		-moz-transform: scale(.1);
		opacity: 0;
	}
	1% {
		-moz-transform: scale(.1);
		opacity: .6;
	}
	60% {
		opacity: 0;
		-moz-transform: scale(1);
	}
	100% {
		opacity: 0;
		-moz-transform: scale(1);
	}
}


#image-container {
    text-align:center;
 }
#gecko {
    margin:20px auto;
 }
.hide {
    display:none;
 }
.visible {
    display:block;
}

.gecko {
	display:none;
	position:absolute;
}

/* Speech Bubble Icon forked from http://desandro.com/resources/css-speech-bubble-icon/ */

.spch-bub-inside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 19px;
  left: 10px;
  display: block;
  border-left: 20px solid #444; 
  border-bottom: 20px solid #FFF; /* IE fix */
  border-bottom: 20px solid rgba(0,0,0,0);
  overflow: hidden; /* IE fix */
}