diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..e738928 --- /dev/null +++ b/css/base.css @@ -0,0 +1,303 @@ +/* +* Skeleton V0.1 +* Created by Dave Gamache +* www.skeleton.gs +* 4/30/2011 +*/ + + + + +/* Table of Content +================================================== + @Reset & Basics + @Typography + @Links + @Lists + @Grid + @Tables + @Misc +*/ + + +/* Reset & Basics (Inspired by E. Meyers) +================================================== */ + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + body { + line-height: 1; } + ol, ul { + list-style: none; } + blockquote, q { + quotes: none; } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; } + table { + border-collapse: collapse; + border-spacing: 0; } + body { + background: #fff; + font: 13px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;; ; + color: #444; + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ } + + +/* -------------------------------------------------- + :: Typography + -------------------------------------------------- */ + h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; margin-bottom: 12px;} + h2 { font-size: 35px; margin-bottom: 9px; } + h3 { font-size: 28px; margin-bottom: 9px; } + h4 { font-size: 21px; margin-bottom: 3px; } + h5 { font-size: 18px; font-weight: normal; margin-bottom: 3px; } + h6 { font-size: 15px; font-weight: normal; } + + .subheader { color: #777; font-weight: 300; margin-bottom: 24px; } + + p { line-height: 17px; margin: 0 0 18px; } + p img { margin: 0; } + p.lead { font-size: 18px; line-height: 24px; } + + em { font-style: italic; line-height: inherit; } + strong { font-weight: bold; line-height: inherit; } + small { font-size: 80%; line-height: inherit; } + +/* Blockquotes */ + blockquote, blockquote p { line-height: 20px; color: #777; } + blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } + + abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } + abbr { text-transform: none; } + + +/* -------------------------------------------------- + :: Links + -------------------------------------------------- */ + a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; } + a:hover { color: #11639d; } + p a, p a:visited { line-height: inherit; } + + +/* -------------------------------------------------- + :: Lists + -------------------------------------------------- */ + ul, ol { margin-bottom: 18px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ol ol { margin: 4px 0 5px 30px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + +/* -------------------------------------------------- + :: Grid + -------------------------------------------------- */ + + /* Container */ + div.container { position: relative; width: 1050px; margin: 0 auto; padding: 0; } + body.ie8 div.container { position: static; } + + .row { margin: 0 0 18px -30px; width: 1080px; } + .column, .columns { float: left; display: inline; margin: 0 0 0 30px; } + + .one { width: 15px; } + .two { width: 60px; } + .three { width: 105px; } + .four { width: 150px; } + .five { width: 195px; } + .six, .one-fourth { width: 240px; } + .seven { width: 285px; } + .eight, .one-third { width: 330px; } + .nine { width: 375px; } + .ten { width: 420px; } + .eleven { width: 465px; } + .twelve { width: 510px; } + .thirteen { width: 555px; } + .fourteen { width: 600px; } + .fifteen { width: 645px; } + .sixteen, .two-thirds { width: 690px; } + .seventeen { width: 735px; } + .eighteen { width: 780px; } + .nineteen { width: 825px; } + .twenty { width: 870px; } + .twenty-one { width: 915px; } + .twenty-two { width: 960px; } + .twenty-three { width: 1005px; } + .twenty-four { width: 1050px; } + + .offset-by-one { margin-left: 30px; } + .offset-by-two { margin-left: 75px; } + .offset-by-three { margin-left: 120px; } + .offset-by-four { margin-left: 165px; } + .offset-by-five { margin-left: 210px; } + .offset-by-six { margin-left: 255px; } + .offset-by-seven { margin-left: 300px; } + .offset-by-eight { margin-left: 345px; } + .offset-by-nine { margin-left: 390px; } + .offset-by-ten { margin-left: 435px; } + .offset-by-eleven { margin-left: 480px; } + .offset-by-twelve { margin-left: 525px; } + .offset-by-thirteen { margin-left: 570px; } + .offset-by-fourteen { margin-left: 615px; } + .offset-by-fifteen { margin-left: 660px; } + .offset-by-sixteen { margin-left: 705px; } + .offset-by-seventeen { margin-left: 750px; } + .offset-by-eighteen { margin-left: 795px; } + .offset-by-nineteen { margin-left: 840px; } + .offset-by-twenty { margin-left: 885px; } + .offset-by-twenty-one { margin-left: 930px; } + .offset-by-twenty-two { margin-left: 975px; } + .offset-by-twenty-three { margin-left: 1020px; } + + .two .row { width: 90px; } + .three .row { width: 135px; } + .four .row { width: 180px; } + .five .row { width: 225px; } + .six .row { width: 270px; } + .seven .row { width: 315px; } + .eight .row { width: 360px; } + .nine .row { width: 405px; } + .ten .row { width: 450px; } + .eleven .row { width: 495px; } + .twelve .row { width: 540px; } + .thirteen .row { width: 585px; } + .fourteen .row { width: 630px; } + .fifteen .row { width: 675px; } + .sixteen .row { width: 720px; } + .seventeen .row { width: 765px; } + .eighteen .row { width: 810px; } + .nineteen .row { width: 855px; } + .twenty .row { width: 900px; } + .twenty-one .row { width: 945px; } + .twenty-two .row { width: 990px; } + .twenty-three .row { width: 1035px; } + .twenty-four .row { width: 1080px; } + + + /* Slim (940/960) Grid */ + div.container.slim { position: relative; width: 940px; margin: 0 auto; padding: 0; } + body.ie8 div.container.slim { position: static; } + .slim .row { margin: 0 0 18px -20px; width: 960px; } + .slim .column, .slim .columns { float: left; display: inline; margin: 0 0 0 20px; } + + + .slim .one { width: 40px; } + .slim .two { width: 100px; } + .slim .three { width: 160px; } + .slim .four { width: 220px; } + .slim .five { width: 280px; } + .slim .six { width: 340px; } + .slim .seven { width: 400px; } + .slim .eight { width: 460px; } + .slim .nine { width: 520px; } + .slim .ten { width: 580px; } + .slim .eleven { width: 640px; } + .slim .twelve { width: 700px; } + .slim .thirteen { width: 760px; } + .slim .fourteen { width: 820px; } + .slim .fifteen { width: 880px; } + .slim .sixteen { width: 940px; } + .slim .one-half { width: 420px; padding-right: 10px; } + .slim .one-third { width: 300px; } + .slim .two-thirds { width: 580px; } + .slim .ten .row { width: 600px; } + .slim .eleven .row { width: 660px; } + .slim .twelve .row { width: 760px; } + + .slim .offset-by-one-half { margin-left: 50px; } + .slim .offset-by-one { margin-left: 80px; } + .slim .offset-by-two { margin-left: 140px; } + .slim .offset-by-three { margin-left: 200px; } + .slim .offset-by-four { margin-left: 260px; } + .slim .offset-by-five { margin-left: 320px; } + .slim .offset-by-six { margin-left: 380px; } + .slim .offset-by-seven { margin-left: 440px; } + .slim .offset-by-eight { margin-left: 500px; } + .slim .offset-by-nine { margin-left: 560px; } + .slim .offset-by-ten { margin-left: 620px; } + .slim .offset-by-eleven { margin-left: 680px; } + .slim .offset-by-twelve { margin-left: 740px; } + .slim .offset-by-thirteen { margin-left: 800px; } + .slim .offset-by-fourteen { margin-left: 880px; } + + .slim .two .row { width: 120px; } + .slim .three .row { width: 180px; } + .slim .four .row { width: 240px; } + .slim .five .row { width: 300px; } + .slim .six .row { width: 360px; } + .slim .seven .row { width: 420px; } + .slim .eight .row { width: 480px; } + .slim .nine .row { width: 540px; } + .slim .ten .row { width: 600px; } + .slim .eleven .row { width: 660px; } + .slim .twelve .row { width: 720px; } + .slim .thirteen .row { width: 780px; } + .slim .fourteen .row { width: 840px; } + .slim .fifteen .row { width: 900px; } + .slim .sixteen .row { width: 960px; } + .slim .one-half .row { width: 480px; } + .slim .one-third .row { width: 320px; } + .slim .two-thirds .row { width: 600px; } + + + /* Clear the columns automagically */ + .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } + * html .row, * html .clearfix { height: 1%; } + .row, .clearfix { display: inline-block; } + .row, .clearfix { display: block; } + + +/* -------------------------------------------------- + :: Tables + -------------------------------------------------- */ + table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; } + + table thead { background: #555; } + table thead tr th, + table tbody tr td { font-size: 12px; line-height: 18px; } + table thead tr { } + table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #fff; } + table tbody { } + table tbody tr { } + table tbody tr.even, + table tbody tr.alt { background: #f5f5f5; } + body.safari table tbody tr:nth-child(even) { background: #f5f5f5; } + table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; } + + + /* Style the tables a bit lighter */ + table.alt { } + table.alt thead { background: #f5f5f5; } + table.alt thead tr th { color: #222; } + table.alt thead tr th:first-child { border-left: none; } + table.alt thead tr th:last-child { border-right: none; } + +/* -------------------------------------------------- + :: Misc +---------------------------------------------------*/ + .left { float: left; } + .right { float: right; } + .hide { display: none; } + .highlight { background: #ff0; } + + \ No newline at end of file diff --git a/css/forms.css b/css/forms.css new file mode 100644 index 0000000..c608dbf --- /dev/null +++ b/css/forms.css @@ -0,0 +1,86 @@ +/* Artfully masterminded by ZURB + + Make sure to include the app.js if you are going to use inline label inputs +*/ + + +/* ----------------------------------------- + Standard Forms +----------------------------------------- */ + + form { margin: 0 0 18px; } + form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } + + input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; } + input.input-text, textarea, select { display: block; margin-bottom: 9px; } + label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; } + + /* Text input and textarea font and padding */ + input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; } + input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; } + input.input-text:focus, textarea:focus { background: #f9f9f9; } + + /* Inlined Label Style */ + input.placeholder, textarea.placeholder { color: #888; } + + /* Text input and textarea sizes */ + input.input-text, textarea { width: 254px; } + input.small, textarea.small { width: 134px; } + input.medium, textarea.medium { width: 254px; } + input.large, textarea.large { width: 434px; } + + /* Fieldsets */ + form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } + + /* Errors */ + input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); } + label.red { color: red; } + small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; } + + .small + .error { width: 140px; } + .medium + .error { width: 260px; } + .large + .error { width: 440px; } + + /* ----------------------------------------- + Nicer Forms + ----------------------------------------- */ + form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; } + form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; } + form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; } + + form.nice fieldset { -webkit-border-radius: 5px; -moz-border-radius: 5px; } + + form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; } + + form.nice .small + .error { width: 132px; } + form.nice .medium + .error { width: 252px; } + form.nice .large + .error { width: 432px; } + + /* ----------------------------------------- + Custom Forms + ----------------------------------------- */ + + form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(../images/misc/custom-form-sprites.png) 0 0 no-repeat; } + form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } + form.custom span.custom.radio.checked { background-position: 0px -14px; } + form.custom span.custom.checkbox.checked { background-position: 0px -28px; } + + form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; } + form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; } + form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 0 no-repeat; right: 0px; top: 0px; border: solid 1px #ddd; } + form.custom div.custom.dropdown:hover a.selector, + form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; } + + form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0px; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; } + form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; } + form.custom div.custom.dropdown ul li.selected { background: url(../images/misc/custom-form-sprites.png) right -52px no-repeat; } + form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; } + form.custom div.custom.dropdown ul li.selected:hover { background: url(../images/misc/custom-form-sprites.png) #2a85e8 right -78px no-repeat; } + form.custom div.custom.dropdown ul.show { display: block; } + + form.custom div.custom.dropdown.open ul { display: block; } + + + + + \ No newline at end of file diff --git a/css/ie.css b/css/ie.css new file mode 100644 index 0000000..f69b1ae --- /dev/null +++ b/css/ie.css @@ -0,0 +1,3 @@ +/* This is for all IE specfific style less than IE9 and +we make IE 8 render like 7. We hate IE. */ + diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..e69de29 diff --git a/css/orbit-1.2.3.css b/css/orbit-1.2.3.css new file mode 100644 index 0000000..91e8942 --- /dev/null +++ b/css/orbit-1.2.3.css @@ -0,0 +1,201 @@ +/* CSS for jQuery Orbit Plugin 1.2.3 + * www.ZURB.com/playground + * Copyright 2010, ZURB + * Free to use under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + + + +/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY + ================================================== */ +#featured { + width: 940px; + height: 450px; + background: #000 url('orbit/loading.gif') no-repeat center center; + overflow: hidden; } +#featured>img, +#featured>div, +#featured>a { display: none; } + + + + +/* CONTAINER + ================================================== */ + +div.orbit-wrapper { + width: 1px; + height: 1px; + position: relative; } + +div.orbit { + width: 1px; + height: 1px; + position: relative; + overflow: hidden } + +div.orbit>img { + position: absolute; + top: 0; + left: 0; + display: none; } + +div.orbit>a { + border: none; + position: absolute; + top: 0; + left: 0; + line-height: 0; + display: none; } + +.orbit>div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */ + + +/* TIMER + ================================================== */ + +div.timer { + width: 40px; + height: 40px; + overflow: hidden; + position: absolute; + top: 10px; + right: 10px; + opacity: .6; + cursor: pointer; + z-index: 1001; } + +span.rotator { + display: block; + width: 40px; + height: 40px; + position: absolute; + top: 0; + left: -20px; + background: url(orbit/rotator-black.png) no-repeat; + z-index: 3; } + +span.mask { + display: block; + width: 20px; + height: 40px; + position: absolute; + top: 0; + right: 0; + z-index: 2; + overflow: hidden; } + +span.rotator.move { + left: 0 } + +span.mask.move { + width: 40px; + left: 0; + background: url(orbit/timer-black.png) repeat 0 0; } + +span.pause { + display: block; + width: 40px; + height: 40px; + position: absolute; + top: 0; + left: 0; + background: url(orbit/pause-black.png) no-repeat; + z-index: 4; + opacity: 0; } + +span.pause.active { + background: url(orbit/pause-black.png) no-repeat 0 -40px } + +div.timer:hover span.pause, +span.pause.active { + opacity: 1 } + + +/* CAPTIONS + ================================================== */ + +.orbit-caption { + display: none; + font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; } + +.orbit-wrapper .orbit-caption { + background: #000; + background: rgba(0,0,0,.6); + z-index: 1000; + color: #fff; + text-align: center; + padding: 7px 0; + font-size: 13px; + position: absolute; + right: 0; + bottom: 0; + width: 100%; } + + +/* DIRECTIONAL NAV + ================================================== */ + +div.slider-nav { + display: block } + +div.slider-nav span { + width: 78px; + height: 100px; + text-indent: -9999px; + position: absolute; + z-index: 1000; + top: 50%; + margin-top: -50px; + cursor: pointer; } + +div.slider-nav span.right { + background: url(orbit/right-arrow.png); + right: 0; } + +div.slider-nav span.left { + background: url(orbit/left-arrow.png); + left: 0; } + +/* BULLET NAV + ================================================== */ + +.orbit-bullets { + position: absolute; + z-index: 1000; + list-style: none; + bottom: -40px; + left: 50%; + margin-left: -50px; + padding: 0; } + +.orbit-bullets li { + float: left; + margin-left: 5px; + cursor: pointer; + color: #999; + text-indent: -9999px; + background: url(orbit/bullets.jpg) no-repeat 4px 0; + width: 13px; + height: 12px; + overflow: hidden; } + +.orbit-bullets li.active { + color: #222; + background-position: -8px 0; } + +.orbit-bullets li.has-thumb { + background: none; + width: 100px; + height: 75px; } + +.orbit-bullets li.active.has-thumb { + background-position: 0 0; + border-top: 2px solid #000; } \ No newline at end of file diff --git a/css/ui.css b/css/ui.css new file mode 100644 index 0000000..37c04e4 --- /dev/null +++ b/css/ui.css @@ -0,0 +1,208 @@ +/* Artfully masterminded by ZURB */ + + + +/* -------------------------------------------------- + Table of Contents +----------------------------------------------------- +:: Buttons +:: Notices/Alerts +:: Tabs +:: Pagination +:: Lists +:: Panels +*/ + + + + +/* -------------------------------------------------- + Buttons + -------------------------------------------------- */ + + .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 url(../images/misc/button-gloss.png) repeat-x 0 -34px; + -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 url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%); + background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -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: 1000px; + -webkit-border-radius: 1000px; + border-radius: 1000px; + } + + .button.full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; + } + + .button.left-align { + text-align: left; + text-indent: 12px; + } + + .button:active {} + + /* Sizes ---------- */ + .small.button { font-size: 11px; padding: 8px 20px 10px; } + .medium.button { font-size: 13px; } + .large.button { font-size: 18px; padding: 11px 48px 13px; } + + /* Nice Sizes ---------- */ + .nice.small.button { background-position: 0 -36px; } + .nice.large.button { background-position: 0 -30px; } + + /* Colors ---------- */ + .blue.button { background-color: #00a6fc; } + .red.button { background-color: #e91c21; } + .white.button { background-color: #e9e9e9; color: #333; } + .charcoal.button { background-color: #141414; } + + /* Nice Colors ---------- */ + .nice.blue.button { border: 1px solid #0593dc; } + .nice.red.button { border: 1px solid #b90b0b; } + .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; } + .red.button:hover { background-color: #d01217; } + .white.button:hover { background-color: #dadada; color: #333; } + .charcoal.button:hover { background-color: #000; } + + + +/* -------------------------------------------------- + Tabs + -------------------------------------------------- */ + dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; } + dl.tabs dt { display: block; width: auto; height: 30px; padding: 0px 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; } + dl.tabs dt:first-child { padding: 0 9px 0 0px; } + dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; } + dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0px 9px; line-height: 30px; border: solid 1px #ddd; margin: 0; color: #555; background: #eee; } + dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0px 1px; height: 30px; margin: 0 -1px 0 0 } + + .nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; } + .nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; color: #555555; background: none; border: none; } + .nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; } + .nice.tabs dd:first-child a.active { margin-left: 0; } + + ul.tabs-content { margin: 0; display: block; } + ul.tabs-content > li { display:none; } + ul.tabs-content > li.active { display: block; } + + dl.contained, dl.nice.contained { margin-bottom: 0px; } + dl.contained.tabs dd a { padding: 0px 14px; } + dl.nice.contained.tabs dd a { padding: 7px 18px 9px; } + ul.contained.tabs-content { padding: 0; } + ul.contained.tabs-content li { padding: 20px; border: solid 0px #ddd; border-width: 0px 1px 1px 1px; } + ul.nice.contained.tabs-content li { border-color: #eee; } + +/* -------------------------------------------------- + Pagination + -------------------------------------------------- */ + ul.pagination { display: block; height: 24px; margin-left: -5px; } + ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } + ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; } + ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; } + ul.pagination li.unavailable a { cursor: default; color: #999; } + ul.pagination li.unavailable:hover a { border-bottom: none; } + + +/* -------------------------------------------------- + Lists + -------------------------------------------------- */ + ul.nice, ol.nice { list-style: none; margin: 0; } + ul.nice li, ol.nice li { padding-left: 13px; position: relative } + ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0px; top: 0px; color: #ccc; } + + +/* -------------------------------------------------- + Notices/Alerts +---------------------------------------------------*/ +/* Alerts cannot be closed and notices can */ + + .notice, .alert { + position: relative; + background: #222 url(../images/misc/button-overlay.png) repeat-x bottom; + width: 100%; + margin: 10px 0; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #fff; + text-shadow: 0 -1px 1px rgba(0,0,0,0.25); + font-weight: bold; + } + .notice>span, .alert>span { + display: block; + padding: 5px 10px 6px; + } + .notice a.close { + font-size: 20px; + line-height: .5; + color: #fff; + text-shadow: 0 -1px 1px rbga(0,0,0,.25); + font-weight: bold; + cursor: pointer; + position: absolute; + right: 10px; + top: 6px; + } + + /* NOTES + + Close button entity is × + Sample Markup: +