html {height:100%}

/*
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}
*/

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    color: #555;
    margin: 0; padding:0; border:0;
    width: 100%;
//    font-size: 18pt;
    font-size: 15pt;
//    background-image: url("images/bg.png"); background-repeat: repeat-x; 
//    height:100%
    padding: 1px;
}


.test {
	font-size: 50pt;
}
/* Headers */
/*
h1 { font-weight: normal; color: #770000}
h2 { font-weight: normal; color: #770000}
h3 { font-weight: normal; color: #770000}
h4 { font-weight: normal; color: #770000}
*/
/* resizing font when the screen is too small */
@media screen and (max-width: 3000px), (max-height:3000px){body {font-size: 15px}}
@media screen and (max-width: 700px), (max-height: 650px) {body {font-size: 11px}}
@media screen and (max-width: 600px), (max-height: 600px) {body {font-size: 8px}}
@media screen and (max-width: 500px), (max-height: 450px) {body {font-size: 6px}}


//a:link { text-decoration: none; color: #000 }
//a:visited { text-decoration: none; color: #000 }
//a:hover { color: red }
//a:visited:hover { color: red }
//a:active { color: #990066 }

a:link { text-decoration: none; color: #0033ff }
a:visited { text-decoration: none; color: #0033ff }
a:hover { color: red }
a:visited:hover { color: red }
a:active { color: #990066 }

.boxed
{
    border-style: double;
    border-width: thin;
    border-color: #555;
    margin: 1em;
    padding: 1em 1.5em 1em 1.5em;
    background-color: #eee;
}

/* code lines in a box */
.code
{
    border-style: single;
    border-width: thin;
    border-color: #555;
    margin: 0.5em;
    padding: 0.5em 0.5em 0.5em 0.5em;
    white-space: pre;
    font-family: monospace;
    font-size: 80%;
    background-color: #eee;
}

/* preformatted */
.preformatted
{
    font-family: "Courier New", Courier, monospace;
    font-size: smaller;
    white-space: pre;
    line-height: 1.15em
}



//#title-img {float:left; height:100%;}
//#title-img {float:left;}
#title-img {max-width: 30%;}

.gal {  padding:5px; border:1px solid #aaa;
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:5%;
        margin-bottom:2em;
        max-width:70%;
        max-height:400px;
}

/*nav {float:right; padding: 20px; text-align: center; }*/
//nav {float:right; height:10%; text-align: center; margin-top: 0;}
//nav {float:right; height:10%; text-align: center; font-size: smaller;}
nav {float:right; height:10%; text-align: center; max-width: 70%;}
nav ul {position: relative; 
	display: inline-table; 
	list-style: none;  
	margin-top: 2em; 
	margin-right:3em;}
nav ul li {float: left; padding-right:1em}
nav ul li ul {
    display:block; 
    -moz-transition: opacity 1s 0s, max-height 1s 0s;
    -webkit-transition: opacity 1s 0s, max-height 1s 0s;
    -ms-transition: opacity 1s 0s, max-height 1s 0s;
    -o-transition: opacity 1s 0s, max-height 1s 0s;
    transition: opacity 1s 0s, max-height 1s 0s;
    opacity: 0; 
    max-height:0;
    overflow:hidden;
//    margin-top:0;
}

//nav a:link {color:#333}
//nav a:visited {color:#333}
nav a:link {color:#1B74BB}
nav a:visited {color:#1B74BB}
nav ul li:hover ul {display:block; opacity: 1; max-height:150px}
nav ul li:hover > ul {display: block}
//nav ul li a:link {text-decoration: none; color: #555 }

nav ul ul {
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
    text-align:left;
    font-size:90%;
}
nav ul ul li {
    float: none; 
    position: relative;
}

.footnote { 
    float:left;
    bottom:0;
    width:100%;
    height:15px;
    text-align:center;
    font-size: xx-small;
    margin-top:1em;
}

.shadow {
  -webkit-box-shadow: 5px 5px 5px #aaa;
  -moz-box-shadow: 5px 5px 5px #aaa;
  box-shadow: 5px 5px 5px #aaa;
  margin-bottom: 10px;
}
								       
@-webkit-keyframes cf3FadeOut {0% {opacity:1;} 100% {opacity:0;}}
@-moz-keyframes    cf3FadeOut {0% {opacity:1;} 100% {opacity:0;}}
@-o-keyframes      cf3FadeOut {0% {opacity:1;} 100% {opacity:0;}}
@keyframes         cf3FadeOut {0% {opacity:1;} 100% {opacity:0;}}

@-webkit-keyframes cf3FadeIn {0% {opacity:0;} 100% {opacity:1;}}
@-moz-keyframes    cf3FadeIn {0% {opacity:0;} 100% {opacity:1;}}
@-o-keyframes      cf3FadeIn {0% {opacity:0;} 100% {opacity:1;}}
@keyframes         cf3FadeIn {0% {opacity:0;} 100% {opacity:1;}}

top {
    float: left;
    width: 100%;
    height: 10%;
//    margin-top: 0px;
}

gallery {
//    float:right;
    width:50%;
    height:55%;
}

gallery img {
    display:block;
    position:absolute;
    top: 0; bottom:0; left: 0; right:0; margin: auto;
    max-width:50%;
    max-height:50%;
    padding:5px;
    border:1px solid #aaa;
}

#previous2 {opacity:0;}

#previous {
  opacity:0;
  -webkit-animation-name: cf3FadeOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;

  -moz-animation-name: cf3FadeOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-duration: 1s;

  -o-animation-name: cf3FadeOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-duration: 1s;

  -ms-animation-name: cf3FadeOut;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-duration: 1s;


}

#current {
  opacity:1;
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;

  -moz-animation-name: cf3FadeIn;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-duration: 1s;

  -o-animation-name: cf3FadeIn;
  -o-animation-timing-function: ease-in-out;
  -o-animation-duration: 1s;

  -ms-animation-name: cf3FadeIn;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-duration: 1s;
}

/*   thumbstrip  container */
 thumbcontainer {
	float:left; 
	width:100%;
	height:5%;

    
	margin-bottom:20px;
}
/*   thumbstrip */

.thumbstrip {
	       width:60%;
	       height:100%;
	       overflow: hidden;
       	       top: 0; bottom:0; left: 0; right:0; 
	       margin-left: auto;
	       margin-right:auto;


      

}

.thumbstrip ul {
	    list-style:none;
	    height:100%;
	    width:500%;
	    -moz-transition: all 1s; 
	    -webkit-transition: all 1s;  
	    -ms-transition: all 1s;  
	    -o-transition: all 1s;  
	    transition: all 1s;  
	    position: relative;
	margin: 0; padding:0; border:0;}

.thumbstrip ul li {
	height:100%;
	float: left;
}

.thumbstrip ul li img{
	height:100%;
	margin-right:2px;
	opacity: 0.5;
}

#pause,#play {opacity:0; border:0; padding:0;
  -webkit-animation-name: cf3FadeOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;

  -moz-animation-name: cf3FadeOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-duration: 1s;

  -o-animation-name: cf3FadeOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-duration: 1s;

  -ms-animation-name: cf3FadeOut;
  -ms-animation-timing-function: ease-in-out;
  -ms-animation-duration: 1s;
}

#thumb-current {opacity:1}

#scroll-left {position:absolute; 
     left:15%; top:85%; width:5%; height:5%; 
     opacity:0.5; z-index:5}
#scroll-left:hover {opacity:1}

#scroll-right {
     position:absolute; 
     left:80%; top:85%; width:5%; height:5%; 
     opacity:0.5; z-index:6;
}
#scroll-right:hover {opacity:1}

.blockcontainer {float:left; width:100%;}
.blocktext {margin-left: auto; margin-right: auto; width: 75%;}

p + p {margin-top: 0.5em}

/* services */
.srv-image {float:right; margin: 2em; max-width:150px; max-height:150px}
.srv-item {overflow:hidden}

// front page images
.fp-image {margin: 2em; max-width:300px; max-height:300px; }