@charset "UTF-8";
/* CSS styles -- general definitions */

body {
  background-color: #DDDDDD;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  color: #444444;
}

h1 {
  font-size:28px;
}
a {
  border-style: none;
  text-decoration: none;
}
a:link, a:active, a:visited {
  color: inherit;  
}
a:hover { 
  color: /*#999999*/ inherit;
}

.underline {
  border-bottom: 1px dotted #000;
}

.background {
  width: 100%;
  text-align: center;
  margin: 0px;
  padding: 0px;
  z-index:-10;
  position: fixed;
  left: 0px;
  top: 0px;
}
.background img {
  width: 960px; 
  margin: 0px;
}
.background p {
  position: relative;
  top: -190px;
  left: -145px;
/*   font-family: 'Permanent Marker', cursive; */
font-family: 'Patrick Hand', cursive;
  font-size:65px;
/*   font-weight: bold; */
/*   color: white: */
/*   text-shadow: 1px 1px 0 black, 1px -1px 0 black, -1px 1px 0 black, -1px -1px 0 black; */
/*     color: #FFFFFF; */
/*    text-shadow:
    -1px -1px 0px #CCCCCC,
    1px -1px 0px #CCCCCC,
    -1px 1px 0px #CCCCCC,
    1px 1px 0px #CCCCCC;*/
}
 
 .rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  transform: rotate(-90deg);
}

#workspace {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F4F4F4;
  opacity: 1;
  z-index:10;
}

article {
  padding: 10px;
}

.titleImageFrame {
  height:280px;
  opacity: 0;
}


/*hr {
  margin-left:5%;
  margin-right:5%;
  border-width: 1px;
  border-style: solid;
  border-color: gray;
}*/
 
.gallery {
  display: inline-block;
  text-align: left;
  margin-left: 25px;
}

.galThumb {
  width: 200px;
/*  height: 220px;*/
  margin: 10px;
  display: inline-block;
  vertical-align: top;    
  }
.galThumb img{
  width: 200px;
  height: 200px;
/*   box-shadow: 7px 7px 3px #888888;   */
/*   border-radius: 6px; */
  }
.galThumb p{
  font-size: 14px;
  height: 35px;
  vertical-align: top;
  text-align:center;
  margin-top: 0px;
  }
.galleryVideo {
  display: inline-block;
  text-align: center;
  width:940px;
/*   margin-left: 0px; */
}  
.galVideo {
  width: 440px;
/*  height: 220px;*/
  margin: 10px;
  display: inline-block;
  vertical-align: top;    
  }
.galVideo p{
  font-size: 14px;
  height: 35px;
  vertical-align: top;
  text-align:center;
  margin-top: 0px;
  }  
  
 .listingMorePosts {
   text-align: center;
   background-color: gray;
   width: 200px;
   margin-left: auto;
   margin-right: auto;
   border-radius: 6px;
 }
 
.buttons{
    text-align: center;
}

.buttons a:hover{
  background: #CCCCCC;
}
 
.buttons  a{
  background: #DDDDDD;
  border-radius: 0px;
  padding: 10px 30px;
  display: inline-block;
  font-weight: bold;    
/*   color:#7f7f7f; */
/*   text-decoration: none; */
/*   text-shadow:0px 1px 0px #fff; */
/*   border:1px solid #999999; */
/*                 width: 180px; */
  margin: 10px 5px; 
/*   box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1); */
/*   -webkit-transition:box-shadow 0.5s; */
}

a.tooltip::before {
    content: attr(data-tip) ;   
     
    font-size: small;
    position:absolute;
    z-index: 999;
    white-space:nowrap;
    bottom:9999px;
    left: 50%;
    background:#FFFFFF;
    color:#444444;
    border:1px solid #a7a7a7;
/*     border-radius: 5px; */
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
     
    opacity: 0;  
    transition:opacity 0.4s ease-out; 
    }
     
a.tooltip:hover::before {
    opacity: 1;
    bottom:25px;
    }
 
 .whiteSpacer {
  width: 100%;
  height: 10px;
 }
 
h1,h2,h3{
    padding:0px;
    margin:0px;
}

h1 {
  font-weight: normal;
}

p {
  margin:5px 0px;
}
.postTitle{
  background: #DDDDDD;
  padding: 1px 10px;
  margin: 0px -10px; 
}

.postTitle:hover{
  background: #CCCCCC;
}

.postDate {
  text-align: right;
  margin-top:-25px;
  margin-bottom: 10px;
  margin-right: 5px;
}  
.post {
   text-align: justify;
 }

.timeaxis-year {
  position: relative;
  font-size: large;
  display:inline-block;
  margin:10px;
  top: -15px;
}

.timeaxis-month {
  position: absolute;
  font-size: small;
  text-align: center;
  width: 80px;
  margin:10px;
  top: 25px;
}

.timeaxis-post {
  position: absolute;
  font-size: 24px;
  color: orange;
  top: 15px;
}

.timeaxis-box {
  position:relative; 
  height:70px;
  text-align: center;
}

.loginForm {
  text-align: center;
}
.loginForm label {
    width:450px;
    margin-top: 3px;
    height: 40px;
    display:inline-block;
    float:center;
    padding:3px;
}

.loginForm input {
    height:20px; 
    width:150px; 
    padding:5px 8px;
    margin-left: 20px;
    font-size: 105%;
    border: 1px solid;
    border-color: #CCCCCC;
}

.loginForm button {
  height: 40px;
  width: 150px;
  font-size: 105%;
  color: #444444;
  border: 0px;
  background: #DDDDDD;
}

.loginForm button:hover {
  cursor: pointer; 
  background: #CCCCCC;
}
}