Daniel@0: body { Daniel@0: background-color: #ffffff; Daniel@0: } Daniel@0: Daniel@0: /* from PURE buttons-core.css */ Daniel@0: .pure-skin-swi .pure-button { Daniel@0: /* Structure */ Daniel@0: display: inline-block; Daniel@0: *display: inline; /*IE 6/7*/ Daniel@0: zoom: 1; Daniel@0: line-height: normal; Daniel@0: white-space: nowrap; Daniel@0: vertical-align: baseline; Daniel@0: text-align: center; Daniel@0: cursor: pointer; Daniel@0: -webkit-user-drag: none; Daniel@0: -webkit-user-select: none; Daniel@0: -moz-user-select: none; Daniel@0: -ms-user-select: none; Daniel@0: user-select: none; Daniel@0: } Daniel@0: Daniel@0: /* Firefox: Get rid of the inner focus border */ Daniel@0: .pure-skin-swi .pure-button::-moz-focus-inner{ Daniel@0: padding: 0; Daniel@0: border: 0; Daniel@0: } Daniel@0: /* end from PURE buttons-core.css */ Daniel@0: /* from PURE buttons.css */ Daniel@0: /*csslint unqualified-attributes:false*/ Daniel@0: Daniel@0: .pure-skin-swi .pure-button { Daniel@0: font-size: 100%; Daniel@0: *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/ Daniel@0: *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */ Daniel@0: padding: 0.5em 1.5em 0.5em; Daniel@0: color: #0c1113; /* rgba not supported (IE 8) */ Daniel@0: /* color: rgba(0, 0, 0, 0.80); rgba supported */ Daniel@0: /* *color: #444; IE 6 & 7 */ Daniel@0: border: 1px solid #9bb5bf; /*IE 6/7/8*/ Daniel@0: border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ Daniel@0: background-color: #b1c5cd; Daniel@0: text-decoration: none; Daniel@0: border-radius: 4px; Daniel@0: -webkit-font-smoothing: antialiased; Daniel@0: /* Transitions */ Daniel@0: -webkit-transition: 0.1s linear -webkit-box-shadow; Daniel@0: -moz-transition: 0.1s linear -moz-box-shadow; Daniel@0: -ms-transition: 0.1s linear box-shadow; Daniel@0: -o-transition: 0.1s linear box-shadow; Daniel@0: transition: 0.1s linear box-shadow; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-button-hover, Daniel@0: .pure-skin-swi .pure-button:hover { Daniel@0: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0); Daniel@0: background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05))); Daniel@0: background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); Daniel@0: background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05)); Daniel@0: background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15)); Daniel@0: background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); Daniel@0: background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05)); Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-button:focus { Daniel@0: outline: 0; Daniel@0: } Daniel@0: .pure-skin-swi .pure-button-active, Daniel@0: .pure-skin-swi .pure-button:active { Daniel@0: box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-button[disabled], Daniel@0: .pure-skin-swi .pure-button-disabled, Daniel@0: .pure-skin-swi .pure-button-disabled:hover, Daniel@0: .pure-skin-swi .pure-button-disabled:active { Daniel@0: border: none; Daniel@0: background-image: none; Daniel@0: filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); Daniel@0: filter: alpha(opacity=40); Daniel@0: -khtml-opacity: 0.40; Daniel@0: -moz-opacity: 0.40; Daniel@0: opacity: 0.40; Daniel@0: cursor: not-allowed; Daniel@0: box-shadow: none; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-button-hidden { Daniel@0: display: none; Daniel@0: } Daniel@0: Daniel@0: /* Firefox: Get rid of the inner focus border */ Daniel@0: .pure-skin-swi .pure-button::-moz-focus-inner{ Daniel@0: padding: 0; Daniel@0: border: 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-button-primary, Daniel@0: .pure-skin-swi .pure-button-selected, Daniel@0: .pure-skin-swi a.pure-button-primary, Daniel@0: .pure-skin-swi a.pure-button-selected { Daniel@0: background-color: #457387; Daniel@0: color: #fcfdfd; Daniel@0: } Daniel@0: Daniel@0: /*! Copyright 2013 Yahoo! Inc. http://yuilibrary.com/license/ */ Daniel@0: /* This page lists core form styles adopted from Normalize.css. */ Daniel@0: /*! Copyright (c) Nicolas Gallagher and Jonathan Neal */ Daniel@0: Daniel@0: /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ Daniel@0: Daniel@0: /* This page has Normalize.css form-specific style rules applied to a .yui3-form context */ Daniel@0: Daniel@0: /* ========== Daniel@0: Forms Core Daniel@0: =========*/ Daniel@0: Daniel@0: Daniel@0: /* Daniel@0: * Corrects margin displayed oddly in IE 6/7. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form { Daniel@0: margin: 0; Daniel@0: } Daniel@0: Daniel@0: /* Define consistent border, margin, and padding.*/ Daniel@0: Daniel@0: Daniel@0: .pure-skin-swi .pure-form fieldset { Daniel@0: border: 1px solid #c0c0c0; Daniel@0: margin: 0 2px; Daniel@0: padding: 0.35em 0.625em 0.75em; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Corrects color not being inherited in IE 6/7/8/9. Daniel@0: * 2. Corrects text not wrapping in Firefox 3. Daniel@0: * 3. Corrects alignment displayed oddly in IE 6/7. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form legend { Daniel@0: border: 0; /* 1 */ Daniel@0: padding: 0; Daniel@0: white-space: normal; /* 2 */ Daniel@0: *margin-left: -7px; /* 3 */ Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Corrects font size not being inherited in all browsers. Daniel@0: * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, Daniel@0: * and Chrome. Daniel@0: * 3. Improves appearance and consistency in all browsers. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form button, Daniel@0: .pure-skin-swi .pure-form input, Daniel@0: .pure-skin-swi .pure-form select, Daniel@0: .pure-skin-swi .pure-form textarea { Daniel@0: font-size: 100%; /* 1 */ Daniel@0: margin: 0; /* 2 */ Daniel@0: vertical-align: baseline; /* 3 */ Daniel@0: *vertical-align: middle; /* 3 */ Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in Daniel@0: * the UA stylesheet. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form button, Daniel@0: .pure-skin-swi .pure-form input { Daniel@0: line-height: normal; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` Daniel@0: * and `video` controls. Daniel@0: * 2. Corrects inability to style clickable `input` types in iOS. Daniel@0: * 3. Improves usability and consistency of cursor style between image-type Daniel@0: * `input` and others. Daniel@0: * 4. Removes inner spacing in IE 7 without affecting normal text inputs. Daniel@0: * Known issue: inner spacing remains in IE 6. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form button, Daniel@0: .pure-skin-swi .pure-form input[type="button"], /* 1 */ Daniel@0: .pure-skin-swi .pure-form input[type="reset"], Daniel@0: .pure-skin-swi .pure-form input[type="submit"] { Daniel@0: -webkit-appearance: button; /* 2 */ Daniel@0: cursor: pointer; /* 3 */ Daniel@0: *overflow: visible; /* 4 */ Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * Re-set default cursor for disabled elements. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form button[disabled], Daniel@0: .pure-skin-swi .pure-form input[disabled] { Daniel@0: cursor: default; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Addresses box sizing set to content-box in IE 8/9. Daniel@0: * 2. Removes excess padding in IE 8/9. Daniel@0: * 3. Removes excess padding in IE 7. Daniel@0: * Known issue: excess padding remains in IE 6. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="checkbox"], Daniel@0: .pure-skin-swi .pure-form input[type="radio"] { Daniel@0: box-sizing: border-box; /* 1 */ Daniel@0: padding: 0; /* 2 */ Daniel@0: *height: 13px; /* 3 */ Daniel@0: *width: 13px; /* 3 */ Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. Daniel@0: * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome Daniel@0: * (include `-moz` to future-proof). Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="search"] { Daniel@0: -webkit-appearance: textfield; /* 1 */ Daniel@0: -moz-box-sizing: content-box; Daniel@0: -webkit-box-sizing: content-box; /* 2 */ Daniel@0: box-sizing: content-box; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * Removes inner padding and search cancel button in Safari 5 and Chrome Daniel@0: * on OS X. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="search"]::-webkit-search-cancel-button, Daniel@0: .pure-skin-swi .pure-form input[type="search"]::-webkit-search-decoration { Daniel@0: -webkit-appearance: none; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * Removes inner padding and border in Firefox 3+. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form button::-moz-focus-inner, Daniel@0: .pure-skin-swi .pure-form input::-moz-focus-inner { Daniel@0: border: 0; Daniel@0: padding: 0; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: * 1. Removes default vertical scrollbar in IE 6/7/8/9. Daniel@0: * 2. Improves readability and alignment in all browsers. Daniel@0: */ Daniel@0: Daniel@0: .pure-skin-swi .pure-form textarea { Daniel@0: overflow: auto; /* 1 */ Daniel@0: vertical-align: top; /* 2 */ Daniel@0: } Daniel@0: /* =============== forms-responsive.css =================*/ Daniel@0: @media only screen and (max-width : 480px) { Daniel@0: .pure-skin-swi .pure-form button[type="submit"] { Daniel@0: margin: 0.7em 0 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="text"], Daniel@0: .pure-skin-swi .pure-form input[type="password"], Daniel@0: .pure-skin-swi .pure-form input[type="email"], Daniel@0: .pure-skin-swi .pure-form input[type="url"], Daniel@0: .pure-skin-swi .pure-form input[type="date"], Daniel@0: .pure-skin-swi .pure-form input[type="month"], Daniel@0: .pure-skin-swi .pure-form input[type="time"], Daniel@0: .pure-skin-swi .pure-form input[type="datetime"], Daniel@0: .pure-skin-swi .pure-form input[type="datetime-local"], Daniel@0: .pure-skin-swi .pure-form input[type="week"], Daniel@0: .pure-skin-swi .pure-form input[type="number"], Daniel@0: .pure-skin-swi .pure-form input[type="search"], Daniel@0: .pure-skin-swi .pure-form input[type="tel"], Daniel@0: .pure-skin-swi .pure-form input[type="color"], Daniel@0: .pure-skin-swi .pure-form label { Daniel@0: margin-bottom: 0.3em; Daniel@0: display: block; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-group input[type="text"], Daniel@0: .pure-skin-swi .pure-group input[type="password"], Daniel@0: .pure-skin-swi .pure-group input[type="email"], Daniel@0: .pure-skin-swi .pure-group input[type="url"], Daniel@0: .pure-skin-swi .pure-group input[type="date"], Daniel@0: .pure-skin-swi .pure-group input[type="month"], Daniel@0: .pure-skin-swi .pure-group input[type="time"], Daniel@0: .pure-skin-swi .pure-group input[type="datetime"], Daniel@0: .pure-skin-swi .pure-group input[type="datetime-local"], Daniel@0: .pure-skin-swi .pure-group input[type="week"], Daniel@0: .pure-skin-swi .pure-group input[type="number"], Daniel@0: .pure-skin-swi .pure-group input[type="search"], Daniel@0: .pure-skin-swi .pure-group input[type="tel"], Daniel@0: .pure-skin-swi .pure-group input[type="color"] { Daniel@0: margin-bottom: 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form-aligned .pure-control-group label { Daniel@0: margin-bottom: 0.3em; Daniel@0: text-align: left; Daniel@0: display: block; Daniel@0: width: 100%; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form-aligned .pure-controls { Daniel@0: margin: 1.5em 0 0 0; Daniel@0: } Daniel@0: Daniel@0: /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ Daniel@0: .pure-skin-swi .pure-form .pure-help-inline, Daniel@0: .pure-skin-swi .pure-form-message-inline, Daniel@0: .pure-skin-swi .pure-form-message { Daniel@0: display: block; Daniel@0: font-size: 80%; Daniel@0: /* increased bottom padding to make it group with its related input element */ Daniel@0: padding: 0.2em 0 0.8em; Daniel@0: } Daniel@0: } Daniel@0: Daniel@0: /* =============== forms.css =================================*/ Daniel@0: .pure-skin-swi .pure-form input[type="text"], Daniel@0: .pure-skin-swi .pure-form input[type="password"], Daniel@0: .pure-skin-swi .pure-form input[type="email"], Daniel@0: .pure-skin-swi .pure-form input[type="url"], Daniel@0: .pure-skin-swi .pure-form input[type="date"], Daniel@0: .pure-skin-swi .pure-form input[type="month"], Daniel@0: .pure-skin-swi .pure-form input[type="time"], Daniel@0: .pure-skin-swi .pure-form input[type="datetime"], Daniel@0: .pure-skin-swi .pure-form input[type="datetime-local"], Daniel@0: .pure-skin-swi .pure-form input[type="week"], Daniel@0: .pure-skin-swi .pure-form input[type="number"], Daniel@0: .pure-skin-swi .pure-form input[type="search"], Daniel@0: .pure-skin-swi .pure-form input[type="tel"], Daniel@0: .pure-skin-swi .pure-form input[type="color"], Daniel@0: .pure-skin-swi .pure-form select, Daniel@0: .pure-skin-swi .pure-form textarea { Daniel@0: padding: 0.5em 0.6em; Daniel@0: display: inline-block; Daniel@0: border: 1px solid #e6e6e6; Daniel@0: font-size: 0.8em; Daniel@0: box-shadow: inset 0 1px 3px #e6e6e6; Daniel@0: border-radius: 8px; Daniel@0: -webkit-transition: 0.3s linear border; Daniel@0: -moz-transition: 0.3s linear border; Daniel@0: -ms-transition: 0.3s linear border; Daniel@0: -o-transition: 0.3s linear border; Daniel@0: transition: 0.3s linear border; Daniel@0: -webkit-box-sizing: border-box; Daniel@0: -moz-box-sizing: border-box; Daniel@0: box-sizing: border-box; Daniel@0: -webkit-font-smoothing: antialiased; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="text"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="password"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="email"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="url"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="date"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="month"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="time"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="datetime"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="datetime-local"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="week"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="number"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="search"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="tel"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="color"]:focus, Daniel@0: .pure-skin-swi .pure-form select:focus, Daniel@0: .pure-skin-swi .pure-form textarea:focus { Daniel@0: outline: 0; Daniel@0: outline: thin dotted \9; /* IE6-9 */ Daniel@0: border-color: #129FEA; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form input[type="file"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="radio"]:focus, Daniel@0: .pure-skin-swi .pure-form input[type="checkbox"]:focus { Daniel@0: outline: thin dotted #333; Daniel@0: outline: 1px auto #129FEA; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-checkbox, Daniel@0: .pure-skin-swi .pure-form .pure-radio { Daniel@0: margin: 0.5em 0; Daniel@0: display: block; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form input[type="text"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="password"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="email"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="url"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="date"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="month"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="time"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="datetime"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="datetime-local"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="week"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="number"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="search"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="tel"][disabled], Daniel@0: .pure-skin-swi .pure-form input[type="color"][disabled], Daniel@0: .pure-skin-swi .pure-form select[disabled], Daniel@0: .pure-skin-swi .pure-form textarea[disabled] { Daniel@0: cursor: not-allowed; Daniel@0: box-shadow: inset 0 1px 10px #ededed; Daniel@0: background-color: #ededed; Daniel@0: color: #adadad; Daniel@0: border-color: #e6e6e6; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form input[readonly], Daniel@0: .pure-skin-swi .pure-form select[readonly], Daniel@0: .pure-skin-swi .pure-form textarea[readonly], Daniel@0: .pure-skin-swi .pure-form input[readonly]:focus, Daniel@0: .pure-skin-swi .pure-form select[readonly]:focus, Daniel@0: .pure-skin-swi .pure-form textarea[readonly]:focus { Daniel@0: background: #eee; /* menu hover bg color */ Daniel@0: color: #777; /* menu text color */ Daniel@0: border-color: #ccc; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form input:focus:invalid, Daniel@0: .pure-skin-swi .pure-form textarea:focus:invalid, Daniel@0: .pure-skin-swi .pure-form select:focus:invalid { Daniel@0: color: #b94a48; Daniel@0: border: 1px solid #ee5f5b; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form input:focus:invalid:focus, Daniel@0: .pure-skin-swi .pure-form textarea:focus:invalid:focus, Daniel@0: .pure-skin-swi .pure-form select:focus:invalid:focus { Daniel@0: border-color: #e9322d; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form input[type="file"]:focus:invalid:focus, Daniel@0: .pure-skin-swi .pure-form input[type="radio"]:focus:invalid:focus, Daniel@0: .pure-skin-swi .pure-form input[type="checkbox"]:focus:invalid:focus { Daniel@0: outline-color: #e9322d; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form select { Daniel@0: border: 1px solid #e6e6e6; Daniel@0: background-color: white; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form select[multiple] { Daniel@0: height: auto; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form label { Daniel@0: margin: 0.5em 0 0.2em; Daniel@0: color: #4f4f4f; Daniel@0: font-size:90%; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form fieldset { Daniel@0: margin: 0; Daniel@0: padding: 0.35em 0 0.75em; Daniel@0: border: 0; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form legend { Daniel@0: display: block; Daniel@0: width: 100%; Daniel@0: padding: 0.3em 0; Daniel@0: margin-bottom: 0.3em; Daniel@0: font-size: 125%; Daniel@0: color: #262626; Daniel@0: border-bottom: 1px solid #ededed; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form-stacked input[type="text"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="password"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="email"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="url"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="date"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="month"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="time"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="datetime"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="datetime-local"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="week"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="number"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="search"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="tel"], Daniel@0: .pure-skin-swi .pure-form-stacked input[type="color"], Daniel@0: .pure-skin-swi .pure-form-stacked select, Daniel@0: .pure-skin-swi .pure-form-stacked label, Daniel@0: .pure-skin-swi .pure-form-stacked textarea { Daniel@0: display: block; Daniel@0: margin: 0.25em 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form-aligned input, Daniel@0: .pure-skin-swi .pure-form-aligned textarea, Daniel@0: .pure-skin-swi .pure-form-aligned select, Daniel@0: /* note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ Daniel@0: .pure-skin-swi .pure-form-aligned .pure-help-inline, Daniel@0: .pure-skin-swi .pure-form-message-inline { Daniel@0: display: inline-block; Daniel@0: *display: inline; /* IE7 inline-block hack */ Daniel@0: *zoom: 1; Daniel@0: vertical-align: middle; Daniel@0: } Daniel@0: Daniel@0: /* aligned Forms */ Daniel@0: .pure-skin-swi .pure-form-aligned .pure-control-group { Daniel@0: margin-bottom: 0.5em; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form-aligned .pure-control-group label { Daniel@0: text-align: right; Daniel@0: display: inline-block; Daniel@0: vertical-align: middle; Daniel@0: width: 10em; Daniel@0: margin: 0 1em 0 0; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form-aligned .pure-controls { Daniel@0: margin: 1.5em 0 0 10em; Daniel@0: } Daniel@0: Daniel@0: /* Rounded Inputs */ Daniel@0: .pure-skin-swi .pure-form input.pure-input-rounded, Daniel@0: .pure-skin-swi .pure-form .pure-input-rounded { Daniel@0: border-radius: 60px; Daniel@0: padding: 0.5em 1em; Daniel@0: } Daniel@0: Daniel@0: /* Grouped Inputs */ Daniel@0: .pure-skin-swi .pure-form .pure-group fieldset { Daniel@0: margin-bottom: 10px; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-group input { Daniel@0: display: block; Daniel@0: padding: 0.5em 0.6em; Daniel@0: margin: 0; Daniel@0: border-radius: 0; Daniel@0: position: relative; Daniel@0: top: -1px; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-group input:focus { Daniel@0: z-index: 2; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-group input:first-child { Daniel@0: top: 1px; Daniel@0: border-radius: 8px 8px 0px 0px; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-group input:last-child { Daniel@0: top: -2px; Daniel@0: border-radius: 0px 0px 8px 8px; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-group button { Daniel@0: margin: 0.35em 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-form .pure-input-1 { Daniel@0: width: 100%; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-input-2-3 { Daniel@0: width: 66%; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-input-1-2 { Daniel@0: width: 50%; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-input-1-3 { Daniel@0: width: 33%; Daniel@0: } Daniel@0: .pure-skin-swi .pure-form .pure-input-1-4 { Daniel@0: width: 25%; Daniel@0: } Daniel@0: Daniel@0: /* Inline help for forms */ Daniel@0: /* Note: pure-help-inline is deprecated. Use .pure-form-message-inline instead */ Daniel@0: .pure-skin-swi .pure-form .pure-help-inline, Daniel@0: .pure-skin-swi .pure-form-message-inline { Daniel@0: display: inline-block; Daniel@0: padding-left: 0.3em; Daniel@0: color: #adadad; Daniel@0: vertical-align: middle; Daniel@0: font-size: 90%; Daniel@0: } Daniel@0: Daniel@0: /* Block help for forms */ Daniel@0: .pure-skin-swi .pure-form-message { Daniel@0: display: block; Daniel@0: color: #adadad; Daniel@0: font-size: 90%; Daniel@0: } Daniel@0: /* note no template for forms-r.css. no skinnable properties */ Daniel@0: Daniel@0: /* foundational CSS */ Daniel@0: .pure-skin-swi .pure-table { Daniel@0: /* Remove spacing between table cells (from Normalize.css) */ Daniel@0: border-collapse: collapse; Daniel@0: border-spacing: 0; Daniel@0: empty-cells: show; Daniel@0: border: 1px solid #d7e1e5; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-table caption { Daniel@0: color: #adadad; Daniel@0: font: italic 85%/1 arial, sans-serif; Daniel@0: padding: 1em 0; Daniel@0: text-align: center; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-table td, Daniel@0: .pure-skin-swi .pure-table th { Daniel@0: border-left: 1px solid #d7e1e5;/* inner column border */ Daniel@0: border-width: 0 0 0 1px; Daniel@0: font-size: inherit; Daniel@0: margin: 0; Daniel@0: overflow: visible; /*to make ths where the title is really long work*/ Daniel@0: padding: 0.3em 0.6em; /* cell padding */ Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-table td:first-child, Daniel@0: .pure-skin-swi .pure-table th:first-child { Daniel@0: border-left-width: 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-table thead { Daniel@0: background-color: #d7e1e5; Daniel@0: color: #243238; Daniel@0: text-align: left; Daniel@0: vertical-align: bottom; Daniel@0: } Daniel@0: Daniel@0: /* Daniel@0: striping: Daniel@0: even - #fff (white) Daniel@0: odd - #f2f2f2 (light gray) Daniel@0: */ Daniel@0: .pure-skin-swi .pure-table td { Daniel@0: background-color: #e9eff1; Daniel@0: color: #32474e; Daniel@0: } Daniel@0: .pure-skin-swi .pure-table-odd td { Daniel@0: background-color: #d7e1e5; Daniel@0: color: #1e2b2f; Daniel@0: } Daniel@0: Daniel@0: /* nth-child selector for modern browsers */ Daniel@0: .pure-skin-swi .pure-table-striped tr:nth-child(2n-1) td { Daniel@0: background-color: #d7e1e5; Daniel@0: color: #1e2b2f; Daniel@0: } Daniel@0: Daniel@0: Daniel@0: /* BORDERED TABLES */ Daniel@0: .pure-skin-swi .pure-table-bordered td { Daniel@0: border-bottom: 1px solid #d7e1e5; Daniel@0: } Daniel@0: .pure-skin-swi .pure-table-bordered tbody > tr:last-child td, Daniel@0: .pure-skin-swi .pure-table-horizontal tbody > tr:last-child td { Daniel@0: border-bottom-width: 0; Daniel@0: } Daniel@0: Daniel@0: /* HORIZONTAL BORDERED TABLES */ Daniel@0: .pure-skin-swi .pure-table-horizontal td, Daniel@0: .pure-skin-swi .pure-table-horizontal th { Daniel@0: border-width: 0 0 1px 0; Daniel@0: border-bottom:1px solid #d7e1e5; Daniel@0: } Daniel@0: .pure-skin-swi .pure-table-horizontal tbody > tr:last-child td { Daniel@0: border-bottom-width: 0; Daniel@0: } Daniel@0: Daniel@0: /* from PURE menu-core.css */ Daniel@0: /*csslint adjoining-classes:false, outline-none:false*/ Daniel@0: /*TODO: Remove this lint rule override after a refactor of this code.*/ Daniel@0: Daniel@0: .pure-skin-swi .pure-menu ul { Daniel@0: position: absolute; Daniel@0: visibility: hidden; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu.pure-menu-open { Daniel@0: visibility: visible; Daniel@0: z-index: 2; Daniel@0: width: 100%; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu ul { Daniel@0: left: -10000px; Daniel@0: list-style: none; Daniel@0: margin: 0; Daniel@0: padding: 0; Daniel@0: top: -10000px; Daniel@0: z-index: 1; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu > ul { position: relative; } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-open > ul { Daniel@0: left: 0; Daniel@0: top: 0; Daniel@0: visibility: visible; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-open > ul:focus { Daniel@0: outline: 0; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu li { Daniel@0: position: relative; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu a, .pure-skin-swi .pure-menu .pure-menu-heading { Daniel@0: display: block; Daniel@0: color: inherit; Daniel@0: line-height: 1.5em; Daniel@0: padding: 0.35em 1.4em; Daniel@0: text-decoration: none; Daniel@0: white-space: nowrap; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu.pure-menu-horizontal > .pure-menu-heading { Daniel@0: display: inline-block; Daniel@0: *display: inline; Daniel@0: zoom: 1; Daniel@0: margin: 0; Daniel@0: vertical-align: middle; Daniel@0: } Daniel@0: .pure-skin-swi .pure-menu.pure-menu-horizontal > ul { Daniel@0: display: inline-block; Daniel@0: *display: inline; Daniel@0: zoom: 1; Daniel@0: vertical-align: middle; Daniel@0: /* height: 2.4em; removed for Skin Builder */ Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu li a { padding: 0.35em 1.4em; } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-can-have-children > .pure-menu-label:after { Daniel@0: content: '\25B8'; Daniel@0: float: right; Daniel@0: font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */ Daniel@0: margin-right: -20px; Daniel@0: margin-top: -1px; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-can-have-children > .pure-menu-label { Daniel@0: padding-right: 30px; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-separator { Daniel@0: background-color: #d7e1e5; Daniel@0: display: block; Daniel@0: height: 1px; Daniel@0: font-size: 0; Daniel@0: margin: 7px 2px; Daniel@0: overflow: hidden; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-hidden { Daniel@0: display: none; Daniel@0: } Daniel@0: Daniel@0: /* FIXED MENU */ Daniel@0: .pure-skin-swi .pure-menu-fixed { Daniel@0: position: fixed; Daniel@0: top:0; Daniel@0: left:0; Daniel@0: width: 100%; Daniel@0: } Daniel@0: Daniel@0: Daniel@0: /* HORIZONTAL MENU CODE */ Daniel@0: Daniel@0: /* Initial menus should be inline-block so that they are horizontal */ Daniel@0: .pure-skin-swi .pure-menu-horizontal li { Daniel@0: display: inline-block; Daniel@0: *display: inline; Daniel@0: zoom: 1; Daniel@0: vertical-align: middle; Daniel@0: } Daniel@0: Daniel@0: /* Submenus should still be display:block; */ Daniel@0: .pure-skin-swi .pure-menu-horizontal li li { Daniel@0: display: block; Daniel@0: } Daniel@0: Daniel@0: /* Content after should be down arrow */ Daniel@0: .pure-skin-swi .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after { Daniel@0: content: "\25BE"; Daniel@0: } Daniel@0: /*Add extra padding to elements that have the arrow so that the hover looks nice */ Daniel@0: .pure-skin-swi .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label { Daniel@0: padding-right: 30px; Daniel@0: } Daniel@0: Daniel@0: /* Adjusting separator for vertical menus */ Daniel@0: .pure-skin-swi .pure-menu-horizontal li.pure-menu-separator { Daniel@0: height: 50%; Daniel@0: width: 1px; Daniel@0: margin: 0 7px; Daniel@0: } Daniel@0: Daniel@0: /* Submenus should be horizontal separator again */ Daniel@0: .pure-skin-swi .pure-menu-horizontal li li.pure-menu-separator { Daniel@0: height: 1px; Daniel@0: width: auto; Daniel@0: margin: 7px 2px; Daniel@0: } Daniel@0: Daniel@0: Daniel@0: /* end from yuicss/menu-core.css *******************************************/ Daniel@0: /* from yuicss menu-paginator.css */ Daniel@0: /*csslint box-model:false*/ Daniel@0: /*TODO: Remove this lint rule override after a refactor of this code.*/ Daniel@0: Daniel@0: .pure-skin-swi .pure-paginator { Daniel@0: Daniel@0: /* `pure-g` Grid styles */ Daniel@0: letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ Daniel@0: *letter-spacing: normal; /* reset IE < 8 */ Daniel@0: *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ Daniel@0: text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ Daniel@0: Daniel@0: /* `pure-paginator` Specific styles */ Daniel@0: list-style: none; Daniel@0: margin: 0; Daniel@0: padding: 0; Daniel@0: } Daniel@0: .opera-only :-o-prefocus, Daniel@0: .pure-skin-swi .pure-paginator { Daniel@0: word-spacing: -0.43em; Daniel@0: } Daniel@0: Daniel@0: /* `pure-u` Grid styles */ Daniel@0: .pure-skin-swi .pure-paginator li { Daniel@0: display: inline-block; Daniel@0: *display: inline; /* IE < 8: fake inline-block */ Daniel@0: zoom: 1; Daniel@0: letter-spacing: normal; Daniel@0: word-spacing: normal; Daniel@0: vertical-align: top; Daniel@0: text-rendering: auto; Daniel@0: } Daniel@0: .pure-skin-swi .pure-paginator .pure-button { Daniel@0: border-radius: 0; Daniel@0: padding: 0.8em 1.4em; Daniel@0: vertical-align: top; Daniel@0: height: 1.1em; Daniel@0: } Daniel@0: .pure-skin-swi .pure-paginator .pure-button:focus, Daniel@0: .pure-skin-swi .pure-paginator .pure-button:active { Daniel@0: outline-style: none; Daniel@0: } Daniel@0: .pure-skin-swi .pure-paginator .prev, Daniel@0: .pure-skin-swi .pure-paginator .next { Daniel@0: /*color: #C0C1C3; allow .pure-button to color text*/ Daniel@0: } Daniel@0: .pure-skin-swi .pure-paginator .prev { Daniel@0: border-radius: 8px 0px 0px 8px; Daniel@0: } Daniel@0: .pure-skin-swi .pure-paginator .next { Daniel@0: border-radius: 0px 8px 8px 0px; Daniel@0: } Daniel@0: /* end from PURE menu-paginator.css ******************************/ Daniel@0: /* from PURE menu.css *******************************************/ Daniel@0: /* MAIN MENU STYLING */ Daniel@0: /*csslint adjoining-classes:false*/ Daniel@0: /*TODO: Remove this lint rule override after a refactor of this code.*/ Daniel@0: Daniel@0: .pure-skin-swi .pure-menu.pure-menu-open, Daniel@0: .pure-skin-swi .pure-menu.pure-menu-horizontal li .pure-menu-children { Daniel@0: background: #e9eff1; /* Old browsers */ Daniel@0: border: 1px solid #d7e1e5; Daniel@0: } Daniel@0: Daniel@0: /* remove borders for horizontal menus */ Daniel@0: .pure-skin-swi .pure-menu.pure-menu-horizontal, Daniel@0: .pure-skin-swi .pure-menu.pure-menu-horizontal .pure-menu-heading { Daniel@0: border: none; Daniel@0: } Daniel@0: Daniel@0: Daniel@0: /* LINK STYLES */ Daniel@0: Daniel@0: .pure-skin-swi .pure-menu a { Daniel@0: border: 1px solid transparent; Daniel@0: border-left: none; Daniel@0: border-right: none; Daniel@0: Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu a, Daniel@0: .pure-skin-swi .pure-menu .pure-menu-can-have-children > li:after { Daniel@0: color: #32474e; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu .pure-menu-can-have-children > li:hover:after { Daniel@0: color: #1e2b2f; Daniel@0: } Daniel@0: Daniel@0: /* Focus style for a dropdown menu-item when the parent has been opened */ Daniel@0: .pure-skin-swi .pure-menu .pure-menu-open { Daniel@0: background: #cddbdf; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu li a:hover, Daniel@0: .pure-skin-swi .pure-menu li a:focus { Daniel@0: background: #cddbdf; Daniel@0: } Daniel@0: Daniel@0: /* DISABLED STATES */ Daniel@0: .pure-skin-swi .pure-menu li.pure-menu-disabled a:hover, Daniel@0: .pure-skin-swi .pure-menu li.pure-menu-disabled a:focus { Daniel@0: background: #e9eff1; Daniel@0: color: #89a9b3; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu .pure-menu-disabled > a { Daniel@0: background-image: none; Daniel@0: border-color: transparent; Daniel@0: cursor: default; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu .pure-menu-disabled > a, Daniel@0: .pure-skin-swi .pure-menu .pure-menu-can-have-children.pure-menu-disabled > a:after { Daniel@0: color: #89a9b3; Daniel@0: } Daniel@0: Daniel@0: /* HEADINGS */ Daniel@0: .pure-skin-swi .pure-menu .pure-menu-heading { Daniel@0: color: #12191c; Daniel@0: text-transform: uppercase; Daniel@0: font-size: 90%; Daniel@0: margin-top: 0.5em; Daniel@0: border-bottom: solid 1px #d7e1e5; Daniel@0: } Daniel@0: Daniel@0: Daniel@0: /* SELECTED MENU ITEM */ Daniel@0: .pure-skin-swi .pure-menu li.pure-menu-selected a { Daniel@0: background-color: #457387; Daniel@0: color: #fcfdfd; Daniel@0: } Daniel@0: Daniel@0: /* FIXED MENU */ Daniel@0: .pure-skin-swi .pure-menu.pure-menu-open.pure-menu-fixed { Daniel@0: border: none; Daniel@0: border-bottom: 1px solid #d7e1e5; Daniel@0: } Daniel@0: /* end from PURE menu.css ***********************************/ Daniel@0: /* from PURE menu-responsive.css ****************************/ Daniel@0: /* RESPONSIVE */ Daniel@0: Daniel@0: @media (max-width: 480px) { Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-horizontal { Daniel@0: width:100%; Daniel@0: } Daniel@0: Daniel@0: .pure-skin-swi .pure-menu-children li { Daniel@0: display: block; Daniel@0: border-bottom:1px solid #d7e1e5; Daniel@0: } Daniel@0: Daniel@0: } Daniel@0: /* end from menu-responsive.css ******************/ Daniel@0: Daniel@0: