/*- LICENSE -------------------------------------------------------------------------------------------------------- */ /*_ /*_ Author: Matteo Lissandrini - kuzeko http://www.kuzeko.com /*_ /*_ Licensed under the Creative Commons Attribution-Share Alike 3.0 License /*_ cfr. http://creativecommons.org/licenses/by-sa/3.0/ /*_ /*_ - Free for use in both personal and commercial projects /*_ - Attribution requires leaving author name, author link, and the (these) licence info intact. /*_ -------------------------------------------------------------------------------------------------------- */ /*- COLORS - GRAYSCALE -------------------------------------------------------------------------------------------------------- */ /*_ /*_ Black Dark #000 /*_ Black Medium #333 /*_ Black Light #555 /*_ /*_ Grey #b0b0b0 /*_ Grey #ccc /*_ Grey #e0e0e0 /*_ /*_ White Dark #f5f5f5 /*_ White Medium #fefefe /*_ White Light #fff /*_ /*_ -------------------------------------------------------------------------------------------------------- */ /*- Include Fontfaces -------------------------------------------------------------------------------------------------------- */ /* @import url('../fontfaces/{fontname}.css'); */ /*- Include Reset -------------------------------------------------------------------------------------------------------- */ @import url('reset.css'); /*- Include Typography -------------------------------------------------------------------------------------------------------- */ @import url('typography.css'); /*- Include Modules -------------------------------------------------------------------------------------------------------- */ @import url('form.css'); /*- Site Specific Typography -------------------------------------------------------------------------------------------------------- */ #presentation { } #presentation em { font-style:normal;} #logo { font-family: "Anton", "Helvetica Neue", Helvetica, Arial, sans-serif; } .app-content { font-size:13px; } .app-content h1, .app-content h2 { color: #404040; display: block; font-size: 1.5em; line-height: 1; padding-left: 20px; text-transform: none} .app-content h2 { font-size: 1.25em; } .app-content p { line-height: 1.5; padding-left: 20px; padding-bottom:10px; } .callout strong { font-weight:normal;} h1 em, h2 em, h3 em { color:#039; } h1 small, h2 small, h3 small { color:#b0b0b0; font-weight:normal; } .tip p { font-style:normal; } p a:focus { outline: 1px dotted #f5f5f5;} p a:hover { text-decoration:underline;} footer.main nav, footer.main ul, footer.main li, footer.main small { font-size:1em; font-style:normal; font-weight:normal; } footer.main nav li a, footer.main small { font-size:11px; font-weight: normal } footer.main nav li a:hover, footer.main nav li a:active, footer.main nav li a:focus { text-decoration:underline; } footer.main nav li a { color:#58c; } footer.main small { color:#bbb; } /*- Layout -------------------------------------------------------------------------------------------------------- */ .main { } .content { margin:0 auto;} header.main, aside.main, footer.main { clear:both; display:block; padding:0px; margin:0px;} header.main { height:120px; min-width:960px; overflow:visible; position:relative;} #logo { display:block; float:right; height:120px; left:-40px; line-height:40px; margin:0px; position:relative; width:50%; } #logo a { display:block; float:left; height:120px; margin: 0px 10px 0px 0px; width:80px; } nav.main, nav.main .content, nav.main li { display:block; height:40px; line-height:40px; padding:0px 20px; } nav.main { float:left; margin-left:-60px; padding:0 0 40px; padding-top:0; width:50%; } nav.main ul { float:right; } nav.main li { float:left; padding: 0 30px 0 0; } .messages, .messages li { list-style:none; display:block; margin-top: 0px; margin-bottom:0px; } .messages .message { padding-left:40px; text-align:center;} section.main { padding:0; } #presentation { position:relative; margin-bottom:0; z-index:3; } #presentation .slogan, #registration-banner { position:relative; margin-bottom:1.25em; } #presentation, #registration-banner { width:920px; } #presentation { height:240px; padding:40px; } #registration-banner { padding:10px 40px; } #presentation figure, #presentation figure img { float:right; height:319px; position:relative; width:319px;} #presentation figure { top: -110px; right: -40px; } .callout { margin-top:0;} div.app-content { margin: 0 auto; padding-top: 20px; position:relative; width:960px; } .tips { position:absolute; right:0; } .tip { float:right; margin: 20px 30px; padding:16px 16px 0px; right:0; width: 280px; z-index:30; } .tip p { line-height:24px; padding:10px 0 14px; } .tip::before { content:""; display:block; height:30px; position:absolute; top: 7px; width:300px; } .dashboard { margin:0 ; padding:10px 0; width:960px;} .dashboard-item { float:left; margin: 10px 0 10px 18px; padding:0; width:294px;} .dashboard-item h2 { margin:0; padding: 10px; width:276px; } .dashboard-item p { margin-top:0; padding:10px; } footer.main { padding-top:20px; padding-bottom:1em; } footer.main nav, footer.main ul, footer.main li, footer.main small { line-height:1em; margin:0px; padding:0px; } footer.main nav { float:left; text-align:left; } footer.main nav li { display:inline; padding-right:10px; } footer.main small { float:right; text-align:right; } hr.divider { border:solid 0 ; clear:both; height:1px; margin:-1px 0 0 ; padding:0; opacity: 0.0; filter: alpha(opacity = 0); } /*_ Decoration -------------------------------------------------------------------------------------------------------- */ html { background:url("../img/gray.png") repeat-x center top; } body:before { content: ""; height: 10px; left: 0; position: fixed; top: -10px; width: 100%; z-index: 100; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); } .body { background-image:url('../img/engraved.png'); background-position:center top; background-repeat:no-repeat;} header.main { background:url('../img/nav.png') repeat-x center top ; } #logo { color:#fff; font-size:32px; letter-spacing:2px; font-weight:normal;} #logo a { background:url('../img/lb2.png') no-repeat center top ;text-indent:-9999em;} #presentation { background-color:rgba(250, 250, 250, 0.6); box-shadow:0px 1px 2px #ccc} #presentation { text-shadow:6px 10px 10px rgba(100,100,100,0.4); } #presentation h1 { color:#333; font-size: 3em;} #presentation h1 em { color:#039;} .slogan { color:#039;} #presentation figure b.shadow { position:relative; display:block; width:120px; height:8px; border-radius: 120px/8px; left:100px;top: -100px; box-shadow:0 80px 19px -1px rgba(50,50,50,0.7); clear:both;} #registration-banner { border:1px solid #e0e0e0; border-top:0px solid #000; } .callout { text-align:center;} .callout strong { color:#333; font-size:1.25em; padding-right:10px; text-shadow: 0 1px 1px #fff; } .messages li { border-radius:0px; box-shadow:0px -10px 10px -10px rgba(0,0,10, 0.8) inset; } nav.main, nav.main ul, nav.main li { color:#333; text-shadow: 0 2px 3px #ccc; font-variant:small-caps; } nav.main { font-size:1.5em; } nav.main ul { } nav.main a { color: #f5f5f5; padding: 4px 10px 3px; text-shadow: #111 0 -1px 0, #000 0 1px 1px ; } nav.main a:hover, nav.main a:focus { border-radius: 30px/30px; background: rgba(100, 100, 100, 0.5); box-shadow: 1px 1px 3px #000 inset; } div.app-content { background-color: #fefefe; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div.app-content, div.app-content .actions { box-shadow: 0px 1px 6px #ccc inset; } .tip { background-color:#fefefe; background-image: url('../img/stripe.png'); border:1px solid #eee; box-shadow:0px 0px 1px 1px #fff inset; } .tip::before { background-image:url('http://pos81.com/img/scotch.png'); background-repeat:no-repeat; background-position:center; } .tip { -webkit-box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0px 6px 16px -10px #ccc; -moz-box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0px 6px 16px -10px #ccc; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0px 6px 16px -10px #ccc; } .dashboard-item { background-color:#fefefe; border:1px solid #ccc; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .dashboard-item h2 { background-color:#f5f5f5; border-bottom:1px solid #e0e0e0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,255,255, 0.7); -moz-box-shadow: 0 1px 2px rgba(0,255,255, 0.7); box-shadow: 0 1px 2px rgba(0,255,255, 0.7); } footer.main { border-top: 1px solid #e0e0e0; color:#555; margin:20px auto 0; padding-top:10px; width:960px; } .app-page footer.main { border-top: 0px solid #e0e0e0; } /*_ Decorative Elements -------------------------------------------------------------------------------------------------------- */ h3 .sticker { float:right;} .sticker { background-color: #bfbfbf; color: #ffffff; font-size: 9.75px; font-weight: bold; padding: 1px 3px 2px; text-transform: uppercase; white-space: nowrap; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: none; } .sticker.important { background-color: #c43c35; } .sticker.warning { background-color: #f89406; } .sticker.success { background-color: #46a546; } .sticker.notice { background-color: #62cffc; } /*_ Animations -------------------------------------------------------------------------------------------------------- */ @-webkit-keyframes fade_in { 0% { opacity:0.0; } 30% { opacity:0.0; } 100% { top: 1.0; } } @-moz-keyframes fade_in { 0% { opacity:0.0; } 30% { opacity:0.0; } 100% { top: 1.0; } } @-webkit-keyframes float { 0%, 100% { top: -12px; } 40% { top: 0px; } } @-moz-keyframes float { 0%, 100% { top: -12px; } 40% { top: 0px; } } @-webkit-keyframes size_shadow { 0%, 100% { border-radius: 120px/8px; height:8px; left:100px; top: -100px; width:120px; } 40% { border-radius: 130px/14px; height:14px; left:95px; top: -103px; width:130px; } } @-moz-keyframes size_shadow { 0%, 100% { border-radius: 120px/8px; height:8px; left:100px; top: -100px; width:120px; } 40% { border-radius: 130px/14px; height:14px; left:95px; top: -103px; width:130px; } } @-webkit-keyframes run_in { 0% { left: -2000px; opacity: .0; } 50% { opacity: .0; } 100% { left: 0; opacity: 1; } } @-moz-keyframes run_in { 0% { left: -2000px; opacity: .0; } 50% { opacity: .1; } 100% { left: 0; opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; top:-20px; } 100% { opacity: 1; top:0; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; top:-20px; } 100% { opacity: 1; top:0; } } @-ms-keyframes fadeInDown { 0% { opacity: 0; top:-20px; } 100% { opacity: 1; top:0; } } aside.main { position:relative; -webkit-animation: 1s fadeInDown; -moz-animation: 1s fadeInDown; -ms-animation: 1s fadeInDown; animation: 1s fadeInDown; } #presentation .slogan { position:relative; -webkit-animation: fadeInDown 0.8s 1s 1 ease-out both; -moz-animation: fadeInDown 0.8s 1s 1 ease-out both; animation: fadeInDown 0.8s 1s 1 ease-out both; } #presentation .slogan + .slogan { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } #presentation .slogan + .slogan + .slogan { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; } #presentation .slogan + .slogan + .slogan + .slogan{ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; animation-delay: 4s; } #presentation figure { -webkit-animation: fade_in 3s; -moz-animation: fade_in 3s; } #presentation figure img { position: relative; -webkit-animation: float 5s infinite; -moz-animation: float 5s infinite; animation: float 5s infinite; } #presentation figure b.shadow { -webkit-animation: size_shadow 5s infinite; -moz-animation: size_shadow 5s infinite; animation: size_shadow 5s infinite; } /*_ Kuzeko -------------------------------------------------------------------------------------------------------- */