@charset "utf-8"; /************************************************** --- Naming Convention & writing style --- - IDs & class names = all_lower_case_with_underscores - ID and class names should relate to what they contain - not element type, position or appearance - Cascade ID related class names by tabbing. eg: #element_id{} #element_id .class_name{} - Use single line declarations for all but the very long - Preferred order: position ; dimensions ; float ; margin ; padding ; everything else --- File structure --- - Import - Global styles - Global classes - Global IDs (IDs common to all/most pages) - #id .classes - Local IDs - #id .classes --- Colours --- #F3F3F3 #8AAC7A #D7E495 #5A8E3C Header green #23331A Dark green #C5D5BD List colours here for easy find & replace ***************************************************/ /* *** IMPORT *** */ /* *** GLOBAL STYLES *** */ #divPopup{padding:20px;color:#333;} #divPopup h1{font-family:avenir, arial, helvetica, "sans serif";font-weight:100;text-transform:uppercase; letter-spacing: -1px; font-size:2em;background-color:#FFF;padding: .2em .4em .4em .4em;color:#900;margin:0em -.4em;border-bottom:1px dotted #EDD;} #divPopup h2{font-size:1.8em;font-weight:bold;margin:0px 0px 10px;padding:.4em;background-color:#DDD;} #divPopup h3{font-size:1.5em;padding:.4em 0px;border-left:3px solid #CAA; color:#900;text-indent:7px;margin-top:10px;} #divPopup p,#divPopup ul,#divPopup ol,#divPopup td{margin:5px 0px;font-size:1.2em;} #divPopup td td, #divPopup td p, #divPopup td ul, #divPopup td ol, #divPopup p ul, #divPopup p ol, #divPopup ul ul, #divPopup ol ol{font-size:inherit;} #divPopup ul, #divPopup ol{border-top:1px solid #eee;padding:0px;list-style:none;} #divPopup li{padding:8px 0px 8px 36px;background-color: #f9f9f9;border-bottom:1px solid #eee;} div.mount a{color:#900; background: url(../images/dashboard/dsh-link.gif) right 55% no-repeat;padding-right:12px;} #divPopup a:hover, div.mount a:hover{color:#C00;background-image: url(../images/dashboard/dsh-link-over.gif) right 55% no-repeat;} #divPopup table.standard{border:1px solid #ccc;margin:10px 0px;} #divPopup table.standard th{background-color:#eee;font-weight:bold;padding:2px;text-align:left;} #divPopup table.standard td{background-color:#f9f9f9;border-top:1px solid #ddd;padding:2px;} /* *** GLOBAL CLASSES *** */ #divPopup .tabs{margin:0px -.7em 10px;overflow:auto;position:relative;border-bottom:1px solid #600;background-color:#FFF;zoom:1;padding:2px 0px 0px 2px;} #divPopup .tabs a{display:block;float:left;padding:.3em .5em;border-bottom:0px;text-decoration:none;font-size:.9em;margin-right:2px;} /* Rollover styles */ #divPopup .tabs a{border-color:#A66;color:#600;background:#CA9;} #divPopup .tabs a:hover{border-color:#600;color:#DDD;background:#900;} #divPopup .tabs a.active{background:#711;color:#FFF;cursor:text;} /* BUTTON CLASSES */ /* Classes are chained, so a class of btn will give you a default small button without a width. Larger classes are fixed width Each needs a nested to display an icon Classes for width are w = wide and t = thin Classes for height are m = medium and l = large Classes for different icons are: CLASS ICON SIZES (none) green TL logo s,m,l cancel red cross s,m,l add green "+" m order up+down arrows s revert u-turn arrow s delete bin s apply power button s edit pencil s move 4 arrows s */ /* DASHBOARD STYLES */ #divPopupContainer { border: 1px solid #397D4A; } #divPopupTitle { background-color: #397D4A; font-size: 12pt; color: white; } /* Default classes and size variations */ #mount .btn, #divPopup .btn{background:transparent url(../images/dashboard/d-btn-s.png) no-repeat left 66%;color:#633;font-size:0.8em;padding:6px 5px 6px 23px;text-decoration:none;position:relative;} #divPopup .btn:hover, #mount .btn:hover{color:#900;text-decoration:none;} #divPopup .btn.m, #mount .btn.m{background:transparent url(../images/dashboard/d-btn-m.png) no-repeat left top;height:15px;width:105px;padding:8px 5px 12px 37px;color:#433;font-weight:bold;margin:0px; display:-moz-inline-stack; /* for firefox */ display:inline-block; /* for IE & webkit */ } #divPopup .btn.m.w, #mount .btn.m.w{width:125px;background:transparent url(../images/dashboard/d-btn-m-w.png) no-repeat left top;} #divPopup .btn.m.t, #mount .btn.m.t{width:48px;background:transparent url(../images/dashboard/d-btn-m-t.png) no-repeat left top;} #divPopup .btn.l, #mount .btn.l{background:transparent url(../images/dashboard/d-btn-l.png) no-repeat left top;height:20px;width:100px;padding:15px;color:#433;font-weight:bold;margin:0px 10px 0px 0px; display:-moz-inline-stack; /* for firefox */ display:inline-block; /* for IE & webkit */ } #divPopup .btn.l.t, #mount .btn.l.t{width:64px;background:transparent url(../images/dashboard/d-btn-l-t.png) no-repeat left top;} /* Icons */ #mount .btn i, #divPopup .btn i{background:url(../images/dashboard/btn-icon-s-default.png) no-repeat left top;display:block;height:20px;position:absolute;left:2px;top:4px;width:20px;} #mount .btn.order i, #divPopup .btn.order i{background-image:url(../images/dashboard/btn-icon-s-order.png);} #mount .btn.revert i, #divPopup .btn.revert i{background-image:url(../images/dashboard/btn-icon-s-revert.png);} #mount .btn.delete i, #divPopup .btn.delete i{background-image:url(../images/dashboard/btn-icon-s-delete.png);} #mount .btn.apply i, #divPopup .btn.apply i{background-image:url(../images/dashboard/btn-icon-s-apply.png);} #mount .btn.move i, #divPopup .btn.move i{background-image:url(../images/dashboard/btn-icon-s-move.png);} #mount .btn.edit i, #divPopup .btn.edit i{background-image:url(../images/dashboard/btn-icon-s-edit.png);} #mount .btn.cancel i, #divPopup .btn.cancel i{background-image:url(../images/dashboard/btn-icon-s-cancel.png);} #divPopup .btn.m i, #mount .btn.m i{background:transparent url(../images/dashboard/btn-icon-m-default.png) no-repeat left top;display:block;height:49px;position:absolute;left:5px;top:1px;width:45px;} #divPopup .btn.m.add i, #mount .btn.m.add i{background-image:url(../images/dashboard/btn-icon-m-add.png);} #divPopup .btn.m.apply i, #mount .btn.m.apply i{background-image:url(../images/dashboard/btn-icon-m-apply.png);} #divPopup .btn.m.cancel i, #mount .btn.m.cancel i{background-image:url(../images/dashboard/btn-icon-m-cancel.png);} #divPopup .btn.l i, #mount .btn.l i{background:transparent url(../images/dashboard/btn-icon-l-default.png) no-repeat right top;display:block;height:49px;position:absolute;left:87px;top:2px;width:45px;} #divPopup .btn.l.cancel i, #mount .btn.l.cancel i{background-image:url(../images/dashboard/btn-icon-l-cancel.png)} /* *** GLOBAL IDs *** */ #OrderSummaryForm {overflow: auto;} /* *** LOCAL IDs *** */