/*header formatting*/ h1{color:#660066; background-color:yellow; font-size:70pt; margin-top:0; margin-right:20px; margin-left:20px; margin-bottom:0; padding:20px;} h1{text-align:center;} h1{font-weight:bold;font-family:mistral, sans-serif;font-color:660099;} h2{font-weight:bold; font-family: mistral, "sans serif";} h2{text-align:center;} h2{color:#660066; background-color:#99ff66; font-size: 40pt; margin-top: -5px;} h2{margin-right: 0px;margin-bottom:0px; margin-left:0px; padding:10px;} h3{font-weight:bold; font-family: calibri, ariel, "sans serif";} h3{line-height:150%;} h4{font-size:18pt;font-family:arial, serif; color:#ffffff;line-height: 120%;} h5{color:#ff66d9; font-size:25pt; font-family:ariel,sans-serif;} h6{margin-top: 10px; margin-right: 5px; color:#660066; font-size:18pt; text-align:center; background-color:#99ff33;} h6{font-family: calibri, ariel, "sans serif";} h6{padding:10px;} p{color:#ffffff;font-size:16pt; font-family:calibri, arial, sans-serif;} #topa{float: left; width: 54%;} #topb{float: right; width: 45%;} /*body & P format*/ body{width: auto; background-color:#101010; margin:0;} /*Web site navigation*/ a:link {color:#996699;} a:visited {color:#996699;} a:hover{color:red;} #navbar{font-size:18pt;} #navbar {border: 8px solid yellow;margin:10pt;} #navbar {float: left;width: 20%;} /*Blub on the opening page*/ #content { margin-left:25px; margin-top:-20px;margin-right:460px;} #content2 {margin-left:25px; margin-top:-5px;margin-right:460px;} #content3 {margin-left:5px; margin-top:5px;margin-right:460px} /*---model switch---*/ #model {float: right; width:28%;} #model img {width: 390px; height:560px;} #model { position: relative; top:35px; left: 10px; margin: 0px auto;z-index: 1; } #model img { position:absolute; left:870; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } @keyframes modelFadeInOut { 0% {opacity:1;} 45% {opacity:1;} 55% {opacity:0;} 100% {opacity:0;}} -webkit-@keyframes modelFadeInOut { 0% {opacity:1;} 45% {opacity:1;} 55% {opacity:0;} 100% {opacity:0;}} #model img.top { animation-name: modelFadeInOut; animation-timing: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternate; } /*other items details*/ #lookc{font-size:24pt;} #lookc{line-height: 100%;} #lookc{float:right; width:30%;} #lookc{border:4px solid #33ff66; margin-right:15px;margin-top:10px; padding:5px;} #prese{float:left; width:30%; margin-left:65px; margin-top:20px;} #zx00{float:left; width:30%; margin-left:20px; margin-top:-110px;clear:right;} #zx01{float:left; width:30%; margin-left: 15px; margin-top: 30px;} #zx03{float:left; width:20%; margin-left: 15px; margin-top:30px;} #zx23{float:left; width:20%; margin-left: 15px; margin-top: 30px;} #naphld{float:left; width:20%; margin-left: 15px; margin-top: 30px;} #zx22{float:left; width:20%; margin-left: 15px; margin-top: 30px;} #zx09{float:left; width:16%; margin-left: 15px; margin-top: 20px;} #zx10{float:left; width:16%; margin-left: 15px; margin-top: 20px;} #zx11{float:left; width:16%; margin-left: 15px; margin-top: 20px;} /*catalogue*/ #twoheada {float: left; width: 100%; clear: left;} #clickon {float: right; width:46%;} #scrolld{position: fixed; top: 170px; left: 1120px; writing-mode: vertical-rl; text-orientation: upright;} #sb01{float:left; width:15%; margin-left: 20px; margin-top: 120px;} #ub07{float:left; width:15%; margin-left: 15px; margin-top: 0px;} #hb03{float:left; width:15%; margin-left: 15px; margin-top: 0px;} #ub09{float:left; width:15%; margin-left: 15px; margin-top: 0px;clear: left;} #sb02{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub03{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #hb06{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #hb01{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #sb07{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #hb02{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub05{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #sb04{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub06{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub17{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub08{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #hb05{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub10{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub11{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub12{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub13{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub14{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub16{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub15{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub19{float:left; width:15%; margin-left: 15px; margin-top: 20px;} #ub18{float:left; width:15%; margin-left: 15px; margin-top: 20px;} /*about me*/ #annette{float:right; width:20%;} #kepler{float:left; width: 15%;} #karamea{float:right; width:20%;} #mess2{float:left;width:55%;} #pets{float:left;width:15%;} /*relating to the ordering page*/ #important{border-style:solid; border-color:#ff3366; border-width:5pt; border-margin:20px; padding:10px;} #important{float:left; width:20%;margin-left:15px;clear:left} #lovely{float:right; width:30%; margin-top:20px; margin-right:20px;} #lovely img{width:500px; height:700px;} .button{background-color:yellow;} .button{font-size:17pt; padding:7px;border-radius: 10px;} /*detail sheet for the individual bags*/ #details{font-size:30pt;} #details{line-height: 33%;} #details{float:right; width:30%;} #details{border:4px solid #33ff66; margin-right:15px;margin-top:10px; padding:5px;} /*images on the invidual bags-items pages*/ #fronta{float:right;width:20%;margin-top:10px;} #backa{float:right;width:20%;} #backa{margin-left:20px;margin-right:20px;margin-top:10px;} #tails{float: left; clear: left; margin-left:80px; margin-top:30px;} /*item name*/ #label{color:#ffcccc;font-size:50pt;font-family:mistral,ariel,sans-serif;} #label{float:left;width:15%;padding-left:50px} /*baseshow*/ #baseshow img{width: 1050px; height: 255px;} #baseshow { position: relative; top:0px; left:0px; margin: 0px auto; clear:left; z-index: 4; } #baseshow img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } @keyframes switchimages{ 0% {opacity:0;} 45%{opacity:0;} 55% {opacity:1;} 100% {opacity:1;}} -webkit-@keyframes switchimages{ 0% {opacity:0;} 45%{opacity:0;} 55% {opacity:1;} 100% {opacity:1;}} #baseshow img.bottom { animation-name: switchimages; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 7s; animation-direction: alternate;} /*catalogue*/ #twoheada {float: left; width: 100%; clear: left;} #clickon {float: right; width:46%;} #scrolld{position: fixed; top: 100px; left: 1120px; writing-mode: vertical-rl; text-orientation: upright;}