http://example.com/style.css X/*custom font*/ @import url(http://fonts.googleapis.com/css?family=Merriweather+Sans); * { margin:0; padding:0; } html, body { min-height:100%; } body { text-align:center; padding-top:20px; font-family:'Merriweather Sans',arial,verdana; } .nav-menu { display:inline-block; -webkit-box-shadow:0 0 15px 1px rgba(0,0,0,0.35); -moz-box-shadow:0 0 15px 1px rgba(0,0,0,0.35); -ms-box-shadow:0 0 15px 1px rgba(0,0,0,0.35); -o-box-shadow:0 0 15px 1px rgba(0,0,0,0.35); box-shadow:0 0 15px 1px rgba(0,0,0,0.35); overflow:hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; counter-reset:flag; } .nav-menu a { text-decoration:none; outline:none; display:block; float:left; font-size:12px; line-height:36px; color:white; padding:0 10px 0 60px; background:#666; -webkit-background:linear-gradient(#666,#333); -moz-background:linear-gradient(#666,#333); -ms-background:linear-gradient(#666,#333); -o-background:linear-gradient(#666,#333); background:linear-gradient(#666,#333); position:relative; } .nav-menu a:first-child { padding-left:46px; -webkit-border-radius:5px 0 0 5px; -moz-border-radius:5px 0 0 5px; -ms-border-radius:5px 0 0 5px; -o-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px; } .nav-menu a:first-child:before { left:14px; } .nav-menu a:last-child { -webkit-border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; -ms-border-radius:0 5px 5px 0; -o-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; padding-right:20px; } .nav-menu a.active, .nav-menu a:hover { background:#333; -webkit-background:linear-gradient(#333,#000); -moz-background:linear-gradient(#333,#000); -ms-background:linear-gradient(#333,#000); -o-background:linear-gradient(#333,#000); background:linear-gradient(#333,#000); } .nav-menu a.active:after, .nav-menu a:hover:after { background:#333; -webkit-background:linear-gradient(135deg,#333,#000); -moz-background:linear-gradient(135deg,#333,#000); -ms-background:linear-gradient(135deg,#333,#000); -o-background:linear-gradient(135deg,#333,#000); background:linear-gradient(135deg,#333,#000); } .nav-menu a:after { content:''; position:absolute; top:0; right:-18px; width:36px; height:36px; -webkit-transform:scale(0.707) rotate(45deg); -moz-transform:scale(0.707) rotate(45deg); -ms-transform:scale(0.707) rotate(45deg); -o-transform:scale(0.707) rotate(45deg); transform:scale(0.707) rotate(45deg); z-index:1; background:#666; -webkit-background:linear-gradient(135deg,#666,#333); -moz-background:linear-gradient(135deg,#666,#333); -ms-background:linear-gradient(135deg,#666,#333); -o-background:linear-gradient(135deg,#666,#333); background:linear-gradient(135deg,#666,#333); -webkit-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1); -moz-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1); -ms-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1); -o-box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1); box-shadow:2px -2px 0 2px rgba(0,0,0,0.4),3px -3px 0 2px rgba(255,255,255,0.1); -webkit-border-radius:0 5px 0 50px; -moz-border-radius:0 5px 0 50px; -ms-border-radius:0 5px 0 50px; -o-border-radius:0 5px 0 50px; border-radius:0 5px 0 50px; } .nav-menu a:last-child:after { content:none; } .nav-menu a:before { content:counter(flag); counter-increment:flag; -webkit-border-radius:100%; -moz-border-radius:100%; -ms-border-radius:100%; -o-border-radius:100%; border-radius:100%; width:20px; height:20px; line-height:20px; margin:8px 0; position:absolute; top:0; left:30px; background:#444; -webkit-background:linear-gradient(#444,#222); -moz-background:linear-gradient(#444,#222); -ms-background:linear-gradient(#444,#222); -o-background:linear-gradient(#444,#222); background:linear-gradient(#444,#222); font-weight:bold; text-align:center; } .flat a, .flat a:after { background:white; color:black; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } .flat a:before { background:white; -webkit-box-shadow:0 0 0 1px #ccc; -moz-box-shadow:0 0 0 1px #ccc; -ms-box-shadow:0 0 0 1px #ccc; -o-box-shadow:0 0 0 1px #ccc; box-shadow:0 0 0 1px #ccc; } .flat a:hover, .flat a.active, .flat a:hover:after, .flat a.active:after { background:#9EEB62; }http://example.com/script.js X........... Browse Compare Order Confirmation Checkout Browse Compare Order Confirmation Checkout