#galleryDeskborder{
      border-radius: 15px;
      box-shadow: 0px 0px 5px #333333, 5px 5px 3px #808080;
      margin-bottom:15px;
      padding-left:15px;
      padding-right:15px;
      padding-top:15px;
      padding-bottom:15px;
      margin-left:15px;
      margin-right:15px;
      margin-top:5px;
}

    

.galleryPadding{
margin-right:170px;
padding:5px;
width:100%;
}

.galleryDescOverview {
    margin-left:90px;
}

#tablePadding{

padding:5px;
}

#overviewBoxPadding{
margin: 0 auto;
padding:5px;
border-spacing:100px;

}

#buttonEC3 {
     background: -moz-linear-gradient(center top , #388FBC, #296889) repeat scroll 0% 0% transparent;
     border-radius: 0.5em;
     border: 1px solid #255F7D;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
     color: #E9EFF3;
     cursor: pointer;
     display: inline-block;
     outline: medium none;
     padding: 0.5em 2em 0.55em;
     text-align: center;
     text-decoration: none;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);

}


.spoiler a {
  color: #000;
  text-decoration: none;
}
 
.spoiler a span {
  display:none;
}
 
.spoiler a:active span, .spoiler a:focus span {
  display: block;
}
 


#divGallTitle {
background-image: radial-gradient(ellipse farthest-corner at left top , #FFFFFF 0%, #808080 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #C0C0C0;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #C0C0C0;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #C0C0C0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-style: solid;
    border-top-width: 1px;
    color: #FFFFFF;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    text-align:center;
    font-size:16px;
         
}

#galleryBorderOverview {
background-image: radial-gradient(ellipse farthest-corner at left top , #FFFFFF 0%, #808080 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #C0C0C0;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid; 
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #C0C0C0;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #C0C0C0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-style: solid;
    border-top-width: 1px;
    color: #FFFFFF;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
     text-align:center;
     font-size:16px;
     
} 

#boxTitlePhotos {
background-image: radial-gradient(ellipse farthest-corner at left top , #FFFFFF 0%, #808080 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #C0C0C0;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-righcenter:t-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #C0C0C0;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #C0C0C0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-style: solid;
    border-top-width: 1px;
    color: #FFFFFF;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
     text-align:center;
     font-size:16px;
     
}

#divGallBorder2 {
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border-top-right-radius:0px;
  border-top-left-radius:0px;

  padding:10px;
  height: 190px;
}




#photoOverviewBorder {
background-image: radial-gradient(ellipse farthest-corner at left top , #FFFFFF 0%, #808080 100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #C0C0C0;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #C0C0C0;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #C0C0C0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-style: solid;
    border-top-width: 1px;
    color: #FFFFFF;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
     text-align:center;
     font-size:16px;
}


#galleryOverviewBorder{
     border-radius: 15px;
     box-shadow: 0px 0px 5px #333333, 5px 5px 3px #808080;
     margin: 10px 0px;
     padding: 5px;
     text-align: center;
     width: 100%;
}

tr#overviewBorder{
    border-top: 10px solid transparent;


}

td#contentBorder{
    max-height: 200px;
    max-width: 200px;
    height: 200px;
    width: 200px;
    padding-left: 10px;
    padding-right: 10px;
}

#galleryPicBorder{
margin : 0 auto;
}

#galleryBorder{
     border-radius: 15px;
     box-shadow: 0px 0px 5px #333333, 5px 5px 3px #808080;
     margin: 10px 0px;
     padding: 5px;
     text-align: center;
     width: 100%;
}


#galleryOverview{
padding-bottom:15px;
font-size:20px;
font-weight:bold;
}

#overviewPadding{
padding-left:5px;
padding-right:5px;
}

#galleryOverviewPadding {
padding-left:15px;
padding-right:15px;
}


#galleryPadding{
padding-bottom:15px;
padding-top:15px;
width:100%;
}
 #testStyle {
     background: -moz-linear-gradient(center top , #388FBC, #296889) repeat scroll 0% 0% transparent;
     border-radius: 0.5em;
     border: 1px solid #255F7D;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
     color: #E9EFF3;
     cursor: pointer;
     display: inline-block;
     outline: medium none;
     padding: 0.5em 2em 0.55em;
     text-align: center;
     text-decoration: none;
     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
     font-color: #ffffff;
     margin-bottom:1px;
     margin-top:130px;

}

 #lightBlueButtonStyle {
    background: -moz-linear-gradient(center top , #88C0DE, #69B5DE) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #69B5DE;
    border-radius: 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #E9EFF3;
    cursor: pointer;
    display: inline-block;
    outline: medium none;
    padding: 0em 1em 0em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    margin: 5px 0;
    margin-top:-2px;

}


a.counterLinks:link {color: white;   text-decoration: none;}
a.counterLinks:active {color: white;   text-decoration: none;}
a.counterLinks:visited {color: white;    text-decoration: none;}
a.counterLinks:hover {color: white; text-decoration: none;}

a.buttonLinks:link {color: white;  text-decoration: none;}
a.buttonLinks:active {color: white;   text-decoration: none;}
a.buttonLinks:visited {color: white;  text-decoration: none;}
a.buttonLinks:hover {color: white;   text-decoration: none;}

a.counterLinksSelected{
                     text-decoration: none; }
                     
/*_____________________________________________________________________*/
/*The panel can be any width.The contents will adjust to the new width. */
.medium{width:320px}

a{color:white;text-decoration:none;
  transition:color 0.4s ease-out}

a:hover{color:#00BEFF}

/*The height of the panel is important since the contents are positioned absolutely. You can either set the height explicitly or allow the panel to expand to the height of the image, as I've done in this example.*/
.panel {
  position:relative;
  font-family:Arial;
  overflow:hidden;
  margin:15px 0px 15px 15px;
  float:left;
}

.panel img{display:block}

/* Sets the width to 100% for responsive goodness*/
.headline,
.headline .title,
.headline .subtitle,
.panel img {
  width:100%;
}

/*Using translate3d forces the browser to use 3d accelleration, which results in clean, smooth animation.*/
.headline{
  position:absolute;
  z-index:2;
  bottom:0;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform:translate3d(0,0,0) ;
  transform:translate3d(0,0,0) ;
  -webkit-transition: -webkit-transform 0.65s cubic-bezier(.23,-0.02,.21,1);
  -moz-transition:-moz-transform 0.65s cubic-bezier(.23,-0.02,.21,1);
  -ms-transition: -ms-transform 0.65s cubic-bezier(.23,-0.02,.21,1);
  -o-transition: -o-transform 0.65s cubic-bezier(.23,-0.02,.21,1);
  transition: transform 0.65s cubic-bezier(.23,-0.02,.21,1);
}

/*Initially, the H1 is the only thing with height, so it aligns nicely at the bottom of the panel div. With the width set to 100%, border box adds the padding to the inside*/
.headline .title{
  padding:15px;
  margin:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box ;
  box-sizing: border-box;
}

/*This makes the full headline area clickable*/
.headline .title a{display:block}

/*Setting the subtitle position to absolute takes it out of the dom order and stops the panel from accounting for its height */
.subtitle{
  position:absolute;
  color:#C9C9C9;
  margin:0;
  line-height:1.5em;
  padding: 0 15px 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:border-box ;
  box-sizing: border-box;
}

/*Since I'm taking the subtitle out of the dom order by setting its position to aboslute, I can't set the headline background color specifically. Otherwise it would only cover the H1. Setting the background for both the title and subtitle allows them to match up seamlessly.*/
.bg{background:black;background:rgba(2,0,8,0.80)}

/* Without JS: Setting the subtitle to relative forces the browser to take its height into account. With the added subtitle height, the entire headline box sits neatly on the bottom*/
.no-js .panel:hover .headline .subtitle{
  position:relative;
}
.panel:hover .headline .title a{
  color:#00BEFF;
}