/*csslint important:false*/ /* ========================================================================== Pure Base Extras ========================================================================== */ /** * Extra rules that Pure adds on top of Normalize.css */ html { font-family: sans-serif; } /** * Always hide an element when it has the `hidden` HTML attribute. */ .hidden, [hidden] { display: none !important; } /** * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining * aspect ratio. */ .pure-img { max-width: 100%; height: auto; display: block; } .pure-button { /* Structure */ display: inline-block; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; -webkit-user-drag: none; user-select: none; box-sizing: border-box; } /* Firefox: Get rid of the inner focus border */ .pure-button::-moz-focus-inner { padding: 0; border: 0; } /* Inherit .pure-g styles */ .pure-button-group { letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ } .opera-only :-o-prefocus, .pure-button-group { word-spacing: -0.43em; } .pure-button-group .pure-button { letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } /*csslint box-model:false*/ /* Box-model set to false because we're setting a height on select elements, which also have border and padding. This is done because some browsers don't render the padding. We explicitly set the box-model for select elements to border-box, so we can ignore the csslint warning. */ .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form select, .pure-form textarea { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; vertical-align: middle; box-sizing: border-box; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]) { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; box-sizing: border-box; } /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ /* May be able to remove this tweak as color inputs become more standardized across browsers. */ .pure-form input[type="color"] { padding: 0.2em 0.5em; } .pure-form input[type="text"]:focus, .pure-form input[type="password"]:focus, .pure-form input[type="email"]:focus, .pure-form input[type="url"]:focus, .pure-form input[type="date"]:focus, .pure-form input[type="month"]:focus, .pure-form input[type="time"]:focus, .pure-form input[type="datetime"]:focus, .pure-form input[type="datetime-local"]:focus, .pure-form input[type="week"]:focus, .pure-form input[type="number"]:focus, .pure-form input[type="search"]:focus, .pure-form input[type="tel"]:focus, .pure-form input[type="color"]:focus, .pure-form select:focus, .pure-form textarea:focus { outline: 0; border-color: #129FEA; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type]):focus { outline: 0; border-color: #129FEA; } .pure-form input[type="file"]:focus, .pure-form input[type="radio"]:focus, .pure-form input[type="checkbox"]:focus { outline: thin solid #129FEA; outline: 1px auto #129FEA; } .pure-form .pure-checkbox, .pure-form .pure-radio { margin: 0.5em 0; display: block; } .pure-form input[type="text"][disabled], .pure-form input[type="password"][disabled], .pure-form input[type="email"][disabled], .pure-form input[type="url"][disabled], .pure-form input[type="date"][disabled], .pure-form input[type="month"][disabled], .pure-form input[type="time"][disabled], .pure-form input[type="datetime"][disabled], .pure-form input[type="datetime-local"][disabled], .pure-form input[type="week"][disabled], .pure-form input[type="number"][disabled], .pure-form input[type="search"][disabled], .pure-form input[type="tel"][disabled], .pure-form input[type="color"][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form input:not([type])[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { background-color: #eee; /* menu hover bg color */ color: #777; /* menu text color */ border-color: #ccc; } .pure-form input:focus:invalid, .pure-form textarea:focus:invalid, .pure-form select:focus:invalid { color: #b94a48; border-color: #e9322d; } .pure-form input[type="file"]:focus:invalid:focus, .pure-form input[type="radio"]:focus:invalid:focus, .pure-form input[type="checkbox"]:focus:invalid:focus { outline-color: #e9322d; } .pure-form select { /* Normalizes the height; padding is not sufficient. */ height: 2.25em; border: 1px solid #ccc; background-color: white; } .pure-form select[multiple] { height: auto; } .pure-form label { margin: 0.5em 0 0.2em; } .pure-form fieldset { margin: 0; padding: 0.35em 0 0.75em; border: 0; } .pure-form legend { display: block; width: 100%; padding: 0.3em 0; margin-bottom: 0.3em; color: #333; border-bottom: 1px solid #e5e5e5; } .pure-form-stacked input[type="text"], .pure-form-stacked input[type="password"], .pure-form-stacked input[type="email"], .pure-form-stacked input[type="url"], .pure-form-stacked input[type="date"], .pure-form-stacked input[type="month"], .pure-form-stacked input[type="time"], .pure-form-stacked input[type="datetime"], .pure-form-stacked input[type="datetime-local"], .pure-form-stacked input[type="week"], .pure-form-stacked input[type="number"], .pure-form-stacked input[type="search"], .pure-form-stacked input[type="tel"], .pure-form-stacked input[type="color"], .pure-form-stacked input[type="file"], .pure-form-stacked select, .pure-form-stacked label, .pure-form-stacked textarea { display: block; margin: 0.25em 0; } /* Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector. */ .pure-form-stacked input:not([type]) { display: block; margin: 0.25em 0; } .pure-form-aligned input, .pure-form-aligned textarea, .pure-form-aligned select, .pure-form-message-inline { display: inline-block; vertical-align: middle; } .pure-form-aligned textarea { vertical-align: top; } /* Aligned Forms */ .pure-form-aligned .pure-control-group { margin-bottom: 0.5em; } .pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; margin: 0 1em 0 0; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em; } /* Rounded Inputs */ .pure-form input.pure-input-rounded, .pure-form .pure-input-rounded { border-radius: 2em; padding: 0.5em 1em; } /* Grouped Inputs */ .pure-form .pure-group fieldset { margin-bottom: 10px; } .pure-form .pure-group input, .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px; } .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { z-index: 3; } .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; margin: 0; } .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; margin: 0; } .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; margin: 0; } .pure-form .pure-group button { margin: 0.35em 0; } .pure-form .pure-input-1 { width: 100%; } .pure-form .pure-input-3-4 { width: 75%; } .pure-form .pure-input-2-3 { width: 66%; } .pure-form .pure-input-1-2 { width: 50%; } .pure-form .pure-input-1-3 { width: 33%; } .pure-form .pure-input-1-4 { width: 25%; } /* Inline help for forms */ .pure-form-message-inline { display: inline-block; padding-left: 0.3em; color: #666; vertical-align: middle; font-size: 0.875em; } /* Block help for forms */ .pure-form-message { display: block; color: #666; font-size: 0.875em; } .pure-table { /* Remove spacing between table cells (from Normalize.css) */ border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } .pure-table caption { color: #000; font: italic 85%/1 arial, sans-serif; padding: 1em 0; text-align: center; } .pure-table td, .pure-table th { border-left: 1px solid #cbcbcb;/* inner column border */ border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; /*to make ths where the title is really long work*/ padding: 0.5em 1em; /* cell padding */ } .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; vertical-align: bottom; } /* striping: even - #fff (white) odd - #f2f2f2 (light gray) */ .pure-table td { background-color: transparent; } .pure-table-odd td { background-color: #f2f2f2; } /* nth-child selector for modern browsers */ .pure-table-striped tr:nth-child(2n-1) td { background-color: #f2f2f2; } /* BORDERED TABLES */ .pure-table-bordered td { border-bottom: 1px solid #cbcbcb; } .pure-table-bordered tbody > tr:last-child > td { border-bottom-width: 0; } /* HORIZONTAL BORDERED TABLES */ .pure-table-horizontal td, .pure-table-horizontal th { border-width: 0 0 1px 0; border-bottom: 1px solid #cbcbcb; } .pure-table-horizontal tbody > tr:last-child > td { border-bottom-width: 0; } /*csslint outline-none:false*/ .pure-button { font-family: inherit; font-size: 100%; padding: 0.5em 1em; color: rgba(0, 0, 0, 0.80); border: none rgba(0, 0, 0, 0); background-color: #E6E6E6; text-decoration: none; border-radius: 2px; } .pure-button-hover, .pure-button:hover, .pure-button:focus { background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); } .pure-button:focus { outline: 0; } .pure-button-active, .pure-button:active { box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; border-color: #000; } .pure-button[disabled], .pure-button-disabled, .pure-button-disabled:hover, .pure-button-disabled:focus, .pure-button-disabled:active { border: none; background-image: none; opacity: 0.40; cursor: not-allowed; box-shadow: none; pointer-events: none; } .pure-button-hidden { display: none; } .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: rgb(0, 120, 231); color: #fff; } /* Button Groups */ .pure-button-group .pure-button { margin: 0; border-radius: 0; border-right: 1px solid rgba(0, 0, 0, 0.2); } .pure-button-group .pure-button:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .pure-button-group .pure-button:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-right: none; }