jb-data.de/template/css/forms.css
2025-08-11 22:23:30 +02:00

900 lines
24 KiB
CSS

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;
}