/* Gumby */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Reset & Standards :: Links :: Lists :: Tables :: Misc */ /* -------------------------------------------------- :: Global Reset & Standards -------------------------------------------------- */ /* Eric Meyer's CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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: inherit; vertical-align: baseline; } html { font-size: 62.5%; } /* HTML5 display-role reset for older browsers */ 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; } .left, .columns.left { float: left; } .right, .columns.right { float: right; } .hide { display: none; } .highlight { background: #fcf8bf; } /*======================================================================= ❤❤❤ Artfully Masterminded by ZURB. Perfected by Digital Surgeons. ❤❤❤ ========================================================================*/ .ie9, .ie9 * { font-family: Arial, "Definitely Not Helvetica", sans-serif !important; } body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.6; color: #555; position: relative; -webkit-font-smoothing: antialiased; } /*===================================================== Headings ======================================================*/ h1, h2, h3, h4, h5, h6 { color: #1b1b1b; font-weight: bold; line-height: 1.6; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px; } h2 { font-size: 39px; font-size: 3.9rem; margin-bottom: 9px; } h3 { font-size: 29px; font-size: 2.9rem; margin-bottom: 9px; } h4 { font-size: 25px; font-size: 2.5rem; margin-bottom: 3px; } h5 { font-size: 19px; font-size: 1.9rem; font-weight: normal; margin-bottom: 3px; } h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; } .subhead { color: #777; font-weight: normal; margin-bottom: 20px; } /*===================================================== Links & Paragraph styles ======================================================*/ p { font-size: 16px; font-size: 1.6rem; line-height: 1.6; margin: 0 0 18px; } p img { margin: 0; } p.lead { font-size: 18px; font-size: 1.8rem; } a { color: #d04526; text-decoration: none; outline: 0; line-height: inherit; } a:hover { color: #c03d20; } 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 { margin-bottom: 12px; } ul.large li { line-height: 21px; } /* Mobile */ @media only screen and (max-width: 767px) { body, p { font-size: 16px; font-size: 1.6rem; line-height: 1.6; } #comment-wrap .two.columns img { max-width: 40px; } } em { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 56.4%; line-height: inherit; } h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; } /* 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; font-size: 1.2rem; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #555; } hr { border: 1px solid #ddd; clear: both; margin: 16px 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; } /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ p a, p a:visited { color: #444 !important; text-decoration: underline; } p a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /*======================================================================= ❤❤❤ Genius secreted from the brains of Digital Surgeons. ❤❤❤ ========================================================================*/ /*================================================= +++ LE GRID +++ A Responsive Grid -- Gumby defaults to a standard 960 grid, but you can change it to whatever you'd like. ==================================================*/ .container { padding: 0px 20px; } .row { width: 100%; max-width: 940px; min-width: 720px; margin: 0 auto; } /* To fix the grid into a different size, set max-width to your desired width */ .row .row { min-width: 0px; } .column, .columns { margin-left: 2.127663%; float: left; min-height: 1px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .column:first-child, .columns:first-child, .alpha { margin-left: 0px; } .column.omega, .columns.omega { float: right; } /*** Removed because it is usually annoying *** [class*="column"] + [class*="column"]:last-child { float: right; } ***/ .row .one.columns { width: 6.382989%; } .row .two.columns { width: 14.893641%; } .row .three.columns { width: 23.404293%; } .row .four.columns { width: 31.914945%; } .row .five.columns { width: 40.425597%; } .row .six.columns { width: 48.936249%; } .row .seven.columns { width: 57.446901%; } .row .eight.columns { width: 65.957553%; } .row .nine.columns { width: 74.468205%; } .row .ten.columns { width: 82.978857%; } .row .eleven.columns { width: 91.489509%; } .row .twelve.columns { width: 100%; } /*** Formula: Column Width + Twice the Default Margin ***/ .row .push_one { margin-left: 10.638315%; } .row .push_two, ul.children { margin-left: 19.148967%; } .row .push_three { margin-left: 27.659619%; } .row .push_four { margin-left: 36.170271%; } .row .push_five { margin-left: 44.680923%; } .row .push_six { margin-left: 53.191575%; } .row .push_seven { margin-left: 61.702227%; } .row .push_eight { margin-left: 70.212879%; } .row .push_nine { margin-left: 78.723531%; } .row .push_ten { margin-left: 87.234183%; } /*.row .push_eleven { margin-left: 95.744835%; }*/ /* Centering Columns is fun */ .row .one.centered { margin-left: 46.808586%; } .row .two.centered { margin-left: 42.55326%; } .row .three.centered { margin-left: 38.297934%; } .row .four.centered { margin-left: 34.042608%; } .row .five.centered { margin-left: 29.787282%; } .row .six.centered { margin-left: 25.531956%; } .row .seven.centered { margin-left: 21.27663%; } .row .eight.centered { margin-left: 17.021304%; } .row .nine.centered { margin-left: 12.765978%; } .row .ten.centered { margin-left: 8.510652%; } .row .eleven.centered { margin-left: 4.255326%; } /*** Formula: Column Width + Default Margin ***/ .row .push_one:first-child { margin-left: 8.510652%; } .row .push_two:first-child, ul.children:first-child { margin-left: 17.021304%; } .row .push_three:first-child { margin-left: 25.531956%; } .row .push_four:first-child { margin-left: 34.042608%; } .row .push_five:first-child { margin-left: 42.55326%; } .row .push_six:first-child { margin-left: 51.063912%; } .row .push_seven:first-child { margin-left: 59.574564%; } .row .push_eight:first-child { margin-left: 68.085216%; } .row .push_nine:first-child { margin-left: 76.596868%; } .row .push_ten:first-child { margin-left: 85.10652%; } .row .push_eleven:first-child { margin-left: 93.617172%; } /*************** 16-column styles ****************/ .sixteen.colgrid .row .one.columns { width: 4.255326%; } .sixteen.colgrid .row .two.columns { width: 10.638315%; } .sixteen.colgrid .row .three.columns { width: 17.021304%; } .sixteen.colgrid .row .four.columns { width: 23.404293%; } .sixteen.colgrid .row .five.columns { width: 29.787282%; } .sixteen.colgrid .row .six.columns { width: 36.170271%; } .sixteen.colgrid .row .seven.columns { width: 42.55326%; } .sixteen.colgrid .row .eight.columns { width: 48.936249%; } .sixteen.colgrid .row .nine.columns { width: 55.319238%; } .sixteen.colgrid .row .ten.columns { width: 61.702227%; } .sixteen.colgrid .row .eleven.columns { width: 68.085216%; } .sixteen.colgrid .row .twelve.columns { width: 74.468205%; } .sixteen.colgrid .row .thirteen.columns { width: 80.851194%; } .sixteen.colgrid .row .fourteen.columns { width: 87.234183%; } .sixteen.colgrid .row .fifteen.columns { width: 93.617172%; } .sixteen.colgrid .row .sixteen.columns { width: 100%; } /*** Formula: Column Width + Twice the Default Margin ***/ .sixteen.colgrid .row .push_one { margin-left: 8.510652%; } .sixteen.colgrid .row .push_two, ul.children { margin-left: 14.893641%; } .sixteen.colgrid .row .push_three { margin-left: 21.27663%; } .sixteen.colgrid .row .push_four { margin-left: 27.659619%; } .sixteen.colgrid .row .push_five { margin-left: 34.042608%; } .sixteen.colgrid .row .push_six { margin-left: 40.425597%; } .sixteen.colgrid .row .push_seven { margin-left: 46.808586%; } .sixteen.colgrid .row .push_eight { margin-left: 53.191575%; } .sixteen.colgrid .row .push_nine { margin-left: 59.574564%; } .sixteen.colgrid .row .push_ten { margin-left: 65.957553%; } .sixteen.colgrid .row .push_eleven { margin-left: 72.340542%; } .sixteen.colgrid .row .push_twelve { margin-left: 78.723531%; } .sixteen.colgrid .row .push_thirteen { margin-left: 85.10652%; } .sixteen.colgrid .row .push_fourteen { margin-left: 91.489509%; } .sixteen.colgrid .row .push_fifteen { margin-left: 97.872498%; } /* Centering Columns is fun */ .sixteen.colgrid .row .one.centered { margin-left: 47.872424%; } .sixteen.colgrid .row .two.centered { margin-left: 44.680929%; } .sixteen.colgrid .row .three.centered { margin-left: 41.489434%; } .sixteen.colgrid .row .four.centered { margin-left: 38.297939%; } .sixteen.colgrid .row .five.centered { margin-left: 35.106444%; } .sixteen.colgrid .row .six.centered { margin-left: 31.914949%; } .sixteen.colgrid .row .seven.centered { margin-left: 28.723454%; } .sixteen.colgrid .row .eight.centered { margin-left: 25.531959%; } .sixteen.colgrid .row .nine.centered { margin-left: 22.340464%; } .sixteen.colgrid .row .ten.centered { margin-left: 19.148969%; } .sixteen.colgrid .row .eleven.centered { margin-left: 15.957474%; } .sixteen.colgrid .row .twelve.centered { margin-left: 12.765979%; } .sixteen.colgrid .row .thirteen.centered { margin-left: 9.574484%; } .sixteen.colgrid .row .fourteen.centered { margin-left: 6.382989%; } .sixteen.colgrid .row .fifteen.centered { margin-left: 3.191495%; } /*** Formula: Column Width + Default Margin ***/ .sixteen.colgrid .row .push_one:first-child { margin-left: 6.382989%; } .sixteen.colgrid .row .push_two:first-child , ul.children:first-child { margin-left: 12.765978%; } .sixteen.colgrid .row .push_three:first-child { margin-left: 19.148967%; } .sixteen.colgrid .row .push_four:first-child { margin-left: 25.531956%; } .sixteen.colgrid .row .push_five:first-child { margin-left: 31.914945%; } .sixteen.colgrid .row .push_six:first-child { margin-left: 38.297934%; } .sixteen.colgrid .row .push_seven:first-child { margin-left: 44.680923%; } .sixteen.colgrid .row .push_eight:first-child { margin-left: 51.063912%; } .sixteen.colgrid .row .push_nine:first-child { margin-left: 57.446901%; } .sixteen.colgrid .row .push_ten:first-child { margin-left: 63.82989%; } .sixteen.colgrid .row .push_eleven:first-child { margin-left: 70.212879%; } .sixteen.colgrid .row .push_twelve:first-child { margin-left: 76.595868%; } .sixteen.colgrid .row .push_thirteen:first-child { margin-left: 82.978857%; } .sixteen.colgrid .row .push_fourteen:first-child { margin-left: 89.361846%; } .sixteen.colgrid .row .push_fifteen:first-child { margin-left: 95.744835%; } .container img, object, embed { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } /* Nicolas Gallagher's micro clearfix */ .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .clearfix { clear: both; } /*======================================================================= ❤❤❤ Artfully Masterminded by ZURB. Perfected by Digital Surgeons. ❤❤❤ ========================================================================*/ /* -------------------------------------------------- :: Block grids These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating blocks of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones -------------------------------------------------- .block-grid { display: block; overflow: hidden; } .block-grid>li { display: block; height: auto; float: left; } .block-grid.two-up { margin-left: -4% } .block-grid.two-up>li { margin-left: 4%; width: 46%; } .block-grid.three-up { margin-left: -2% } .block-grid.three-up>li { margin-left: 2%; width: 31.3%; } .block-grid.four-up { margin-left: -2% } .block-grid.four-up>li { margin-left: 2%; width: 23%; } .block-grid.five-up { margin-left: -1.5% } .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; } */ /*================================================== +++ Grid +++ ===================================================*/ /* Mobile */ @media only screen and (max-width: 767px) { /* Style adjustments for viewports 480px and under go here */ .row { text-align: center; } } @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .column:last-child, .columns:last-child { margin-right: 0; float: none; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; } .column:last-child, .columns:last-child { margin-right: 0; float: none; } [class*="column"] + [class*="column"]:last-child { float: none; } [class*="column"]:before, [class*="column"]:after { display: table; } [class*="column"]:after { clear: both; } .slideshow { height: auto; } .push_one, .push_two, .push_three, .push_four, .push_five, .push_six, .push_seven, .push_eight, .push_nine, .push_ten, .push_eleven, .centered, ul.children { margin-left: 0% !important; } h1 { font-size: 32px !important; } h2.quote { font-size: 32px; } body { margin-top: 50px; } } /*======================================================================= ❤❤❤ Gumby by Digital Surgeons. ❤❤❤ *** This is where you should keep all of your TEXT styles *** ========================================================================*/ @media screen and (max-width: 600px) { header{ position:static } .slideshow{ height:auto; } .item{ margin-bottom:20px; } .largepadding, .largemargin{ padding:20px 0px !important; } .bigpadding, .bigmargin{ padding:15px 0px !important; } .bigtoppadding, .bigbottompadding{ padding-top:15px !important; } .largetoppadding, .largebottompadding{ padding-top:20px !important; } .blackhorizontal, .whitehorizontal{ width:70% !important; margin-left:auto !important; margin-right:auto !important; } .team{ margin-bottom:20px; } .blackvertical, .whitevertical, .greyvertical{ border-right:0px; padding-right:0px; } .gridblock{ width:100% !important; } .griditem{ margin-bottom:0px !important; overflow:hidden; } .hidden{ overflow:visible; } footer.fixed { position:static; } .submit{ padding:20px 40px !important; } .logo{ margin-left:auto; margin-right:auto; } form .row{ width:90%; margin-left:auto; margin-right:auto; } .gridder{ max-width:auto; } } /*======================================================================= ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ ========================================================================*/ /*======================================================================= Buttons ========================================================================*/ .btn { position: relative; display: inline-block; width: auto; height: 36px; font-size: 16px; line-height: 36px; border: 1px solid #999; border-radius: 4px; cursor: pointer; margin: 0 0 20px 0; -webkit-box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ background: #ccc; /* Old browsers */ background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ } .btn:hover { -webkit-box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 1px 1px #fff, 0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/ background: #ccc; /* Old browsers */ background: -moz-linear-gradient(top, #fff 0%, #ddd 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fff 0%,#ddd 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fff 0%,#ddd 100%); /* IE10+ */ background: linear-gradient(top, #fff 0%,#ddd 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */ } .btn a, .btn:hover a { display: block; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-weight: bold; padding: 0 20px; text-align: center; text-decoration: none; color: #444; text-shadow: 0 1px 1px #fff; } .btn:hover a { line-height: inherit; } .btn:active { background: #ccc; /* Old browsers */ background: -moz-linear-gradient(top, #ddd 0%, #fff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#fff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ddd 0%,#fff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ddd 0%,#fff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ddd 0%,#fff 100%); /* IE10+ */ background: linear-gradient(top, #ddd 0%,#fff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .btn.primary { font-size: 24px; height: 56px; line-height: 56px; border: 1px solid #7d180a; background: #c54224; /* Old browsers */ background: -moz-linear-gradient(top, #ef6638 0%, #b62918 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ef6638), color-stop(100%,#b62918)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ef6638 0%,#b62918 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ef6638 0%,#b62918 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ef6638 0%,#b62918 100%); /* IE10+ */ background: linear-gradient(top, #ef6638 0%,#b62918 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef6638', endColorstr='#b62918',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px #fb926a, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 1px 1px #fb926a, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .btn.primary:hover { line-height: 56px; background: #ed754e; /* Old browsers */ background: -moz-linear-gradient(top, #ed754e 0%, #c93e23 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed754e), color-stop(100%,#c93e23)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ed754e 0%,#c93e23 100%); /* IE10+ */ background: linear-gradient(top, #ed754e 0%,#c93e23 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed754e', endColorstr='#c93e23',GradientType=0 ); /* IE6-9 */ } .btn.primary a, btn.primary:hover a { color: #fff; text-shadow: 0 1px 2px #6f1c0e, 0 1px 0 #6f1c0e; } .btn.primary:active { background: #ed754e; /* Old browsers */ background: -moz-linear-gradient(top, #c93e23 0%, #ed754e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c93e23), color-stop(100%,#ed754e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c93e23 0%,#ed754e 100%); /* IE10+ */ background: linear-gradient(top, #c93e23 0%,#ed754e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c93e23', endColorstr='#ed754e',GradientType=0 ); /* IE6-9 */ } .btn.secondary { font-size: 24px; height: 56px; line-height: 56px; border-color: #1d692d; -webkit-box-shadow: inset 0 1px 1px #94dda6, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 1px 1px #94dda6, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ background: #5dbb73; /* Old browsers */ background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ } .btn.secondary:hover { background: #68ce80; /* Old browsers */ background: -moz-linear-gradient(top, #68ce80 0%, #3cae5a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68ce80), color-stop(100%,#3cae5a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* IE10+ */ background: linear-gradient(top, #68ce80 0%,#3cae5a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68ce80', endColorstr='#3cae5a',GradientType=0 ); /* IE6-9 */ } .btn.secondary a, .btn.secondary:hover a { color: #fff; text-shadow: 0 1px 2px #114a1e, 0 1px 0 #114a1e; } .btn.secondary:active { background: #68ce80; /* Old browsers */ background: -moz-linear-gradient(top, #3cae5a 0%, #68ce80 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3cae5a), color-stop(100%,#68ce80)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* IE10+ */ background: linear-gradient(top, #3cae5a 0%,#68ce80 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cae5a', endColorstr='#68ce80',GradientType=0 ); /* IE6-9 */ } .btn.tertiary { font-size: 20px; height: 46px; line-height: 46px; border-color: #c19114; background: #feeeb8; /* Old browsers */ background: -moz-linear-gradient(top, #feeeb8 0%, #fed554 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feeeb8), color-stop(100%,#fed554)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #feeeb8 0%,#fed554 100%); /* IE10+ */ background: linear-gradient(top, #feeeb8 0%,#fed554 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feeeb8', endColorstr='#fed554',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: inset 0 2px 2px #fef9e9, inset 0 -3px 5px #fcaa20, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 2px 2px #fef9e9, inset 0 -3px 5px #fcaa20, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ } .btn.tertiary:hover { background: #fef4d3; /* Old browsers */ background: -moz-linear-gradient(top, #fef4d3 0%, #fcde7e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef4d3), color-stop(100%,#fcde7e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* IE10+ */ background: linear-gradient(top, #fef4d3 0%,#fcde7e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef4d3', endColorstr='#fcde7e',GradientType=0 ); /* IE6-9 */ -webkit-box-shadow: inset 0 2px 2px #fef9e9, inset 0 -3px 5px #fdc841, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ box-shadow: inset 0 2px 2px #fef9e9, inset 0 -3px 5px #fdc841, 0 1px 2px rgba(0,0,0,0.61); /* Remove this line if you dont want a dropshadow on your buttons*/ } .btn.tertiary a, .btn.tertiary:hover a { color: #6a4a00; text-shadow: 0 1px 2px #fff; } .btn.tertiary:active { background: #fef4d3; /* Old browsers */ background: -moz-linear-gradient(top, #fcde7e 0%, #fef4d3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcde7e), color-stop(100%,#fef4d3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* IE10+ */ background: linear-gradient(top, #fcde7e 0%,#fef4d3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcde7e', endColorstr='#fef4d3',GradientType=0 ); /* IE6-9 */ } .oval { -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; } .btn.submit input { font: 16px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-weight: bold; padding: 0 20px; text-align: center; text-decoration: none; background: transparent; color: #444; text-shadow: 0 1px 1px #fff; border: none; margin: 0; cursor: pointer; } .btn.submit { text-align: center; } .btn.left { text-align: left; text-indent: 12px; } /*===================================================================== Resize your buttons (Works in conjunction with .primary, .secondary, .tertiary button styles as well!) =======================================================================*/ .small.btn { font-size: 12px; line-height: 24px !important; height: 24px; } .medium.btn { font-size: 16px; line-height: 40px !important; height: 40px; } .large.btn { font-size: 30px; line-height: 65px !important; height: 65px; } /* Mobile Buttons */ @media only screen and (max-width: 767px) { .btn { display: block; } button.btn { width: 100%; padding-left: 0px; padding-right: 0px; } .btn.primary, .btn.secondary, .btn.tertiary, .btn.large { width: 100% !important; } .btn.medium { min-width: 75% !important; } } @media only screen and (min-width:768px) and (max-width: 939px) { /* Style adjustments for viewports between 768px and 940px */ .btn.shrink a { font-size: 90%; } } /* Correct FF button padding, thx ZURB */ @-moz-document url-prefix(http://) { input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner { border: 0; padding: 0; } input[type=submit].small.button { padding: 7px 20px 8px; } input[type=submit].medium.button { padding: 8px 34px 9px; } input[type=submit].large.button { padding: 9px 48px 10px; } } /* -------------------------------------------------- Alerts -------------------------------------------------- */ div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0px 1px rgba(255,255,255,0.9); position: relative; } .alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } .alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } .alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); } .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; } .alert-box a.close:hover { opacity: 0.4; } /*======================================================================= 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 12px 4px; color: #555; font-family:inherit;font-size:12px; background:#fff;} ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #3a3a3a; color: #141414;-webkit-transition-duration: .2s; -moz-transition-duration: .2s; -o-transition-duration: .2s; -ms-transition-duration: .2s; } ul.pagination li.unavailable a { cursor: default; color: #999; } ul.pagination li.unavailable:hover a { border-bottom: none; } /*======================================================================= Tabs ========================================================================*/ .tabs { display: block; } .tabs ul.tab-nav { margin: 0; padding: 0; height: 30px; border-bottom: 1px solid #1d692d; } .tabs .tab-nav li { display: block; width: auto; padding: 0; margin: 0 10px 0 0; line-height: 30px; float: left; color: #999; cursor: default; } .tabs .tab-nav li a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: 1px solid #1d692d; margin: 0 -1px 0 0; color: #05390a; text-shadow: 0 1px 1px #77d58e; background: #5dbb73; } .tabs .tab-nav li a:hover { text-decoration: none; } .tabs .tab-nav li.active a { height: 30px; font-weight: bold; background: #ebffef; border-width: 1px 1px 0 1px; text-shadow: 0 1px 1px #fff; } .tabs div.tab-content { display: none; padding: 20px 10px; } .tabs div.tab-content.active { display: block; } .tabs .tab-nav li:last-child { margin-right: 0; } /**** Pretty Tab Styles ****/ .pretty.tabs ul { display: table; width: 100%; border: 1px solid #999; border-radius: 4px 4px 0 0; -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; background: #ccc; /* Old browsers */ background: -moz-linear-gradient(top, #eee 0%, #ccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eee 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eee 0%,#ccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eee 0%,#ccc 100%); /* IE10+ */ background: linear-gradient(top, #eee 0%,#ccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ } .pretty.tabs li { display: table-cell; float: none; text-align: center; } .pretty.tabs li a { padding: 0; font-size: 16px; height: 52px; line-height: 52px; color: #444; border: none; border-right: 1px solid #999; text-shadow: 0 1px 1px #fff; font-weight: bold; background: transparent; } .pretty.tabs li:last-child a { border-right: none; } .pretty.tabs li.active a { font-weight: bold; color: #fff; position: relative; border: none; text-shadow: 0 2px 1px #1d692d, 0 1px 1px #1d692d ; -webkit-box-shadow: inset 0 1px 1px #94dda6, 0 1px 0 #1d692d, 0 -1px 0 #1d692d, 1px 0 0 #1d692d, -1px 0 0 #1d692d ; box-shadow: inset 0 1px 1px #94dda6, 0 1px 0 #1d692d, 0 -1px 0 #1d692d, 1px 0 0 #1d692d, -1px 0 0 #1d692d ; background: #5dbb73; /* Old browsers */ background: -moz-linear-gradient(top, #5dbb73 0%, #2d9047 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5dbb73), color-stop(100%,#2d9047)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* IE10+ */ background: linear-gradient(top, #5dbb73 0%,#2d9047 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dbb73', endColorstr='#2d9047',GradientType=0 ); /* IE6-9 */ } .pretty.tabs ul li.active:first-child a { border-radius: 4px 0 0 0; margin-left: 0; } .pretty.tabs ul li.active:last-child a { border-radius: 0 4px 0 0; } .ie7 .pretty.tabs > ul { width: 100%; height: 51px; } .ie7 .pretty.tabs > ul li { display: block; float: left; margin: 0; } .ie7 .pretty.tabs > ul li a { padding: 0 20px; } /**** Pill Tabs ****/ .pill.tabs { height: auto; } .pill.tabs li, .pill.tabs li, .pretty.pill.tabs li { float: none; height: auto; } .pill.tabs li a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } .pill.tabs li a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } .pretty.pill.tabs { border-bottom: solid 1px #eee; height: auto; } .pretty.pill.tabs li a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } .pretty.pill.tabs li a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .pretty.pill.tabs li.active:first-child a { margin: 0; } @media only screen and (max-width: 767px) { .pretty.tabs ul { border-radius: 4px; overflow: hidden; } .pretty.tabs li a { height: 36px; line-height: 36px; font-size: 14px; } } /* Vertically Align Stuff */ .valign { display: table; width: 100%; } .valign > div, .valign > article { display: table-cell; vertical-align: middle; }​ /*======================================================================= ======================================================================== ❤❤❤ A Beautifully Responsive UI Kit. Perfected by Digital Surgeons. ❤❤❤ ======================================================================== ========================================================================*/ /*======================================================================= Form Styles ========================================================================*/ form { margin: 0 0 18px; } form label { display: block; font-size: 16px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } form .field { position: relative; margin-bottom: 10px; } form dt { margin: 0; } .field .text input, .field .text input[type="search"], form textarea { font-size: 14px; font-family: "Lucida Grande", sans-serif; width: 100%; border: none; box-shadow: none; -webkit-box-shadow: none; border: none; padding: 0; margin: 0; outline: none; resize: none; } form textarea { height: 150px; } .field .text input[type="search"] { -webkit-appearance: textfield; } .field .text, .field .search, .field .textarea { position: relative; font-size: 14px; padding: 8px 10px; outline: none !important; background: #fff; -webkit-box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6 ; box-shadow: inset 0 2px 3px #ccc, 0 1px 0 #f4fff6 ; border: 1px solid #b7b7b7; border-radius: 4px; } .field .text.oval { border-radius: 1000px; } .field .search { padding: 2px 10px; line-height: 24px; margin-bottom: 0; border: 1px solid #1d692d; -webkit-box-shadow: 0px 1px 1px #94dda6, inset 0 1px 3px #888 ; box-shadow: 0px 1px 1px #94dda6, inset 0 1px 3px #888 ; } label + .text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; } .field.error .text, .field.error .textarea { margin-top: 45px; -webkit-box-shadow: inset 0 2px 3px #feb9a2, 0 1px 0 #f4fff6 ; box-shadow: inset 0 2px 3px #feb9a2, 0 1px 0 #f4fff6 ; -webkit-transition-duration: .2s; /* Saf3.2+, Chrome */ -moz-transition-duration: .2s; /* FF4+ */ -ms-transition-duration: .2s; /* IE10 */ -o-transition-duration: .2s; /* Opera 10.5+ */ transition-duration: .2s; } .field.error .text, .field.error .textarea, .field.error input, .field.error textarea { color: #cd4225; background: #ffdace; } form .msg { display: block; opacity: 0; height: 0; width: 100%; overflow: hidden; } form .error > .msg { opacity: 1; height: auto; overflow: visible; position: absolute; top: 0px; display: block; width: 100%; background: #b72a18; color: #fff; font-weight: 500; font-size: 14px; text-align: center; padding: 8px 0; border-radius: 4px; -webkit-transition-duration: .2s; /* Saf3.2+, Chrome */ -moz-transition-duration: .2s; /* FF4+ */ -ms-transition-duration: .2s; /* IE10 */ -o-transition-duration: .2s; /* Opera 10.5+ */ transition-duration: .2s; } form .error .msg .caret { left: 50%; top: 100%; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #b72a18; opacity: 1; } /* Form Picker Element (