input, textarea, select { outline: none; } /** * Buttons */ .button { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; display: inline-block; font: 14px/100% Arial, Helvetica, sans-serif; padding: 7px 20px; outline: none !important; text-align: center; text-decoration: none; position: relative; -moz-box-sizing: border-box !important; line-height: 16px; } .button:hover { text-decoration: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; } .button-round { -moz-border-radius: 16px; -webkit-border-radius: 16px; -khtml-border-radius: 16px; border-radius: 16px; padding: 7px 0; width: 30px; } .button-gray { color: #555; border: 1px solid #bbb; background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#d1d1d1)); background: -moz-linear-gradient(top, #f7f7f7, #d1d1d1); -pie-background: linear-gradient(top, #f7f7f7, #d1d1d1); text-shadow: 0 1px 0 #fff; } .button-gray:hover, .button-gray:focus { border: 1px solid #aaa; background: #ececec; background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#c1c1c1)); background: -moz-linear-gradient(top, #e1e1e1, #c1c1c1); -pie-background: linear-gradient(top, #e1e1e1, #c1c1c1); } .button-gray:active, .button-gray.active { background: #ddd; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#f1f1f1)); background: -moz-linear-gradient(top, #ccc, #f1f1f1); -pie-background: linear-gradient(top, #ccc, #f1f1f1); } .button-orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); -pie-background: linear-gradient(top, #faa51a, #f47a20); text-shadow: 0 1px 1px rgba(0,0,0,0.25); } .button-orange:hover, .button-orange:focus { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); -pie-background: linear-gradient(top, #f88e11, #f06015); } .button-orange:active, .button-orange.active { background: #f47a20; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); -pie-background: linear-gradient(top, #f47a20, #faa51a); } .button-red { color: #fef4e9; border: 1px solid #A92C2C; background-color: #C44747; background: -moz-linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD5F5F), color-stop(0.9, #A92C2C)); -pie-background: linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); text-shadow: 0 1px 1px rgba(0,0,0,0.25); } .button-red:hover, .button-red:focus { background-color: #C44747; background: -moz-linear-gradient(top, #DD4141 10%, #A92121 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD4141), color-stop(0.9, #A92121)); -pie-background: linear-gradient(top, #DD4141 10%, #A92121 90%); } .button-red:active, .button-red.active { background-color: #C44747; background: -moz-linear-gradient(top, #A92C2C 10%, #DD5F5F 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #A92C2C), color-stop(0.9, #DD5F5F)); -pie-background: linear-gradient(top, #A92C2C 10%, #DD5F5F 90%); } .button-blue { color: #fff; border: 1px solid #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); -pie-background: linear-gradient(top, #00adee, #0078a5); text-shadow: 0 1px 1px rgba(0,0,0,0.25); } .button-blue:hover, .button-blue:focus { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); -pie-background: linear-gradient(top, #0095cc, #00678e); } .button-blue:active, .button-blue.active { background: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); -pie-background: linear-gradient(top, #0078a5, #00adee); } .button-green { color: #fff; border:1px solid #749217; background: #8fc857; background: -webkit-gradient(linear, left top, left bottom, from(#8fc857), to(#5c9425)); background: -moz-linear-gradient(top, #8fc857, #5c9425); -pie-background: linear-gradient(top, #8fc857, #5c9425); text-shadow: 0 1px 1px rgba(0,0,0,0.25); } .button-green:hover, .button-green:focus { border:1px solid #749217; background: #8fbb44; background: -webkit-gradient(linear, left top, left bottom, from(#8fbb44), to(#5c8825)); background: -moz-linear-gradient(top, #8fbb44, #5c8825); -pie-background: linear-gradient(top, #8fbb44, #5c8825); } .button-green:active, .button-green.active { background: #8fbb44; background: -webkit-gradient(linear, left top, left bottom, from(#5c8825), to(#8fbb44)); background: -moz-linear-gradient(top, #5c8825, #8fbb44); -pie-background: linear-gradient(top, #5c8825, #8fbb44); } /** * Pagination */ .pagination { margin: 1em 0; padding: 0; } .pagination li { display: inline-block; float: left; margin: 0 2px; } .pagination li a { font-family: 'Lucida Grande', Verdana, Arial, 'Bitstream Vera Sans', sans-serif; display: block; padding: 0 6px; height: 20px; line-height: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); cursor: pointer; outline: none !important; text-align: center; text-decoration: none; } .pagination li a.current { background: #fff; -pie-background: #fff; color: #666; } /** * Widgets */ #content > .wrapper > section { position: relative; } .widget, .panel, .accordion, #calroot { margin-bottom: 18px; box-shadow: 0 0 4px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 4px #eee; -moz-box-shadow: 0 0 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 4px #eee; -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2); -khtml-box-shadow: 0 0 4px #eee; -khtml-box-shadow: 0 0 4px rgba(0,0,0,0.2); -pie-box-shadow: 0 0 4px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; zoom: 1; } .widget header, #calhead, .accordion header { background: #e1e1e1; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdfeff), color-stop(0.5, #e1e1e1), color-stop(0.5, #d2d2d2), color-stop(1, #a1a2a4)); background: -moz-linear-gradient(top, #fdfeff 0%, #e1e1e1 50%, #d2d2d2 50%, #a1a2a4 100%); -pie-background: linear-gradient(top, #fdfeff 0%, #e1e1e1 50%, #d2d2d2 50%, #a1a2a4 100%); border: 1px solid #bbb; color: #333; font-size: 13px; text-shadow: 0 1px 0 #fff; margin: 0; padding: 0 10px; -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-left-radius: 5px; -khtml-border-top-right-radius: 5px; border-radius: 5px 5px 0 0; position: relative; } .widget-placeholder { background: #fdfdfd; border: 1px dashed #dedede; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-bottom: 18px; position: relative; z-index: 0; } .widget.collapsible header:hover span.widget-collapse, .widget.collapsible header.hover span.widget-collapse, .widget.collapsible header:hover span.widget-expand, .widget.collapsible header.hover span.widget-expand { border-left: 1px solid #aaa; -moz-box-shadow:inset 1px 0 0 #fff; -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.8); -webkit-box-shadow:inset 1px 0 0 #fff; -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.8); box-shadow:inset 1px 0 0 #fff; box-shadow:inset 1px 0 0 rgba(255,255,255,0.8); height: 30px; width: 30px; cursor: pointer; float: right; margin-right: -10px; } .widget.collapsible header:hover span.widget-collapse, .widget.collapsible header.hover span.widget-collapse { background: url(../images/arrow-up.png) no-repeat center 13px; } .widget.collapsible header:hover span.widget-expand, .widget.collapsible header.hover span.widget-expand { background: url(../images/arrow-down.png) no-repeat center 13px; } .widget.collapsed header { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .widget header h2, .accordion header h2 { font-size: 13px; line-height: 30px; margin: 0; } .widget header h1 { line-height: 40px; margin: 0; } .widget header .button { margin-top: 10px; } .widget.profile header { min-height: 80px; } .widget.profile .avatar { background: #fff url(../images/user_32.png) no-repeat center center; border: 1px solid #ccc; margin: 10px 10px 10px 0; height: 60px; width: 60px; } .widget section, #calbody { background: #fafafa; border-left: 1px solid #bbb; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-left-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-radius: 0 0 5px 5px; position: relative; } .widget section { padding: 10px; } .widget.no-shadow { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; -khtml-box-shadow: none !important; box-shadow: none !important; -pie-box-shadow: none !important; } .panel { background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#eaeaea)); background: -moz-linear-gradient(top, #f7f7f7, #eaeaea); -pie-background: linear-gradient(top, #f7f7f7, #eaeaea); text-shadow: 0 1px 0 #fff; padding: 10px; border: 1px solid #bbb; } .panel header h2 { margin-top: 0; font-size: 13px; } /** * Tabs */ /* root element for tabs */ .tabs { list-style:none; margin:0 !important; padding:0; height:30px; border-bottom:1px solid #aaa; } /* single tab */ .tabs li { float:left; text-indent:0; padding:0; margin:0 2px 0 0 !important; list-style-image:none !important; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-left-radius: 4px; -khtml-border-top-right-radius: 4px; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } /* link inside the tab. uses a background image */ .tabs a { background: #ddd; background: -moz-linear-gradient(top, #eee, #ddd); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); -pie-background: linear-gradient(top, #eee, #ddd); border-bottom: 1px solid #aaa; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); font-size:11px; display:block; height: 29px; line-height:30px; width: 111px; text-align:center; text-decoration:none; color:#000; padding:0px; margin:0px; position:relative; text-shadow: 0 1px 0 #fff; top:0px; -webkit-background-clip: padding-box; } .tabs a:active { outline:none; } /* when mouse enters the tab move the background image */ .tabs a:hover { background: #ddd; -pie-background: #ddd; } /* active tab uses a class name "current". it's highlight is also done by moving the background image. */ .tabs .current, .tabs .current:hover, .tabs li.current a { border-bottom: 1px solid #fff; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff)); background: -moz-linear-gradient(top, #e1e1e1, #fff); -pie-background: linear-gradient(top, #e1e1e1, #fff); cursor:default !important; color:#000 !important; text-shadow: 0 1px 0 #fff; } /* tab pane styling */ .panes { border:1px solid #aaa; border-top:0; } .panes section { display:none; padding:15px 10px; min-height:100px; background-color:#fff; } /** * Accordion */ /* root element for accordion. decorated with rounded borders and gradient background image */ .accordion { color: #000; border: 1px solid #bbb; background: #fff; margin-bottom: 18px; text-shadow: 0 1px 0 #fff; } /* accordion header */ .accordion header { border: none; -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; cursor:pointer; padding:0px 10px; -webkit-background-clip: padding-box; } .accordion header:first-child { -moz-border-radius: 4px 4px 0 0; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-left-radius: 4px; -khtml-border-top-right-radius: 4px; border-radius: 4px 4px 0 0; } .accordion header:nth-last-child(2) { -moz-border-radius: 0 0 4px 4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-left-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-radius: 0 0 4px 4px; } .accordion section:last-child { -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-left-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-radius: 0 0 5px 5px; } .accordion header:hover { background: #ececec; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(0.5, #ddd), color-stop(0.5, #bbb), color-stop(100, #999)); background: -moz-linear-gradient(top, #fafafa 0%, #ddd 50%, #bbb 50%, #999 100%); -pie-background: linear-gradient(top, #fafafa 0%, #ddd 50%, #bbb 50%, #999 100%); } /* currently active header */ .accordion header.current { cursor:default; background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ddd)); background: -moz-linear-gradient(top, #f7f7f7, #ddd); -pie-background: linear-gradient(top, #f7f7f7, #ddd); -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; } .accordion header.current:first-child { -moz-border-radius: 4px 4px 0 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -khtml-border-bottom-left-radius: 0; -khtml-border-bottom-right-radius: 0; border-radius: 4px 4px 0 0; } /* accordion pane */ .accordion section { background: #f9f9f9; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#efefef)); background: -moz-linear-gradient(top, #f9f9f9, #efefef); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f9f9f9', EndColorStr='#efefef'); display:none; padding:10px; color:#000; } /* a title inside pane */ .accordion section h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#999; } /** * Calendar */ /* calendar root element */ #calroot { /* place on top of other elements. set a higher value if nessessary */ z-index:10000; margin-top:-1px; width:205px; background-color:#fff; font-size:11px; } /* head. contains title, prev/next month controls and possible month/year selectors */ #calhead { padding:2px 0; height:22px; } #caltitle { float:left; text-align:center; width:163px; line-height:20px; } #calnext, #calprev { display:block; width:20px; height:20px; background:transparent url(../images/prev.gif) no-repeat scroll center center; float:left; cursor:pointer; } #calnext { background-image:url(../images/next.gif); float:right; } #calprev.caldisabled, #calnext.caldisabled { visibility:hidden; } /* year/month selector */ #caltitle select { font-size:10px; } #calbody { padding: 3px; } /* names of the days */ #caldays { height:14px; border-bottom:1px solid #ddd; } #caldays span { display:block; float:left; width:28px; text-align:center; } /* container for weeks */ #calweeks { background-color:#fff; margin-top:4px; } /* single week */ .calweek { clear:left; height:22px; } /* single day */ .calweek a { display:block; float:left; width:27px; height:20px; text-decoration:none; font-size:11px; margin-left:1px; text-align:center; line-height:20px; color:#666; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; } /* different states */ .calweek a:hover, .calfocus { background-color:#ddd; } /* sunday */ a.calsun { color:red; } /* offmonth day */ a.caloff { color:#ccc; } a.caloff:hover { background-color:rgb(245, 245, 250); } /* unselecteble day */ a.caldisabled { background-color:#efefef !important; color:#ccc !important; cursor:default; } /* current day */ #calcurrent { background-color:#498CE2; color:#fff; } /* today */ #caltoday { background-color:#333; color:#fff; } /* Progress bars ---------------------------------------------------------------------*/ .progress { border: 1px solid #ccc; position: relative; display: block; height: 22px; padding: 0; min-width: 200px; margin:4px 0; background: #DEDEDE; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9)); background: -moz-linear-gradient(top, #ccc, #e9e9e9); -pie-background: linear-gradient(top, #ccc, #e9e9e9); -moz-box-shadow:0 1px 0 #fff; -webkit-box-shadow:0 1px 0 #fff; box-shadow:0 1px 0 #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; position: relative; } .progress span { display: block; height: 20px; margin: 0; text-align:center; padding: 0; position: relative; width:0; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } .progress span b { color:#fff; line-height:20px; padding-left:2px; text-shadow:0 1px 1px rgba(0, 0, 0, 0.5); } .progress.progress-blue span { border: 1px solid #0078a5; background-color: #5C9ADE; background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5)); -pie-background: linear-gradient(top, #00adee 10%, #0078a5 90%); } .progress.progress-green span { border: 1px solid #5c9425; background-color: #77AF3F; background: -moz-linear-gradient(top, #8fc857 10%, #5c9425 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #8fc857), color-stop(0.9, #5c9425)); -pie-background: linear-gradient(top, #8fc857 10%, #5c9425 90%); } .progress-orange span { border: 1px solid #f47a20; background-color: #faa51a; background: -moz-linear-gradient(top, #faa51a 10%, #f47a20 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #faa51a), color-stop(0.9, #f47a20)); -pie-background: linear-gradient(top, #faa51a 10%, #f47a20 90%); } .progress-red span { border: 1px solid #A92C2C; background-color: #C44747; background: -moz-linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD5F5F), color-stop(0.9, #A92C2C)); -pie-background: linear-gradient(top, #DD5F5F 10%, #A92C2C 90%); } /** * Validation */ .form-error { -moz-box-shadow: #DDD 0px 0px 6px; -webkit-box-shadow: #DDD 0px 0px 6px; box-shadow: #DDD 0px 0px 6px; background-color: #000; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; color: #fff; display: none; font-size: 11px; height: 15px; padding: 4px 10px; z-index: 9999; } .form-error p { margin: 0px; line-height: 15px; } .form-error em { display:block; width:0; height:0; border:5px solid; border-color:transparent #000 transparent transparent; /* positioning */ position:absolute; top: 6px; left:-10px; } .form label { display: block; font-size: 11px; margin: 10px 0; width: 200px; float: left; clear: left; } .form input, .form textarea, .form select { float: left; clear: right; } input.half,select.half,textarea.half { width:50%; } input.full,select.full,textarea.full { width:95%; } input { position: relative; } select, textarea, input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=number], input[type=time], input[type=date], input.date { -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; padding: 4px 6px; -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } select { padding: 3px; position: relative; } textarea { margin-bottom: 10px; position: relative; } .invalid { border: 1px solid red !important; } /** * Speech Bubble */ .triangle-isosceles, .tooltip { position:relative; padding:10px; margin:1em 0 1em; color:#000; background:#ddd; /* default background for browsers without gradient support */ /* css3 */ -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; min-height: 30px; } .triangle-isosceles.left { margin-left:20px; } /* creates triangle */ .triangle-isosceles:after, .tooltip:after { content:""; display:block; /* reduce the damage in FF3.0 */ position:absolute; bottom:-15px; /* value = - border-top-width - border-bottom-width */ left:50px; /* controls horizontal position */ width:0; height:0; border-width:15px 15px 0; /* vary these values to change the angle of the vertex */ border-style:solid; border-color:#ddd transparent; } .triangle-isosceles.left:after { top:10px; /* controls vertical position */ left:-15px; /* value = - border-left-width - border-right-width */ bottom:auto; border-width:10px 15px 10px 0; border-color:transparent #ddd; } .comment .triangle-isosceles.left { margin-top: 10px !important; width: 590px; } .tooltip { margin-top: 0px; height:70px; width:160px; display: none; background: #f3961c; background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c)); background: -moz-linear-gradient(top, #f9d835, #f3961c); -pie-background: linear-gradient(top, #f9d835, #f3961c); } .tooltip:after { border-color:#f3961c transparent; left: 75px; zoom: 1; }