body { background-color: #eaeaea; 
       /*width: 900px;*/
       width: 100%; }

/* MEDIA QUERY in CSS trials -----
@media (max-width: 500px) {
  .narrow {
    display: block;
    font-size: 200%;
  }
  .unbreakable { display: block; font-size: 200% }
  nav { display: inline-block;
        font-size: 300%; }
}       


@media screen (max-width: 500px) {
  .narrow {
    display: block;
    font-size: 200%;
  }
  .unbreakable { display: block; font-size: 200% }
  nav { display: inline-block;
        font-size: 300%; }
}       

@media all and (max-width: 699px) {
  body {
    wrapper: #fffff; background: #ffffff;
  }
}
*/ 

@media (orientation: portrait) {
    nav { display: inline-block;
          font-size: 200%;
          margin-bottom: 20px; }
    h2 { margin: 40px 0 40px 0 }
}

/* MEDIA QUERIES Trial END */

h1 { /*background-color: #ff3399;
     background-repeat: repeat-x;
     background-image: url(flowerbanner.jpg); */
     color:#ffffff;
     font-family: Candara, Geneva, Verdana, sans-serif;
     text-indent: 10px;
     line-height: 140%;
     font-size: 315%; }
.subhead { font-size: 100%;
           text-align: right;
           font-style: italic;
           margin: -30px 0 20px 10%; }

h2 { font-family: Candara, Geneva, Verdana, sans-serif;
     font-size: 150%; }
h3 { margin: -2px 5px;
     font-style: italic;
     font-family: Candara, Geneva, Verdana, sans-serif;
     }
h4 { margin-top: 5px;
     margin-bottom: 5px;
     font-family: Candara, Geneva, Verdana, sans-serif;
      }
p { font-family: Candara, Geneva, Verdana, sans-serif; }      
#series { text-decoration: none;
          font-style: italic;
          margin: -10px 0 15px 0;
          font-weight: normal; }
img { border: none; }
nav { max-width: 90% }
.nav { color: #ff3399;
       min-width: 90%;
       display: inline-block; }
.mainnav { margin: -10px 0 0 0; }
/*.button { border: 2px inset #990000;
          width: 150px;
          padding: 3px 5px;
          color: #ffffff;
          background-color: #ff0033;
          font-family: "helmet bold", geneva, sans-serif;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          text-decoration: none; }*/
a { text-decoration: none; }
a.button:link { color: #ffffff; }
a.button:visited { color: #ffffff; }
a.button:hover { color: #ffff00;
                 border: 2px outset #990000; }
a:link { color: #6e6e6e; }
a:visited { color: #6e6e6e; }
a:hover { color: #ff1975; }
#link { text-decoration: none; }
#wrapper { background-color: #eaeaea; /* #DCDCDC; */ 
           margin: 0 auto;
           padding: 0 50px 10px 20px;
           /*border: 5px solid #ffff00;*/
           float: left; 
           /*width: 890px;*/
           width: 90%; }

#leftcolumn { width: 15%; /*120px;*/
              float: left; 
              padding-top: 10px;
              /*border: 5px solid #ff0000;*/ }
#middlecolumn { width: 20%; /*140px;*/
                float: left;
                padding-top: 10px; /*border: 5px solid #00ff00;*/ }
#rightcolumn { float:left;
               padding: 20px;
               /*border: 5px solid #0000ff;*/ 
               width: 55%; /*500px;*/ }
#rightbar { float: right;
            width: 310px;
            height: 700px;
            padding: 0px 0px 0px 10px;
            /*border: 5px solid #0000ff;*/
            background-color: #DCDCDC;  }
            
#leo { float: right;
       margin: 5px 5px 5px 10px;
       align: bottom; }    
#skinnyleo { float: right; 
             margin: 3px 0px 0px 0px; }
#floatright { float: right; }
.photo { padding: 5px;
         float: left;
         margin: 2px;
         background-color: #ffffff;
         display: block; }
.bigphoto { padding: 10px;
            background-color: #ffffff;
            margin: 10px; }
.links { font-size: small;
         text-align: right;
         padding-right: 0px; }
.pictitle { float: left;
            padding-right: 10px; }
#splash { float: left;
          margin: 20% 0 0 0;
          /* height: 1000px; /*50%; */
          width: 100%; }
#sunset { position: absolute;
          left: 91px; /* 28%; */
          top: 586px; 
          border: 5px solid #ffffff; }
#pareja { position: absolute;
          left: 276px; /* 45%; */
          top: 360px;
          border: 5px solid #ffffff; }
#gatogris { position: absolute;
          left: 30px; /*20%;*/
          top: 401px;
          border: 5px solid #ffffff; }
#poppy { position: absolute;
          left: 356px; /*55%;*/
          top: 546px;
          border: 5px solid #ffffff; }
#galleries { position: absolute;
             z-index: 5;
             left: 255px; /*45%;*/
             top: 545px;
             background-color: #ffffff;
             padding: 10px; 
             font-size: large; 
             font-family: Verdana, sans-serif;
             font-weight: bold;
             line-height: 120%;
             text-indent: 3px;
             border: 2px solid #ffffff; }
#facebookdogalbum { position: relative;
                    display: block; 
                    width: 100%;
                    float: left;
                    top: 300px; } 
#bio { width: 90%; /* 715px; */
       margin: 0 50px 0 40px; }
.biopic1 { float: right;
           margin: 10px 5px 10px 10px; }
#biopic2 { float: left;
            margin: 10px 10px 10px 0; }
#form { max-width: 500px;
        margin: 10px; }
.frow { height: 30px; }
.label { float: left;
         width: 50px;
         text-align: right;
         padding-right: 10px; }
#submit { margin: 10px 0 0 5px; } 

#footer { font-size: 75%; font-style: italic; text-align: right; margin-right: 20px; padding-top: 20px; }
#footer1 { position: absolute;
           top: 90%; /*600px;*/
           left: 70%; /*375px;*/ }
#altnav { font-size: 80%;  
          clear: left; /*border: 5px solid #ff00ff;*/ 
          margin-left: 5%; }
#altnav_splash { font-size: .80em;  
          position: absolute;
          display: block;
          width: 100%;
          bottom: 10%;
          top: 1510px;
          /* border: 5px solid #ff00ff; */ }          
          
/* SLIDESHOW 5/28 CSS */

.bss-slides{
  position: relative;
  display: block;    
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: -5%;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 6%;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  -webkit-background-size: contain; 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
.slideshowcontainer {
    display: block;
    left: 50%;
    width: 90%;
}