Team:FAFU-CHINA/cat/css/demo

/* CSS reset */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } fieldset,img { border:0; } ol,ul { list-style:none; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } /* General Demo Style */ body{ font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; background: #fbf8f4 url() repeat top left; font-weight: 400; font-size: 15px; color: #0000; overflow-y: scroll; overflow-x: hidden; } .ie7 body{ overflow:hidden; } a{ color: #333; text-decoration: none; } .container{ position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

   text-align: center;

} .container > header h1{ font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #333; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

   padding: 0px 0px 5px 0px;

} .container > header h1 span{ color: #008dc1; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } .container > header h2, p.info{ font-family: 'Boogaloo', 'Arial Narrow', Arial, sans-serif; font-size: 22px; font-style: italic; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .container > header h2 a{ color: #936a46; text-shadow: 0px 1px 1px rgba(255,255,255,0.8); } .container > header h2 a:hover{ color: #614429; } /* Header Style */ .codrops-top{ font-family:'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; width: 100%; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none; display: inline; }

p.codrops-demos{ text-align:center; display: block; padding: 14px; font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif; } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{

   display: inline-block;

border: 1px solid #ddd; border-color: #ddd #aaa #aaa #ddd; padding: 4px 10px 3px; font-size: 15px; line-height: 18px; margin: 0px 3px; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color: #29abe1; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #fff; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); } p.codrops-demos a:hover{ background: #fff; color: #29abe1; } p.codrops-demos a:active{ background: #e5e5e5; background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.9); } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: #fff; background: #29abe1; border-color: #29abe1; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } }