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


/********** HTML ********/

body{
	margin: 0;
	padding: 0;
	font-family: "georgia", helvetica, serif;
	font-size: 85%;
	color: #111;
	line-height:1.666em;
	} 

img, a img{
	border: none;
	}
	
a{
	text-decoration: none;
	color: #57b4f6;
}

a:hover{
	text-decoration: underline;
	color: #39F;
}
	
	
ul{
	list-style-type: circle;
	margin: 0;
	padding: 0 0 0 18px;
	}
	
	
/********** HEADER ********/



#header-left{
	float: left;
	width: 300px
	}

#header-left h1{
	display: block;
	width: 270px;
	height: 39px;
	text-indent: -9999px;
	background: transparent url('../images/logo_infondoalmar.png') no-repeat 0 0;
	margin: 4px 0 0 0;
}

h1.fullscreen{
	position: absolute;
	display: block;
	z-index: 10;
	top: 20px;
	left: 40px;
	width: 270px;
	height: 39px;
	text-indent: -9999px;
	background: transparent url('../images/logo_infondoalmar_white.png') no-repeat 0 0;
}

#header-left h1 a, h1.fullscreen a{
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}

#header-left h2{
	margin:  0 0 0 4px;
	font-size: 105%;
	font-weight: normal;
	font-style: italic;
	color: #666;
}


#header-right{
	float: right;
	width: 500px;
}
	
#header-right ul{
	float: left;
	list-style: none;
	margin: 0 0 0 5px;
	padding: 0;
}
	
#header-right li{
	display: inline;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	border-right: 2px dotted #fff;
}


#header-right li.last{
	border: none;
}


ul#languageSelecter{
	font-size: 80%;
	float: right;
	margin: -4px 20px 0 0;
}
	
ul#languageSelecter li{
	background-color: #666;
	text-align: center;
	padding: 2px 4px 2px 4px;
	border: none;
	margin: -0 4px 0 0;
}

ul#languageSelecter li:hover{
	padding: 2px 4px 6px 4px;
}

ul#languageSelecter li.current{
	background-color: #ccc;
}

ul#languageSelecter li a{
	text-decoration: none;
	color: #fff;
}

ul#languageSelecter li a:hover{
	text-decoration: none;
}

#viz-selecter{
	position: absolute;
	width: 350px;
	top: 60px;
	left: 34px;
	padding: 0;
	font-size: 80%;
	color: #fff;
	z-index: 5;
}

#viz-selecter-nomap{
	width: 350px;
	padding: 0;
	font-size: 80%;
	color: #fff;
}

#viz-selecter a, #viz-selecter-nomap a{
	display: block;
	float: left;
	width: 65px;
	height: 20px;
	text-align: center;
	border-bottom: 2px solid #57b4f6;
	margin: 0 4px 0 0;
	padding: 0px 0px 4px 0px;
}

#viz-selecter a:hover, #viz-selecter-nomap a:hover{
	text-decoration: none;
	}

#viz-selecter span, #viz-selecter-nomap span{
	display: block;
	float: left;
	width: 65px;
	height: 20px;
	text-align: center;
	border-bottom: 2px solid white;
	margin: 0 4px 0 0;
	background: transparent url('../images/pin.png') bottom center no-repeat;
	padding: 0px 0px 4px 0px;
	color: white;
	}
	
#viz-selecter-nomap span{
	color: black;
	}

/********** CONTENT ********/

.content{
	width: 960px;
	margin: 0 auto;
	text-align: justify;
	}

#menu-fullscreen{
	position: absolute;
	z-index: 10;
	right: 20px;
	width: 500px;
	}

#gmap.large{
	width: 100%;
	height: 400px;	
	border-top: 8px solid #57b4f6;
	border-bottom: 4px solid #57b4f6;
	}
	
#gmap.fullscreen{
	width: 100%;
	height: 65%;
	margin: 0; padding: 0;
	}
	
#gmap.chrono{
	width: 100%;
	height: 20%;
	margin: 0; padding: 0;
	}
	
#gmap.small{
	margin: 4px 0 0 0;
	width: 400px;
	height: 200px;
	float: right;
	border: 2px solid #57b4f6;
	}
	
.chronoContainer{
	position: absolute;
	bottom: 0;
	height: 80%;
	}
	
.map-tab{
	float: right;
	width: 21%;
	margin: 30px 0 0 0;
	height: 300px;	
	border: 1px solid black;
	}
	
.no-location{
	margin: 8px 0 0 0;
	padding: 12px;
	font-size: 120%;
	border: 1px solid black;
	}
	
#list{
	width: 100%;
	border-top: 8px solid #57b4f6;
}

#player{
	width: 100%;
	border-top: 8px solid #57b4f6;
	}


#dataset{
	width: 100%;
	height: 300px;
	border-top: 8px solid #57b4f6;
	background: #57b4f6 url('../images/dataset.jpg') center no-repeat;
	}
	

#contribute{
	width: 100%;
	height: 300px;
	border-top: 8px solid #57b4f6;
	background: #57b4f6 url('../images/contribute.jpg') center no-repeat;
	}

#about{
	width: 100%;
	height: 300px;
	border-top: 8px solid #57b4f6;
	background: #57b4f6 url('../images/about.jpg') center no-repeat;
	}

#mobile{
	width: 100%;
	height: 300px;
	border-top: 8px solid #57b4f6;
	background: #57b4f6 url('../images/mobile.jpg') center no-repeat;
	}
	
#credits{
	width: 100%;
	height: 300px;
	border-top: 8px solid #57b4f6;
	background: #57b4f6 url('../images/credits.jpg') center no-repeat;
	}

#containerTimeline{
	padding: 2px 8px 2px 8px;
	
	}
	
#containerTabs{
	position: absolute;
	width: 100%;
	height: 35%;
	z-index: 2;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
	overflow: auto;
	font-size: 85%;
	}


	
#tabs div div{
	margin: 0; padding: 0;
	}

#tabs div a{
	display: block;
	float: left;
	width: auto;
	font-size: 82%;
	border: 1px solid #57b4f6;
	padding: 0px 8px 0px 2px;
	margin: 2px 4px 0 0;	
	background-color: #fcfcfc;
	color: #333;
}


#tabs div a:hover{
	background-color: #57b4f6;
	color: #fff;
	text-decoration: none
}

	
h3.section-title{
	margin: 6px 0 12px 0;
	font-size: 180%;
	font-weight: normal;
	font-style: italic;
	letter-spacing: -1px;
	text-transform: capitalize;
	}
	
h4.authors{
	margin: 6px 0 12px 0;
	font-size: 140%;
	font-weight: normal;
	font-style: italic;
	letter-spacing: -1px;
	}
	
ul#box-show{
	float: right;
	width: 550px;
	list-style: none;
	margin: 0; padding: 0;		
	font-size: 85%;
	margin: -26px 0px 24px 0px;
}

ul#box-show li{
	display: inline;
	padding: 2px 8px 2px 8px;
	background-color: #E0E0E0;
	margin: 0 0 0 10px;
	text-align: center;
	font-size: 85%;
}

ul#box-show li a{
	color: #000;
}


.infoWindowContent{
	width: 100%;
	}
	
	
#titleBox{
	position: absolute;
	top: 28px;
	left: 320px;
	z-index: 10;
	font-size: 250%;
	color: white;
	letter-spacing: -2px;
	}

/********** TIMELINE ********/

#tl{
	height: 250px;
	border-top: 2px solid #57b4f6;
	border-bottom: 2px solid #57b4f6;
	}

.timeline-default {
    font-family: georgia, sans-serif;
	font-size: 8pt;
    border: 1px solid #aaa;
}

.tape-special_event, .small-special_event {background-color: orange;}

.footnotes {
    background: #eee;
    padding: 0.25em;
}

.controls {
    margin: 1em 0;
    padding: 0.5em;
}


div.timeline-event-icon {
	border: 1px solid #aaa;
	padding: 1px;
	background: white;
}

div.timeline-event-icon-default {
	border: none;
	padding: 0px;
}
	
#details-from-timeline{
	border: 1px solid #57b4f6;
	float: left;
	width: 545px;
	margin: 4px 0 0 0;
	}


/********** FOOTER ********/


	
.last-edit{
	font-size: 90%;
	margin: 42px 0 0 0;
	padding: 0px 4px 0 4px;
	background-color: #fff;
	font-weight: bold;
	}
	
/********** GENERAL ********/


a.letter-index{
	border: 1px solid #57b4f6;
	background-color: #fafafa;
	padding: 1px 4px 1px 4px;
	margin: 0 4px 0 0;
	color: black;
	font-size: 85%;
	}

a.letter-index:hover{
	background-color: #e0e0e0;
}

h2.letter-top a{
	display: block;
	padding: 18px 8px 18px 8px;
	border: 1px dotted #ccc;
	background-color: #fafafa;
	font-size: 160%;
	color: black;
	float: left;
	}

a.top-link{
	display: block;
	float: right;
	padding: 18px 8px 18px 8px;
	border: 1px dotted #ccc;
	background-color: #fafafa;
	}
	
.clear{
	clear: both;
	}
	
.ruler{
	clear: both;
	height: 1px;
	border-bottom: 1px dotted #333;
	margin: 24px 0 24px 0;
	}
	
.contentBox{
	border: 1px solid #57b4f6;
	padding: 6px;
	font-size: 85%;
	text-align: left;
	}
	
.contentBox ul{
	margin: 0; padding: 0 0 0 12px;
	}
	
.chronologyList{
	font-size: 90%;
	padding: 4px;
	border-top: 4px solid #57b4f6;
	}
	
.chronologyList span{
	font-size: 90%;
	color: #666;
	}

a.closefrm{
	display: block;
	top: 0px;
	float: right;
	font-size: 80%;
	border: 1px dotted #333;
	background-color: #fff;
	color: #000;
	padding: 1px 8px 1px 8px;
	margin: 0;
	}
	
.go-right{
	float: right;
	font-size: 90%;
	}
	
.go-left{
	float: left;
	font-size: 90%;
	}
	
.f_right{
	float: right;
	width: 48%;
	text-align: left;
	}
	
.f_left{
	float: left;
	width: 48%;
	text-align: left;
	}
	
.f_33{
	float: left;
	width: 33%;
	text-align: left;
	}

div.ship-box{
	border: 1px solid #ccc;
	background-color: #fafafa;
	margin: 24px 0 0 0;
	padding: 12px;
	}

 h3.ship-ico{
 	background: transparent url('../images/icons/ship_out_base.png') left top no-repeat;
	padding: 12px 0 0 30px;
	height: 37px;
 	}
	
div.ship-box:hover{
	background: #E9E9E9 url('../images/stripe.png') right top no-repeat;
	}	
	
.ship-box:hover h3.ship-ico{
 	background: transparent url('../images/icons/ship_over_base.png') left top no-repeat;
	}
	
span.aggr-data{
	display: block;
	float: left;
	width: 200px;
	margin: 0 8px 0 0;
	text-align: right;
	}
	
#containerTabs h4 a{
	display: block;	
	width: 90%;
	float: none;
	border: 1px solid #ccc;
	background-color: #f1efed;
	}


.spread a{
	float: none!important;
	display: inline!important;
	}

.imgborder{
	border: 1px solid black;
	padding: 2px;
}

/********** FORMS ********/


.frm1{
	width: 200px;
	border: 1px solid black;
	background: white;
	padding: 2px 4px 2px 4px;
	}


.frm2{
	width: 500px;
	height: 200px;
	padding: 2px 4px 2px 4px;
	border: 1px solid black;
	background: white;
	}
	
.frm4{
	width: 400px;
	height: 100px;
	padding: 2px 4px 2px 4px;
	border: 1px solid black;
	background: white;
	}


		
.frm5{
	width: 250px;
	height: 150px;
	padding: 2px 4px 2px 4px;
	border: 1px solid black;
	background: white;
	}
	
.frm3{
	border: 1px solid black;
	background: #e0e0e0;	
	padding: 2px 4px 2px 4px;
	}
	
textarea.frm4-mobi{
	width: 250px!important;
	height: 200px;
	border: 1px solid black;
	background: white;
	padding: 2px 4px 2px 4px;	
	resize: none;

}
	
input.frm3-mobi{
	width: 200px!important;
	height: 50px;
	border: 1px solid black;
	background: #e0e0e0;	
	padding: 2px 4px 2px 4px;
	resize: none;

	
	}

.frm3:hover{
	background-color: #333;
	color: #fff;
	}

.frm1:hover, .frm2:hover, .frm4:hover{
	background: #fafafa;
}

.frm1:focus, .frm2:focus, .frm4:focus{
	background: #FF0;
}

.form-results{
	font-size: 180%;
	background-color: #ff0;
	color: #000;
	border: 1px solid #000;
	padding: 12px;
	margin: 24px 0 24px 0;
	}

.form-results-error{
	font-size: 180%;
	background-color: #f00;
	color: #fff;
	border: 1px solid #000;
	padding: 12px;
	margin: 24px 0 24px 0;
	}


.frmHide{
	display: none;
	}

/********** TABS HOME ********/



.ui-widget { font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 1em; }
.ui-widget-content { background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; margin: 0; padding: 4px!important }
.ui-widget-content a { color: #222222; }
.ui-widget-header { background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50%repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
	


/********** TABS ARCHIVE ********/

div.wrap {
	width:78%;
	float: left;
	margin: 0;
}

.wrap .pane  {	
	background:#fff url('../images/h300.png') repeat-x 0 20px;
	display: none;
	padding:20px;
	border:1px solid #999;
	border-top:0;

	_background-image:none;
}

.wrap .pane p {
	margin:-10px 0 -20px 0;	
	text-align:right;
}


/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #666;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(http://static.flowplayer.org/tools/img/tabs/blue.png) no-repeat -420px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
div.panes div.pane {
	display: none;
}



#tabs-3 a, #tabs-4 a{
	border: none!important;
	}
	
	
	
/********** SCREENSHOTS GALLERY ********/



div.slideshow-content {
	display: none;
	float: right;
	width: 650px; 
}
div.slideshow-content a, div.navigation a {
	text-decoration: none;
	color: #777;
}

div.controls {
	margin-top: 5px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}
div.slideshow-container {
	position: relative;
	clear: both;
	height: 452px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('http://www.twospy.com/galleriffic/css/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 650px;
	height: 452px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 650px;
	height: 452px; /* This should be set to be at least the height of the largest image in the slideshow */
	line-height: 452px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: middle;
	border: 1px solid #ccc;
}
div.download {
	float: right;
}
div.caption-container {
	position: relative;
	clear: left;
	height: 75px;
	margin-left: 20px;
}
span.image-caption {
	display: block;
	position: absolute;
	width: 650px;
	top: 0;
	left: 0;
}
div.caption {
	padding: 12px;
}

div.image-title {}

div.navigation {
	text-align: left;
}

ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 10px 5px 0;
	list-style: none;
}
a.thumb {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}