/******************************************************************************/ /* MASTER CSS STYLESHEET - Macropet Websites /* /* AUTHOR: Jared Williams (BlakeMedia) /* VERSION: mark 1.01 /* CREATED: 12 March 2014 /* MODIFIED: 12 March 2014 /* SCHEME: COLOUR - DARKEST to LIGHTEST /* /* Yellow - #FFDA00 /* Blue - #2DAAE1 /* Orange - #F9B233 /* Green - #96C11F /* Grey - #9D9D9C /* Red - #EF3A46 /* N. Blue - #034764 /* /* (c) Copyright 2002-2013 BlakeMedia & MediaIQ Group /******************************************************************************/ /******************************************************************************/ /* HTML MARKUP */ /******************************************************************************/ /********************************* RESET ALL **********************************/ 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, FONT, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, DD, DL, DT, LI, OL, UL, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD {font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;padding:0;margin:0;border:0} /******************************* GLOBAL MARKUP ********************************/ HTML, BODY {height:100%} BODY {font-family:'Noto Sans','Muli',Arial,sans-serif;font-size:14px;letter-spacing:0.075em;color:#606060;background:#FFF} BODY.clip {overflow:hidden} /*** HEADINGS ***/ H1, H2, H3, H4, H5, H6 {margin:0;padding:0;font-family:'Muli','Noto',Arial,sans-serif;;font-weight:normal;clear:both} H1 {height:40px;font-size:24px;text-transform:uppercase} H2 {font-size:22px;text-transform:uppercase} H3 {height:35px;font-size:20px} H4 {font-size:18px} H5 {font-size:16px} H6 {font-size:14px} H1 A:hover, H2 A:hover {text-decoration:none} H1 EM, H2 EM, H3 EM {font-weight:bold} /***Text***/ P {margin:8px 0;line-height:1.6} P:first-child {margin-top:0} P:last-child {margin-bottom:0} UL, OL {list-style-position:outside;margin:0 0 0 30px} DL {margin-bottom:10px} DT, DD {margin-bottom:5px;float:left} DT {width:200px;clear:left;font-weight:bold;color:#2DAAE1} DD {} STRONG {font-weight:bold;font-style:normal} EM {font-weight:bold;font-style:normal;color:#F91} CITE {font-style:italic;color:#999;line-height:12px} SAMP {font:italic normal 1em/1em Georgia,'Times New Roman',Times,serif;color:#777} HR {margin:5px;border:1px solid;border-color:#D9D9DF #D9D9DF #F9F9FF #F9F9FF} /***Tables***/ TH {font-weight:normal;text-align:left} /***Hyperlinks***/ A {font-weight:inherit;color:#28C;text-decoration:none} A:hover {font-weight:inherit;color:#26B;text-decoration:underline} H1 A, H2 A, H3 A, H4 A, H5 A, H6 A, H1 A:hover, H2 A:hover, H3 A:hover, H4 A:hover, H5 A:hover, H6 A:hover {color:inherit} /******************************************************************************/ /* FORMS */ /******************************************************************************/ FORM {} FIELDSET {} LEGEND {display:none} /* Labels */ LABEL {width:100px;height:100%;margin:0;padding:0;float:left;display:inline-block;vertical-align:top;line-height:2} /* Field style */ INPUT:not([type="checkbox"]):not([type="radio"]), SELECT, TEXTAREA, BUTTON, A.button {margin:0;padding:0;border:1px solid #FFF;display:inline-block;-moz-appearance:none;-webkit-appearance:none;appearance:none;-moz-box-sizing:content-box;box-sizing:content-box;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;text-decoration:none;line-height:1.3;font-family:inherit;font-size:12px;background-image:none;-webkit-transition:border-color, color, background-color 0.3s ease-in-out;-moz-transition:border-color, color, background-color 0.3s ease-in-out;-o-transition:border-color, color, background-color 0.3s ease-in-out;-ms-transition:border-color, color, background-color 0.3s ease-in-out;transition:border-color, color, background-color 0.3s ease-in-out} BUTTON, A.button {border-color:#D9D9D9;color:hsl(0, 0%, 35%);background-color:#D9D9D9;/* text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.1667) */} A.button {line-height:1.7} INPUT:not([type="checkbox"]):not([type="radio"]), TEXTAREA, SELECT {border-color:#D9D9D9;color:#494949} TEXTAREA {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} /* WebKit arrow */ @media screen and (-webkit-min-device-pixel-ratio:0) { SELECT {background:#FFF url(/shared/clients/macropet/_images/master/select-bg-sprite.png) no-repeat top right;-moz-background-size:30px 70px;-webkit-background-size:30px 70px;background-size:30px 70px} } /* Focus */ INPUT:focus, SELECT:focus, TEXTAREA:focus, BUTTON:focus, A.button:focus {outline:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0px 0px 5px #0074ff} TEXTAREA:focus {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} /* Hover */ BUTTON:hover, A.button:hover {cursor:pointer;border-color:#C2C2C2;text-decoration:none;background-color:#C2C2C2} INPUT:not([type="checkbox"]):not([type="radio"]):hover, TEXTAREA:hover {border-color:#C2C2C2} /* Widths */ INPUT:not([type="checkbox"]):not([type="radio"]), SELECT, TEXTAREA {width:190px} /* Heights */ LABEL, INPUT:not([type="checkbox"]):not([type="radio"]), SELECT, BUTTON, A.button {height:20px} TEXTAREA {height:80px} /* Padding */ INPUT:not([type="checkbox"]):not([type="radio"]), SELECT, BUTTON, A.button {padding:5px 10px} BUTTON, A.button {padding:5px 15px} TEXTAREA {padding:10px} /* Placeholders */ ::-webkit-input-placeholder {font-weight:300;color:#C2C2C2} :-moz-placeholder {font-weight:300;color:#C2C2C2} /* Firefox -18 */ ::-moz-placeholder {font-weight:300;color:#C2C2C2} /* Firefox 19+ */ :-ms-input-placeholder {font-weight:300;color:#C2C2C2} /* Datetime fields */ ::-webkit-datetime-edit {} ::-webkit-datetime-edit-fields-wrapper {} ::-webkit-datetime-edit-text {} ::-webkit-datetime-edit-month-field {} ::-webkit-datetime-edit-day-field {} ::-webkit-datetime-edit-year-field {} ::-webkit-inner-spin-button {} ::-webkit-calendar-picker-indicator {} /******************************************************************************/ /* FORMS - SPECIFIC */ /******************************************************************************/ /* Off */ BUTTON,.button {} BUTTON.btnFailed,BUTTON.btnCancel,BUTTON.btnError, .button.btnFailed,.button.btnCancel,.button.btnError {border-color:#fac565;background-color:#fac565;color:white} BUTTON.btnDanger,BUTTON.btnWarning,BUTTON.btnAlert, .button.btnDanger,.button.btnWarning,.button.btnAlert {border-color:#fde35d;background-color:#fde35d;color:white} BUTTON.btnUrgent, .button.btnUrgent {border-color:#fde35d;background-color:#fde35d;color:white} BUTTON.btnOkay,BUTTON.btnNotice, .button.btnOkay,.button.btnNotice {border-color:#5abce7;background-color:#5abce7;color:white} BUTTON.btnDisabled,BUTTON.btnInactive, .button.btnDisabled,.button.btnInactive {} BUTTON.btnSuccess,BUTTON.btnComplete, .button.btnSuccess,.button.btnComplete {border-color:#96C11F;background-color:#96C11F;color:white} /* Hover */ BUTTON:hover,.button:hover {} BUTTON.btnFailed:hover,BUTTON.btnCancel:hover,BUTTON.btnError:hover, .button.btnFailed:hover,.button.btnCancel:hover,.button.btnError:hover {border-color:#F9B233;background-color:#F9B233} BUTTON.btnDanger:hover,BUTTON.btnWarning:hover,BUTTON.btnAlert:hover, .button.btnDanger:hover,.button.btnWarning:hover,.button.btnAlert:hover {border-color:#fdda2a;background-color:#fdda2a} BUTTON.btnUrgent:hover, .button.btnUrgent:hover {border-color:#fdda2a;background-color:#fdda2a} BUTTON.btnOkay:hover,BUTTON.btnNotice:hover, .button.btnOkay:hover,.button.btnNotice:hover {border-color:#2DAAE1;background-color:#2DAAE1} BUTTON.btnDisabled:hover,BUTTON.btnInactive:hover, .button.btnDisabled:hover,.button.btnInactive:hover {} BUTTON.btnSuccess:hover,BUTTON.btnComplete:hover, .button.btnSuccess:hover,.button.btnComplete:hover {border-color:#8eb71d;background-color:#8eb71d} /* Button Groups */ .button-group {} .button-group BUTTON, .button-group INPUT {float:left;margin-left:4px} .button-group BUTTON:first-child, .button-group INPUT:first-child {margin-left:0;padding-left:20px;-moz-border-radius:5px 0px 0px 5px;-webkit-border-radius:5px 0px 0px 5px;border-radius:5px 0px 0px 5px} .button-group BUTTON:last-child, .button-group INPUT:last-child {padding-right:20px;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0} /*** FORMS ***/ /* Invalid */ INPUT.invalid, INPUT:not([type="checkbox"]):not([type="radio"]).invalid, BUTTON.invalid, SELECT.invalid, TEXTAREA.invalid, INPUT.invalid:hover, BUTTON.invalid:hover, SELECT.invalid:hover, TEXTAREA.invalid:hover {border-color:#dd9090;background-color:#fff7f7} INPUT.disabled, INPUT:not([type="checkbox"]):not([type="radio"]):disabled, BUTTON.disabled, .button.disabled, SELECT.disabled, TEXTAREA.disabled, INPUT.disabled:hover, BUTTON.disabled:hover, .button.disabled:hover, SELECT.disabled:hover, TEXTAREA.disabled:hover, INPUT:disabled, INPUT:disabled:hover, BUTTON:disabled, BUTTON:disabled:hover, SELECT:disabled, SELECT:disabled:hover {color:#C2C2C2} BUTTON.disabled, BUTTON.disabled:hover, BUTTON:disabled {border-color:#eaeaea;background-color:#eaeaea} /* Disabled */ @media screen and (-webkit-min-device-pixel-ratio:0) { SELECT.disabled, SELECT.disabled:hover, SELECT:disabled, SELECT:disabled:hover {background-position:right -35px} } /*** DIMENSIONS ***/ /** WIDTHS **/ INPUT.tiny, TEXTAREA.tiny, SELECT.tiny {width:40px} INPUT.small, TEXTAREA.small, SELECT.small {width:100px} INPUT.medium, TEXTAREA.medium, SELECT.medium {width:200px} INPUT.big, TEXTAREA.big, SELECT.big {width:300px} INPUT.huge, TEXTAREA.huge, SELECT.huge {width:400px} INPUT.flow-w, TEXTAREA.flow-w, SELECT.flow-w, LABEL.flow-w {width:auto} INPUT.fill-w, TEXTAREA.fill-w, SELECT.fill-w, LABEL.fill-w {width:100%} INPUT.tall, SELECT.tall, BUTTON.tall, LABEL.tall {height:40px;font-size:16px} /** HEIGHTS **/ TEXTAREA.short {height:20px} TEXTAREA.mid {height:41px} TEXTAREA.tall {height:70px} TEXTAREA.flow-h {height:auto} /** BOTH **/ INPUT.flow, TEXTAREA.flow, SELECT.flow {width:auto;height:auto} TEXTAREA.notes-field {width:450px;height:250px} /******************************************************************************/ /* MISC */ /******************************************************************************/ .results-error {width:100%;padding:10px;text-transform:uppercase;text-align:center;color:#CCC} .clearboth {clear:both} .floatright {float:right} .center {text-align:center} /******************************************************************************/ /* COMPONENTS */ /******************************************************************************/ /* .notify {width:200px;height:90px;position:fixed;top:10px;margin:10px 10px 0;border:1px solid #C2C2C2;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,0.3);background:#FFF;z-index:1000} .notify.before {right:-200px;opacity:0} .notify.active {right:10px;opacity:1} .notify.after {right:200px;opacity:0} .notify .content {padding:10px} .notify .content .title {font-size:13px;font-weight:bold} .notify .content .message {font-size:11px} */ /*** MODAL BOXES ***/ .cover, .modal-cover {width:100%;height:100%;position:fixed;top:0;left:0;background:#000;-pie-background:rgba(0,0,0,0.8);background:rgba(0,0,0,0.8);z-index:999} /** Modals **/ /* .modal {width:400px;position:fixed;padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:90%;overflow:hidden;background:#FFF;z-index:1000} .modal .modal-content {padding:10px;border-radius:3px;overflow:hidden} .modal .modal-content .row {width:auto;clear:both;margin-top:15px} .modal .modal-ctrl {padding:0 10px 10px 0;text-align:right} .modal .modal-close:after {width:20px;height:20px;padding:5px;position:absolute;top:0;right:0;content:'\00D7';opacity:0.8;text-align:center;line-height:1;font-size:20px} .modal .modal-close:hover {cursor:pointer} .modal .modal-close:hover:after {opacity:1} */ .modal {width:400px;position:fixed;z-index:1000} .modal .modal-content {padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden;font-size:90%;background:#FFF} .modal .modal-content .row {width:auto;clear:both;margin-top:15px} .modal .modal-ctrl {padding:10px 0;text-align:right} .modal .modal-close:after {width:20px;height:20px;padding:5px;position:absolute;top:0;right:0;content:'\00D7';opacity:0.8;text-align:center;line-height:1;font-size:20px} .modal .modal-close:hover {cursor:pointer} .modal .modal-close:hover:after {opacity:1} /*** COLUMNS ***/ .c1 {width:1%} .c2 {width:2%} .c3 {width:3%} .c4 {width:4%} .c5 {width:5%} .c6 {width:6%} .c7 {width:7%} .c8 {width:8%} .c9 {width:9%} .c10 {width:10%} .c11 {width:11%} .c12 {width:12%} .c13 {width:13%} .c14 {width:14%} .c15 {width:15%} .c16 {width:16%} .c17 {width:17%} .c18 {width:18%} .c19 {width:19%} .c20 {width:20%} .c21 {width:21%} .c22 {width:22%} .c23 {width:23%} .c24 {width:24%} .c25 {width:25%} .c26 {width:26%} .c27 {width:27%} .c28 {width:28%} .c29 {width:29%} .c30 {width:30%} .c31 {width:31%} .c32 {width:32%} .c33 {width:33%} .c333 {width:33.3%} .c34 {width:34%} .c35 {width:35%} .c36 {width:36%} .c37 {width:37%} .c38 {width:38%} .c39 {width:39%} .c40 {width:40%} .c42 {width:42%} .c43 {width:43%} .c45 {width:45%} .c48 {width:48%} .c50 {width:50%} .c51 {width:51%} .c52 {width:52%} .c55 {width:55%} .c60 {width:60%} .c65 {width:65%} .c68 {width:68%} .c70 {width:70%} .c72 {width:72%} .c73 {width:73%} .c75 {width:75%} .c80 {width:80%} .c85 {width:85%} .c90 {width:90%} .c96 {width:96%} .c100 {width:100%} /******************************************************************************/ /* REVISION HISTORY */ /******************************************************************************* 2013 Oct 15 (Jared Williams) - master.css 1.0 - Started revision history - Split from Macropet Public Website - Fixed form styling not applying to all inputs - Added new form element width/height classes - Modified modal box styling 2013 Oct 24 (Jared Williams) - master.css 1.0 - Added .modal-cover - Remove margins for first/last paragraphs 2013 Oct 31 (Jared Williams) - master.css 1.0 - Added placeholder & datepicker styling - Added background fallback to .modal-cover - Added generic button styles 2014 Mar 12 (Jared Williams) - master.css 1.01 - Added generic DL/DD styling - Forced heading anchors to inherit colour values /******************************* END STYLESHEET *******************************/