/* MARGIN: top right bottom left */ #picture-gallery-area {position:relative; float:left; padding:0; margin:0; } #picture-gallery-area_r {position:relative; float:right; padding:0; margin:0; } /*#picture-gallery-area p{ font-size:12px; line-height:18px; */ } #picture-gallery-area-new {position:relative; float:left; margin:0; padding:0; max-width:250px; max-width:25%; border:1px fuchsia ridge; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; /* clear:both; */ } /* #left {float:left; margin:0 0.5em 0 0.5em; padding:0.5em; border:1px maroon solid; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; } */ #right-text {position:relative; margin:0; border:0; } #bottom-text {position:relative; float:left; margin:0; border:0; width:100%; background:transparent; } #bottom-text p {font-style:oblique; color:navy; font-size:1.25em; } #bottom-space{/* position:absolute; bottom:0; width:100%; */ clear:both; background:transparaent; height:3em; } /* @media only screen and (max-width: 768px){html, body {width:1145px; } /* #wrapper{padding:0 10px; width:1125px;} */ /* #foot{width:1125px; padding:0 10px;} } */ /* FOR IE10 */ @keyframes show1 {0%{left:0;} 10%{left:0;} 11%{left:320px;} 100%{left:320px;} } @keyframes show2 {0%{left:-320px;} 10%{left:-320px;} 11%{left:0;} 20%{left:0;} 21%{left:-320px;} 100%{left:-320px;} } @keyframes show3 {0%{left:320px;} 20%{left:320px;} 21%{left:0;} 30%{left:0;} 31%{left:320px;} 100%{left:320px;} } @keyframes show4 {0%{left:-320px;} 30%{left:-320px;} 31%{left:0;} 40%{left:0;} 41%{left:-320px;} 100%{left:-320px;} } @keyframes show5 {0%{left:320px;} 40%{left:320px;} 41%{left:0;} 50%{left:0;} 51%{left:320px;} 100%{left:320px;} } @keyframes show6 {0%{left:-320px;} 50%{left:-320px;} 51%{left:0;} 60%{left:0;} 61%{left:-320px;} 100%{left:-320px;} } @keyframes show7 {0%{left:320px;} 60%{left:320px;} 61%{left:0;} 70%{left:0;} 71%{left:320px;} 100%{left:320px;} } @keyframes show8 {0%{left:-320px;} 70%{left:-320px;} 71%{left:0;} 80%{left:0;} 81%{left:-320px;} 100%{left:-320px;} } @keyframes show9 {0%{left:320px;} 80%{left:320px;} 81%{left:0;} 90%{left:0;} 91%{left:320px;} 100%{left:320px;} } @keyframes show10{0%{left:-320px;} 90%{left:-320px;} 91%{left:0;} 99%{left:0;} 100%{left:-320px;} } @keyframes show11{0%{left:320px;} 99%{left:320px;} 100%{left:0;} } #gallery img.p1 {animation-name:show1;} #gallery img.p2 {animation-name:show2;} #gallery img.p3 {animation-name:show3;} #gallery img.p4 {animation-name:show4;} #gallery img.p5 {animation-name:show5;} #gallery img.p6 {animation-name:show6;} #gallery img.p7 {animation-name:show7;} #gallery img.p8 {animation-name:show8;} #gallery img.p9 {animation-name:show9;} #gallery img.p10 {animation-name:show10;} #gallery img.p11{animation-name:show11;} #gallery:hover img {animation-play-state:paused; } /* For Opera browser */ @-o-keyframes show1 {0%{left:0;} 10%{left:0;} 11%{left:320px;} 100%{left:320px;} } @-o-keyframes show2 {0%{left:-320px;} 10%{left:-320px;} 11%{left:0;} 20%{left:0;} 21%{left:-320px;} 100%{left:-320px;} } @-o-keyframes show3 {0%{left:320px;} 20%{left:320px;} 21%{left:0;} 30%{left:0;} 31%{left:320px;} 100%{left:320px;} } @-o-keyframes show4 {0%{left:-320px;} 30%{left:-320px;} 31%{left:0;} 40%{left:0;} 41%{left:-320px;} 100%{left:-320px;} } @-o-keyframes show5 {0%{left:320px;} 40%{left:320px;} 41%{left:0;} 50%{left:0;} 51%{left:320px;} 100%{left:320px;} } @-o-keyframes show6 {0%{left:-320px;} 50%{left:-320px;} 51%{left:0;} 60%{left:0;} 61%{left:-320px;} 100%{left:-320px;} } @-o-keyframes show7 {0%{left:320px;} 60%{left:320px;} 61%{left:0;} 70%{left:0;} 71%{left:320px;} 100%{left:320px;} } @-o-keyframes show8 {0%{left:-320px;} 70%{left:-320px;} 71%{left:0;} 80%{left:0;} 81%{left:-320px;} 100%{left:-320px;} } @-o-keyframes show9 {0%{left:320px;} 80%{left:320px;} 81%{left:0;} 90%{left:0;} 91%{left:320px;} 100%{left:320px;} } @-o-keyframes show10{0%{left:-320px;} 90%{left:-320px;} 91%{left:0;} 99%{left:0;} 100%{left:-320px;} } @-o-keyframes show11{0%{left:320px;} 99%{left:320px;} 100% {left:0;} } #gallery img.p1 {-o-animation-name:show1; } #gallery img.p2 {-o-animation-name:show2; } #gallery img.p3 {-o-animation-name:show3; } #gallery img.p4 {-o-animation-name:show4; } #gallery img.p5 {-o-animation-name:show5; } #gallery img.p6 {-o-animation-name:show6; } #gallery img.p7 {-o-animation-name:show7; } #gallery img.p8 {-o-animation-name:show8; } #gallery img.p9 {-o-animation-name:show9; } #gallery img.p10{-o-animation-name:show10; } #gallery img.p11{-o-animation-name:show11; } #gallery:hover img {-o-animation-play-state:paused; } /* END of OPERA */ /* For Safari and Chrome browser */ @-webkit-keyframes show1 {0%{left:0;} 10%{left:0;} 11%{left:320px;} 100%{left:320px;} } @-webkit-keyframes show2 {0%{left:-320px;} 10%{left:-320px;} 11%{left:0;} 20%{left:0;} 21%{left:-320px;} 100%{left:-320px;} } @-webkit-keyframes show3 {0%{left:320px;} 20%{left:320px;} 21%{left:0;} 30%{left:0;} 31%{left:320px;} 100%{left:320px;} } @-webkit-keyframes show4 {0%{left:-320px;} 30%{left:-320px;} 31%{left:0;} 40%{left:0;} 41%{left:-320px;} 100%{left:-320px;} } @-webkit-keyframes show5 {0%{left:320px;} 40%{left:320px;} 41%{left:0;} 50%{left:0;} 51%{left:320px;} 100%{left:320px;} } @-webkit-keyframes show6 {0%{left:-320px;} 50%{left:-320px;} 51%{left:0;} 60%{left:0;} 61%{left:-320px;} 100%{left:-320px;} } @-webkit-keyframes show7 {0%{left:320px;} 60%{left:320px;} 61%{left:0;} 70%{left:0;} 71%{left:320px;} 100%{left:320px;} } @-webkit-keyframes show8 {0%{left:-320px;} 70%{left:-320px;} 71%{left:0;} 80%{left:0;} 81%{left:-320px;} 100%{left:-320px;} } @-webkit-keyframes show9 {0%{left:320px;} 80%{left:320px;} 81%{left:0;} 90%{left:0;} 91%{left:320px;} 100%{left:320px;} } @-webkit-keyframes show10{0%{left:-320px;} 90%{left:-320px;} 91%{left:0;} 99%{left:0;} 100%{left:-320px;} } @-webkit-keyframes show11{0%{left:320px;} 99%{left:320px;} 100%{left:0;} } #gallery img.p1 {-webkit-animation-name:show1;} #gallery img.p2 {-webkit-animation-name:show2;} #gallery img.p3 {-webkit-animation-name:show3;} #gallery img.p4 {-webkit-animation-name:show4;} #gallery img.p5 {-webkit-animation-name:show5;} #gallery img.p6 {-webkit-animation-name:show6;} #gallery img.p7 {-webkit-animation-name:show7;} #gallery img.p8 {-webkit-animation-name:show8;} #gallery img.p9 {-webkit-animation-name:show9;} #gallery img.p10 {-webkit-animation-name:show10;} #gallery img.p11{-webkit-animation-name:show11;} #gallery:hover img{-webkit-animation-play-state:paused; } /* End of Safari and Chrome */ /* For Firefox browser */ @-moz-keyframes show01 {0%{left:0;} 10%{left:0;} 11%{left:320px;} 100%{left:320px;} } @-moz-keyframes show02 {0%{left:-320px;}10%{left:-320px;} 11%{left:0;} 20%{left:0;} 21%{left:-320px;} 100%{left:-320px;} } @-moz-keyframes show03 {0%{left:320px;} 20%{left:320px;} 21%{left:0;} 30%{left:0;} 31%{left:320px;} 100%{left:320px;} } @-moz-keyframes show04 {0%{left:-320px;}30%{left:-320px;} 31%{left:0;} 40%{left:0;} 41%{left:-320px;} 100%{left:-320px;} } @-moz-keyframes show05 {0%{left:320px;} 40%{left:320px;} 41%{left:0;} 50%{left:0;} 51%{left:320px;} 100%{left:320px;} } @-moz-keyframes show06 {0%{left:-320px;}50%{left:-320px;} 51%{left:0;} 60%{left:0;} 61%{left:-320px;} 100%{left:-320px;} } @-moz-keyframes show07 {0%{left:320px;} 60%{left:320px;} 61%{left:0;} 70%{left:0;} 71%{left:320px;} 100%{left:320px;} } @-moz-keyframes show08 {0%{left:-320px;}70%{left:-320px;} 71%{left:0;} 80%{left:0;} 81%{left:-320px;} 100%{left:-320px;} } @-moz-keyframes show09 {0%{left:320px;} 80%{left:320px;} 81%{left:0;} 90%{left:0;} 91%{left:320px;} 100%{left:320px;} } @-moz-keyframes show10{0%{left:-320px;} 90%{left:-320px;} 91%{left:0;} 99%{left:0;} 100%{left:-320px;} } @-moz-keyframes show11{0%{left:320px;} 99%{left:320px;} 100%{left:0;} } #gallery img.p1 {-moz-animation-name:show01;} #gallery img.p2 {-moz-animation-name:show02;} #gallery img.p3 {-moz-animation-name:show03;} #gallery img.p4 {-moz-animation-name:show04;} #gallery img.p5 {-moz-animation-name:show05;} #gallery img.p6 {-moz-animation-name:show06;} #gallery img.p7 {-moz-animation-name:show07;} #gallery img.p8 {-moz-animation-name:show08;} #gallery img.p9 {-moz-animation-name:show09;} #gallery img.p10 {-moz-animation-name:show10;} #gallery img.p11{-moz-animation-name:show11;} #gallery:hover img{-moz-animation-play-state:paused;} /* End of Firefox */ /* +++++++++++++++++++++++++++++++++++++++++++++++++ WAS +++++++++++++++++++++++++++++++++++++ #picture-frame{width:322px; height:242px; padding:1em; margin:0.5em 0.5em 0.5em 0.5em; border:1px solid maroon; border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); position:relative; float:left;} WAS +++++++++ */ #picture-frame-new{position:relative; float:left; /* max-width:10%; max-height:10%; */ padding:0.5em; margin:0.5em; /* border:1px aqua groove; margin is the gap outside of the picture */ /* border-radius:1em; -moz-border-radius:0.25em; -o-border-radius:0.25em; -webkit-border-radius:0.25em; For testing purposes, changed to 0.25em */ } #picture-frame{/*max-width:322px; max-height:242px; */ /* *** REINSERTED: width:322px; height:242px; End of re-insertion */ padding:1em; margin:0.25em 0.25em 0.25em 0.25em; /* border:1px solid ; */ /* ***** REMOVED min-width:25%; max-width:40%; ***** */ border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); position:relative; float:left;} /* +++++++++++++++++++++++++++++++++++++++++++++++++ WAS +++++++++++++++++++++++++++++++++++++ #gallery{width:320px; height:240px; position:relative; overflow:hidden; border:1px solid #888; min-width:25%; max-width:40%; /* min-height:25%; */ /* max-height:100%; */ /* border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; } WAS ++++++++++++++++++++++++++++++++++++++++ */ #gallery-original{width:320px; height:240px; position:relative; overflow:hidden; border:1px solid #888; border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; } #gallery{/* height="99%"; width="99%"; */ width:320px; height:240px; /* min-width:30%; min-height:30%; */ /* */ /* Try %ages: max-width:100%; max-height:100%; */ position:relative; overflow:hidden; border:1px solid white; border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; padding:0; margin:0; /* min-width:25%; max-width:40%; min-height:25%; max-height:40%; ***** REMOVED ***** */ box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 5px 10px rgba(0, 0, 0, 0.5); } /* +++++++++++++++++++++++++++++++++++++++++++++++++ WAS +++++++++++++++++++++++++++++++++++++ #gallery img{position:absolute; left:-320px; top: 0; z-index:1; border:0; animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-timing-function:linear; -moz-animation-timing-function:linear; -o-animation-timing-function:linear; -webkit-animation-timing-function:linear; animation-duration:40s; -moz-animation-duration:40s; -o-animation-duration:40s; -webkit-animation-duration:40s; } WAS ++++++++++++++++++++++++++++++++++++++++ */ /* Code for all browsers */ /* This is the ORIGINAL one */ #gallery img-original{position:absolute; left:-320px; top: 0; z-index:1; border:0; /* **** REMOVED min-width:15%; max-width:100%; min-height:15%; max-height:100%; */ animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-timing-function:linear; -moz-animation-timing-function:linear; -o-animation-timing-function:linear; -webkit-animation-timing-function:linear; animation-duration:40s; -moz-animation-duration:40s; -o-animation-duration:40s; -webkit-animation-duration:40s; } /* This is the new one */ #gallery img{position:absolute; left:-320px; top: 0; z-index:1; border:0; /* **** REMOVED min-width:15%; max-width:100%; min-height:15%; max-height:100%; */ animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-timing-function:linear; -moz-animation-timing-function:linear; -o-animation-timing-function:linear; -webkit-animation-timing-function:linear; animation-duration:40s; -moz-animation-duration:40s; -o-animation-duration:40s; -webkit-animation-duration:40s; } /* #gallery img.p1{left:0;} */ /* #gallery a img{border:0;} */ /* #leftCol a:visited, #midCol a:visited, #rightCol a:visited {color:#048; text-decoration:none;} */ /* #leftCol a:hover, #midCol a:hover, #rightCol a:hover {text-decoration:underline;} */ /* #main_menu li a:hover{color:#069; text-decoration:overline;} */ /* #navigation li a:hover{color:#6cf;} */ /* a { display:block; height:32px; font-family:'Ubuntu',arial, sans-serif; font-weight: 700; color:#069; color:fuchsia; font-size:12px; line-height:32px; text-decoration:none; */} /* #infoBottom .prevNext a:hover{text-decoration:underline;} (/ /* dl.box250 dd a:hover{text-decoration:underline;} */ /* html{padding:0; margin:0; margin:0; max-width:1024px; max-height:768px; background:linear-gradient(green, yellow) repeat-x 0 0; -o-background:linear-gradient(green, yellow) repeat-x 0 0; -moz-background:linear-gradient(green, yellow) repeat-x 0 0; -webkit-background:linear-gradient(green, yellow) repeat-x 0 0; } */ /* body{padding:0; margin:0; text-align:left; font-family:arial, sans-serif; overflow:auto; } */ /* #content{float:left; background-color:transparent; margin:0; border:0; } */