/* overall layout based on http://www.dynamicdrive.com/style/layouts/item/css_fixed_layout_21_fixed_fixed/ */

body{
margin:0;
padding:0;
line-height: 1.5em;
background-color:#666666;
color: white;
font: 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

a:link {
color:#FFFFCC;
text-decoration:none;
border-bottom: 1px dotted #FFFFCC;
}

a:visited {
color:#DDD; /*#FFEFD5;*/
border-bottom: 1px dotted #DDD;
}

a:hover {
border-bottom: 1px solid;
background-color: rgba(120,120,120,0.4);
}

a.no-underline:link {
border-bottom: none;
}

a.no-underline:hover {
background-color: initial;
}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background: url("/images/shutter.png") left 50px top 50px no-repeat;
}

#topsection h1{
margin: 0;
padding-top: 15px;
font: bold 30px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

#topsection h2{
color: lightblue;
font: bold 16px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#contentcolumn h1{
color: #FFFFCC;
font: 18px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
text-align: center;
}

#contentcolumn h2{
color: #FFFFCC;
background-color: rgba(70,70,70,0.5);
font: 16px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
text-align: center;
padding: 5px;
border-radius: 10px;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}

#footer p{
font-size: 11px;
}

.innertube{
margin: 0px 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

.divider{
color: grey;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 840px){ /* responsive layout break point */
	#maincontainer{
	width: 100%;
	}
	
	#contentwrapper{
	float: none;
	}
	
	#leftcolumn{
	float: none;
	margin-left: 0;
	}
	
	#contentcolumn{
	margin-left: 0;
	}

	#footer{
	clear: both;
	}

	#maincontainer{
	background-position: center top 50px;
	}

	#main-title {
	text-align: center;
	width: 100%;
	}

	#toolbar {
	width: 100%;
	}
}

@media (max-width: 570px){ /* responsive layout break point */
	#uniform-steps-img {
	width: 95%;
	}
}

/* menu, based on http://www.dynamicdrive.com/style/csslibrary/item/image-marker-list-menu/ */

.markermenu{
width: 180px; /*width of menu*/
margin-top: 25px;
}

.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
}

.markermenu ul li a{
background: url(/images/menu_out.gif) no-repeat right 10px center;
background-color: rgba(100,100,100,0.5);
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
text-align: right;
color: lightgrey;
display: block;
width: auto;
padding: 4px 0;
padding-right: 33px;
text-decoration: none;
border: 1px solid grey;
border-radius: 10px;
margin-bottom: 5px;
}

* html .markermenu ul li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: lightgrey;
}

.markermenu ul li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(/images/menu_over.gif); /*onMouseover image change */
}

/* Holly Hack for IE \*/
* html .markermenu ul li { height: 1%; }
* html .markermenu ul li a { height: 1%; }
/* End */


/* search box */

#search-btn {
background: lightblue;
color: white;
padding: 4px 6px;
border-radius: 0 10px 10px 0;
border: 0 none;
font-weight: bold;
width: 20px;
height: 24px;
float:right;
}
 
#search-box {
background: #eee;
padding: 4px;
border-radius: 10px 0 0 10px;
border: 0 none;
width: 152px;
height: 16px;
color: black;
}

#search-box:hover {
background: #fff;
}

#search-bar {
border-radius: 10px;
margin-top: 15px;
margin-bottom: 15px;
}


/* search boxes on 404.php */

#search-bar-404 {
border-radius: 10px;
margin-top: 15px;
margin-bottom: 15px;
width: 300px;
}

#search-box-404 {
background: #eee;
padding: 4px;
border-radius: 10px 0 0 10px;
border: 0 none;
width: 272px;
height: 16px;
color: black;
}

#search-box-404:hover {
background: #fff;
}

#search-btn-piwigo {
background: #eaea75;
color: black;
padding: 4px 6px;
border-radius: 0 10px 10px 0;
border: 0 none;
font-weight: bold;
width: 20px;
height: 24px;
float:right;
}


/* random image */

#random-image img{
float: right;
border: 1px solid grey;
}

#random-label p{
color: lightgrey;
margin: 3px 0px;
font-size: 11px;
text-align: center;
}

#random-box {
float: right;
padding: 0px 10px;
}

#random-spacer {
display: inline-block;
width: 100%;
}

#random-box:hover #random-label p {
color: white;
}

#random-box:hover img {
border: 1px solid lightgrey;
}


/* uptime monitoring */

#uptime-monitor {
float: right;
padding: 10px;
padding-bottom: 0;
}

#uptime-spacer {
display: inline-block;
width: 100%;
}

#uptime-monitor img {
border: 1px solid grey;
}

#uptime-monitor img:hover {
border: 1px solid white;
}


/* security seal */

#security-seal {
float: right;
padding: 10px;
border-top: 0;
padding-top: 0;
padding-bottom: 0;
}

#security-spacer {
display: inline-block;
width: 100%;
}

#security-seal img {
width: 85px;
border: 1px solid grey;
}

#security-seal img:hover {
border: 1px solid white;
}


/* perceptually uniform steps */

#uniform-steps-img {
display: block;
border: 5px solid #f4f4f4; 
margin: 5px auto;
}


/* toolbar */

#main-title {
float:left;
}

#toolbar {
float:right;
}

#toolbar-inner {
margin:auto;
width: 400px;
max-width: 100%;
}

img.toolbar-button {
float:left; 
margin: 10px 5px;
padding: 0 5px;
box-shadow: 0 0 5px 5px #666666 inset;
max-width: 100%;
height: auto;
width: 80%;
}

img.toolbar-button:hover {
background-color: #ffffcb;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #444;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    opacity: 0;
    transition: opacity 1s;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    width: 120px;
    top: 95%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
} 

.tooltip {
	width: 24%;
}

.tooltiptext {
    width: 120px;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #444 transparent;
} 

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* auto-scroll image slider */

#image-slider-container {
	width: 100%;
	overflow: hidden;
	margin: 0px auto;
}

.image-slider {
	height: 105px;
	width: 2200px;
}

.image-slider img {
	width: 160px;
	height: 90px;
	transition: all 0.5s ease;
	margin: 5px 5px;
	opacity: 0.8;
	border-radius: 5px;
}

.image-slider a {
	border-bottom: none;
	outline: 0;
}

.image-slider a:hover {
	background-color: inherit;
}

.image-slider img:hover {
	transform: scale(1.1);
	opacity: 1;
	border-radius: 0px;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

.image-slider-first {
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1360px;
 }
}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1360px;
 }
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1360px;
 }
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1360px;
 }
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -1360px;
 }
}


/* image gallery - panoramas, slideshows */

div.img {
margin: 5px;
border: 1px solid #777;
float: left;
width: 180px;
height: 134px;
background-color: rgba(85,85,85,0.8);
}

div.img:hover {
border: 1px solid #ccc;
}

div.img:hover .desc {
color: white;
}

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

div.desc {
padding: 5px;
text-align: center;
color: #ddd;
}


/* CC licence & donate */

#CC-licence-donate {
clear: both;
padding: 10px;
padding-top: 20px;
display: table;
max-width: 500px;
}

.CC-licence-donate-row {
display: table-row;
}

.CC-licence-donate-cell-1 {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px;
}

.CC-licence-donate-cell-2 {
display: table-cell;
vertical-align: middle;
padding: 5px;
}

#CC-licence-img {
border: 1px solid grey;
}

#CC-licence-img:hover {
border: 1px solid white;
}

#donate-img {
padding: 1px;
border: 1px solid grey;
border-radius: 12px;
}

#donate-img:hover {
border: 1px solid white;
}


/* slideshow */

p.subtitle {
text-align: center;
}

#video1 {
width: 560px;
height: 315px;
margin: auto;
margin-top: 20px;
margin-bottom: 30px;
background: #333;
padding: 5px;
}

#slideshows-note {
clear: both;
padding-top: 20px;
}

ul.no_bullets {
list-style-type: none;
padding: 0;
margin-left: 1em;
}


/* contact */

#contacts {
text-align: center;
background-color: rgba(70,70,70,0.5);
border-radius: 10px;
padding: 5px;
}


/* panorama */

#panorama-frame {
width: 96%;
max-width: 590px;
height: 300px;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
padding:5px;
background-color:#3F3F3F;
border:1px solid black;
}

#pano-instructions {
text-align: center;
}

#panorama {
width: 100%;
height: 100%;
}

#music-toggle {
position: absolute;
top: 90px;
left: 4px;
width: 26px;
height: 26px;
text-align: center;
background-image: url('../images/music-sprites.svg');
}

.music-toggle-inactive {
background-position: 0 -26px;
}

.pnlm-control:hover {
    background-color: #eeeeee !important;
}

.pnlm-control:active {
    background-color: #ffffff !important;
}


/* articles */

pre.code-block {
margin: 5px;
padding: 5px;
background-color: #707070;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;/*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 3px 1em; /* cell padding */
}

.pure-table thead {
    background-color: #757575;
    text-align: center;
    vertical-align: bottom;
}

.list-to-left {
padding-left: 15px;
}

a.hover-frame img {
border: 1px solid rgba(0,0,0,0);
}

a.hover-frame:hover img {
border: 1px solid lightgrey;
}

p.quote {
padding-left: 15px;
font-style: italic;
border-left: 1px solid #777777;
}

img.medium_centered {
width: 70%;
display: block;
margin: 0 auto;
}

iframe.centered {
display: block;
margin: 0 auto;
}

#CC_image {
border-width: 0;
float: left;
padding-top: 13px;
padding-right: 10px;
margin: 5px;
}

/* downloads */

img.download-button {
padding: 5px 5px;
box-shadow: 0 0 5px 5px #666666 inset;
height: 30px;
width: 30px;
}

img.download-button:hover {
background-color: #ffffcb;
}

td.centered {
text-align: center;
}


.striped-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.striped-table td,
.striped-table th {
    border-left: 1px solid #cbcbcb;/*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 3px 1em; /* cell padding */
}

.striped-table thead {
    background-color: #757575;
    text-align: center;
    vertical-align: bottom;
}

.striped-table tr:nth-child(even) {
background-color: #6c6c6c
}

.striped-table tr:nth-child(even) img.download-button {
box-shadow: 0 0 5px 5px #6c6c6c inset;
}