/* * Skeleton V0.1 * Created by Dave Gamache * www.skeleton.gs * 4/30/2011 */ /* Table of Content ================================================== @Tabs @Buttons */ /* @Tabs (activate in app.js) ================================================== */ ul.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; } ul.tabs li { display: block; width: auto; height: 30px; padding: 0; float: left; } ul.tabs li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 16px; line-height: 30px; border: solid 1px #ddd; margin: 0; background: #eee; font-size: 13px; } ul.tabs li a.active { background: #fff; border-width: 1px 0 0px 0; height: 30px; margin: 0 -1px 0 0; color: #111; } ul.tabs li:first-child a.active { border-width: 1px 0 0 1px; } ul.tabs li:last-child a.active { border-width: 1px 1px 0 0; } ul.tabs-content { margin: 0; display: block; } ul.tabs-content > li { display:none; } ul.tabs-content > li.active { display: block; } /* Sample Markup */ /* @Buttons ================================================== */ a.button { background: #00a6fc; display: inline-block; padding: 9px 34px 11px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; position: relative; cursor: pointer; } .button.nice { background: #00a6fc; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.28); background: #00a6fc -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%); background: #00a6fc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent)); border: 1px solid #0593dc; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; } .button.radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .button.round { -moz-border-radius: 300px; -webkit-border-radius: 300px; border-radius: 300px; } .button.full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Sizes ---------- */ .small.button { font-size: 11px; padding: 8px 20px 10px; } .medium.button { font-size: 13px; } .large.button { font-size: 18px; padding: 11px 48px 13px; } /* Colors ---------- */ .blue.button { background-color: #00a6fc; } .white.button { background-color: #e9e9e9; color: #333; } .charcoal.button { background-color: #141414; } /* Nice Colors ---------- */ .nice.blue.button { border: 1px solid #0593dc; } .nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; } .nice.charcoal.button { border: 1px solid #000; } /* Hovers ---------- */ .button:hover { background-color: #0192dd; color: #fff; } .blue.button:hover { background-color: #0192dd; } .white.button:hover { background-color: #dadada; color: #333; } .charcoal.button:hover { background-color: #000; }