holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Addressbook edit Dialog - fix css + less + images

Browse Source
This commit is contained in:
Stefan Reinhardt 2014-03-11 16:38:24 +00:00
parent 25f45d4d25
commit 1aaf19f997
6 changed files with 479 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
pixelegg/css/pixelegg.css
View File

@ -90,6 +90,28 @@
color: #1e1e1e; color: #1e1e1e;
} }
/** /**
* img Icons
*/
a.et2_url {
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
cursor: pointer;
margin: -4px;
padding: 2px;
padding-left: 16px;
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
}
a.et2_url.phone {
background-image: url(../images/phone.png);
}
a.et2_url.url {
background-image: url(../images/url.png);
}
/**
* Button widget - text only, and icon * Button widget - text only, and icon
*/ */
.et2_button { .et2_button {
@ -320,13 +342,11 @@
/** /**
* Tabs widget * Tabs widget
*/ */
.et2_tabflag { /*.et2_tabflag {
margin: 1em 3px -1px 0; margin: 1em 3px -1px 0;
padding: 4px; padding: 4px;
background-color: #bfbfbf; .background_color_25_gray;
-webkit-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5); .inner_shadow(1px, 0px, 0px, 0.5);
-moz-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
@ -334,47 +354,49 @@
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
min-width: 73px; min-width: 73px;
&:hover {
.color_5_gray;
.background_color_25_gray;
} }
.et2_tabflag:hover { &:active{
color: #f2f2f2; .background_color_0_gray;
background-color: #bfbfbf; .color_0_gray;
} }
.et2_tabflag:active { }
background-color: #ffffff;
color: #ffffff;
} .et2_tabflag.active {
.et2_tabflag.active {
border-spacing: 0px; border-spacing: 0px;
background-color: white; background-color: white;
color: #000000; .color_100_gray;
border-width: 1px 1px 0px 1px; border-width: 1px 1px 0px 1px;
border-style: solid; border-style: solid;
border-color: #505050; border-color: @gray_70;
} &:hover {
.et2_tabflag.active:hover { .color_100_gray;
color: #000000; // border: 1px solid gray;
background-color: white; background-color: white;
} }
.et2_tabs { }
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/ .et2_tabs {
border-color: #505050; border-width: 0px 1px 1px 1px;
/*padding: 5px;*/ border-style: solid;
/*overflow-y: auto;*/ border-color: @gray_70;
background-color: #ffffff; padding: 5px;
-webkit-border-radius: 3px; overflow-y: auto;
-moz-border-radius: 3px; background-color: @gray_0;
border-radius: 3px; .border_radius_button_normal;
} }*/
.et2_tabheader { /*.et2_tabheader {
padding-left: 0em; padding-left: 0em;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
margin: 0 2px; margin: 0 2px;
background-image: none; background-image: none;
} :first-child {
.et2_tabheader :first-child {
margin-left: 1px; margin-left: 1px;
} }
}*/
/** /**
* Validation * Validation
*/ */
@ -2337,10 +2359,10 @@ input,
button { button {
color: #000000; color: #000000;
/*font-size:99%;*/ /*font-size:99%;*/
padding: 1px; padding: 2px 0px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #cdcdcd; border-color: #e6e6e6;
} }
select { select {
/*font-size:100%;*/ /*font-size:100%;*/
@ -5173,6 +5195,8 @@ button.image_button {
/*@import (reference) "def_content_elements.less";*/ /*@import (reference) "def_content_elements.less";*/
body { body {
background-color: #ffffff; background-color: #ffffff;
background-image: url(../images/bgDialog.png);
background-repeat: repeat-x;
} }
div#popupMainDiv { div#popupMainDiv {
padding: 8px; padding: 8px;
@ -5230,7 +5254,16 @@ table.dialog-main-view {
} }
/*########################################### /*###########################################
# # # #
# dialogHeader # # dialogHeader app-img #
#############################################
# #
# dialogHeader2 #
#############################################
# #
# dialogHeader3 #
#############################################
# #
# dialogHeader4 #
############################################# #############################################
# # # #
# # # #
@ -5244,31 +5277,29 @@ table.dialog-main-view {
# dialogOperators # # dialogOperators #
############################################# #############################################
# # # #
# buttons # # button | button | button delete #
# #
# #
##############################################*/ ##############################################*/
tr.dialogHeader td,
tr.dialogHeader2 td,
tr.dialogHeader3 td,
tr.dialogHeader4 td,
tr.dialogOperators td {
padding: 5px 6px 5px 0;
vertical-align: middle;
}
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader { .dialogHeader {
/*background-color: @egw_color_2_d;*/ /*.gradient_thead;*/
/*.background-color-5-gray;*/
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 240, 240, 0)), color-stop(100%, rgba(191, 191, 191, 0.65)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf', GradientType=0);
/* IE6-9 */
color: #000000; color: #000000;
height: 40px; height: 40px;
/*img {.dimension_height_s;}*/ }
.dialogHeader img[src*="navbar"] {
padding: 0 0 0 15px;
}
.dialogHeader input[type="radio"],
.dialogHeader input.et2_radiobox {
-webkit-appearance: none;
border: none;
} }
.dialogHeader table.et2_grid { .dialogHeader table.et2_grid {
border-top: none; border-top: none;
@ -5292,10 +5323,11 @@ table.dialog-main-view {
.dialogHeader .et2_label { .dialogHeader .et2_label {
color: #000000; color: #000000;
vertical-align: middle; vertical-align: middle;
padding: 0px 0px 0px 9px !important; padding: 0px 0px 0px 0px !important;
/*margin-right: 57px;*/ /*margin-right: 57px;*/
margin: 0px important; margin: 0px important;
font-size: 1em; font-size: 1em;
text-align: right;
} }
.dialogHeader td.space span img { .dialogHeader td.space span img {
background: #ffffff; background: #ffffff;
@ -5312,12 +5344,11 @@ table.dialog-main-view {
filter: gray; filter: gray;
/* IE 6-9 */ /* IE 6-9 */
} }
/********** Header Row2 - 4 ********************/
tr.dialogHeader2, tr.dialogHeader2,
tr.dialogHeader3, tr.dialogHeader3,
tr.dialogHeader4 { tr.dialogHeader4 {
background-color: #ffffff !important; background-color: #f2f2f2 !important;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
vertical-align: middle; vertical-align: middle;
} }
tr.dialogHeader2 .et2_label, tr.dialogHeader2 .et2_label,
@ -5325,54 +5356,114 @@ tr.dialogHeader3 .et2_label,
tr.dialogHeader4 .et2_label { tr.dialogHeader4 .et2_label {
color: #1a1a1a; color: #1a1a1a;
vertical-align: middle; vertical-align: middle;
padding: 0px 0px 0px 9px !important; padding: 0px 0px 0px 0px !important;
/*margin-right: 55px;*/ /*margin-right: 55px;*/
margin: 0px; margin: 0px;
font-size: 1em; font-size: 1em;
width: 50px !important; width: 50px !important;
} }
/************* Tabs *********************************/ /************* Tabs *********************************/
.dialogTabs { /**
/*.background-color-5-gray;*/ * Tabs widget
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%); */
/* FF3.6+ */ .et2_tabheader {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 240, 240, 0)), color-stop(100%, rgba(191, 191, 191, 0.65))); padding-left: 0em;
/* Chrome,Safari4+ */ border-bottom: 1px solid #bfbfbf;
background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%); margin: 0;
/* Chrome10+,Safari5.1+ */ background-image: none;
background: -o-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%); background-color: #ffffff;
/* Opera 11.10+ */ }
background: -ms-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%); .et2_tabheader :first-child {
/* IE10+ */ margin-left: 0px;
background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%); }
/* W3C */ .et2_tabflag {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf', GradientType=0); margin: 1em 3px -1px 0;
/* IE6-9 */ padding: 4px;
background-color: #b4b4b4;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 3px;
/*.background-clip(padding-box);*/
}
.et2_tabflag:hover {
color: #808080;
background-color: #bfbfbf;
}
.et2_tabflag:active {
background-color: #ffffff;
color: #ffffff;
}
.et2_tabflag.active {
border-spacing: 0px;
background-color: white;
color: #000000; color: #000000;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #505050;
}
.et2_tabflag.active:hover {
color: #000000;
background-color: white;
}
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-color: #b4b4b4;
/*padding: 5px;*/
/*overflow-y: auto;*/
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 11px;
} }
/************* Main **********************************/ /************* Main **********************************/
.dialogMainTimeframe div { .dialogMainTimeframe div {
min-height: 100px; min-height: 100px;
} }
/********** Operators *******************************/ /********** Operators *******************************/
/*#############################################
# dialogOperators #
#############################################*/
.dialogOperators { .dialogOperators {
background-color: rgba(230, 230, 230, 0.02); background-color: #e6e6e6;
border-top: 0px solid #e6e6e6; border-top: 0px solid #e6e6e6;
border-bottom: 0px solid #e6e6e6; border-bottom: 0px solid #e6e6e6;
} }
.dialogOperators td { .dialogOperators td {
padding: 2px; padding: 2px 2px;
}
.dialogOperators .et2_label {
margin-left: 6px;
display: block;
} }
/********** Footer *******************************/ /********** Footer *******************************/
/*Buttons / Toolbar*/ /*#############################################*/
/*# Toolbar #*/
/*# button | button | button delete #*/
/*##############################################*/
.dialogFooterToolbar { .dialogFooterToolbar {
background-color: #679fd2; background-color: #679fd2;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/ /*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
/*label.et2_label {}*/
} }
.dialogFooterToolbar td { .dialogFooterToolbar td {
padding: 0px 5px; padding: 0px 5px 0px 0px;
} }
.dialogFooterToolbar button { .dialogFooterToolbar button {
height: 24px; height: 24px;
@ -5390,16 +5481,6 @@ tr.dialogHeader4 .et2_label {
.dialogFooterToolbar div.et2_hbox { .dialogFooterToolbar div.et2_hbox {
white-space: normal; white-space: normal;
} }
.dialogFooterToolbar label.et2_label {
/* .Complete_Button_input;
.border_normal;
.box_shadow_standard_light;
.color-100-gray;
.background-color-10-gray;*/
padding: 6px 5px 6px 0;
position: relative;
top: 11px;
}
.dialogFooterToolbar input.et2_checkbox { .dialogFooterToolbar input.et2_checkbox {
top: 0px; top: 0px;
} }

BIN
pixelegg/images/bgDialog.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

1
pixelegg/less/def_design_pattern_color_font_shadow.less
View File

@ -71,6 +71,7 @@
@gray_30 : #B4B4B4; @gray_30 : #B4B4B4;
@gray_20 : #CDCDCD; @gray_20 : #CDCDCD;
@gray_10 : #E6E6E6; @gray_10 : #E6E6E6;
@gray_5 : #F2F2F2;
@gray_0 : #FFFFFF; @gray_0 : #FFFFFF;

45
pixelegg/less/etemplate2.less
View File

@ -71,6 +71,31 @@ div.et2_hbox_right {
color: @gray_90; color: @gray_90;
} }
/**
* img Icons
*/
a.et2_url {
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
cursor: pointer;
margin: -4px;
padding: 2px;
padding-left: 16px;
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
}
a.et2_url.phone {
background-image: url(../images/phone.png);
}
a.et2_url.url {
background-image: url(../images/url.png);
}
/** /**
* Button widget - text only, and icon * Button widget - text only, and icon
*/ */
@ -221,12 +246,12 @@ div.et2_link_entry{
// defined in layout-dialog.less
/** /**
* Tabs widget * Tabs widget
*/ */
.et2_tabflag { /*.et2_tabflag {
margin: 1em 3px -1px 0; margin: 1em 3px -1px 0;
padding: 4px; padding: 4px;
.background_color_25_gray; .background_color_25_gray;
@ -264,17 +289,17 @@ div.et2_link_entry{
} }
.et2_tabs { .et2_tabs {
/*border-width: 0px 1px 1px 1px;*/ border-width: 0px 1px 1px 1px;
/*border-style: solid;*/ border-style: solid;
border-color: @gray_70; border-color: @gray_70;
/*padding: 5px;*/ padding: 5px;
/*overflow-y: auto;*/ overflow-y: auto;
background-color: @gray_0; background-color: @gray_0;
.border_radius_button_normal; .border_radius_button_normal;
} }*/
// defined in layout-dialog.less
.et2_tabheader { /*.et2_tabheader {
padding-left: 0em; padding-left: 0em;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
margin: 0 2px; margin: 0 2px;
@ -282,7 +307,7 @@ div.et2_link_entry{
:first-child { :first-child {
margin-left: 1px; margin-left: 1px;
} }
} }*/
/** /**
* Validation * Validation

4
pixelegg/less/layout_content_elements.less
View File

@ -438,10 +438,10 @@ select,input,button
{ {
.color_100_gray; .color_100_gray;
/*font-size:99%;*/ /*font-size:99%;*/
padding: 1px; padding: 2px 0px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: @gray_20; border-color: @gray_10;
} }
select select

176
pixelegg/less/layout_dialog.less
View File

@ -19,7 +19,11 @@
/*@import (reference) "def_content_elements.less";*/ /*@import (reference) "def_content_elements.less";*/
@import (reference) "def_design_pattern_color_font_shadow.less"; @import (reference) "def_design_pattern_color_font_shadow.less";
body {background-color: @gray_0;} body {
background-color: @gray_0;
background-image: url(../images/bgDialog.png);
background-repeat: repeat-x;
}
// Dialoge Allgemeine Definition // Dialoge Allgemeine Definition
@ -126,7 +130,16 @@ table.dialog-main-view {width: 100%;}
/*########################################### /*###########################################
# # # #
# dialogHeader # # dialogHeader app-img #
#############################################
# #
# dialogHeader2 #
#############################################
# #
# dialogHeader3 #
#############################################
# #
# dialogHeader4 #
############################################# #############################################
# # # #
# # # #
@ -140,23 +153,42 @@ table.dialog-main-view {width: 100%;}
# dialogOperators # # dialogOperators #
############################################# #############################################
# # # #
# buttons # # button | button | button delete #
# #
# #
##############################################*/ ##############################################*/
tr.dialogHeader td,
tr.dialogHeader2 td,
tr.dialogHeader3 td,
tr.dialogHeader4 td,
tr.dialogOperators td {
padding: 5px 6px 5px 0;
vertical-align: middle;
}
/********** Header Part ********************/ /********** Header Part ********************/
.dialogHeader{ .dialogHeader{
// background-color gradient
/*.gradient_thead;*/
/*background-color: @egw_color_2_d;*/
.gradient_thead;
.color_100_gray; .color_100_gray;
height: 40px; height: 40px;
// APP img
img[src*="navbar"] {
padding: 0 0 0 15px;
}
table.et2_grid { // radio button
input[type="radio"],
input.et2_radiobox{
-webkit-appearance: none;
border: none;
}
table.et2_grid {
border-top: none; border-top: none;
.th { .th {
@ -170,7 +202,6 @@ table.dialog-main-view {width: 100%;}
//Table in Table //Table in Table
table.et2_grid { table.et2_grid {
label.et2_label { label.et2_label {
span.et2_selectbox { span.et2_selectbox {
li {float: left;} li {float: left;}
@ -179,29 +210,26 @@ table.dialog-main-view {width: 100%;}
} }
} } // et2_grid End
/*img {.dimension_height_s;}*/
input.et2_textbox {
font-size: 1.3em;
}
.et2_label { // Inputfield Header
input.et2_textbox { font-size: 1.3em; }
.et2_label {
.color_100_gray; .color_100_gray;
vertical-align: middle; vertical-align: middle;
padding: 0px 0px 0px 9px !important; padding: 0px 0px 0px 0px !important;
/*margin-right: 57px;*/ /*margin-right: 57px;*/
margin: 0px important; margin: 0px important;
font-size: 1em; font-size: 1em;
} text-align: right;
}
td.space { td.space {
span img { span img {
background: @gray_0; background: @gray_0;
border: 2px solid @gray_0; border: 2px solid @gray_0;
@ -222,19 +250,20 @@ table.dialog-main-view {width: 100%;}
} }
/********** Header Row2 - 4 ********************/
tr.dialogHeader2, tr.dialogHeader2,
tr.dialogHeader3, tr.dialogHeader3,
tr.dialogHeader4{ tr.dialogHeader4{
background-color: @gray_0 !important; background-color: @gray_5 !important;
border-top: 2px solid @gray_0;
border-bottom: 2px solid @gray_0;
vertical-align: middle; vertical-align: middle;
.et2_label { .et2_label {
.color_90_gray; .color_90_gray;
vertical-align: middle; vertical-align: middle;
padding: 0px 0px 0px 9px !important; padding: 0px 0px 0px 0px !important;
/*margin-right: 55px;*/ /*margin-right: 55px;*/
margin: 0px; margin: 0px;
font-size: 1em; font-size: 1em;
@ -246,14 +275,70 @@ tr.dialogHeader4{
} }
/************* Tabs *********************************/ /************* Tabs *********************************/
/**
* Tabs widget
*/
.dialogTabs { .et2_tabheader {
padding-left: 0em;
.gradient_thead; border-bottom: 1px solid #bfbfbf;
.color_100_gray; margin: 0;
background-image: none;
background-color: @gray_0;
:first-child {
margin-left: 0px;
}
} }
.et2_tabflag {
margin: 1em 3px -1px 0;
padding: 4px;
background-color: @gray_30;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
.border_radius(3px, 0px, 0px, 3px);
&:hover {
.color_50_gray;
.background_color_25_gray;
}
&:active{
.background_color_0_gray;
.color_0_gray;
}
}
.et2_tabflag.active {
border-spacing: 0px;
background-color: white;
.color_100_gray;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: @gray_70;
&:hover {
.color_100_gray;
// border: 1px solid gray;
background-color: white;
}
}
// field for content
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-color: @gray_30;
/*padding: 5px;*/
/*overflow-y: auto;*/
background-color: @gray_0;
.rounded(3px);
margin-bottom: 11px;
}
/************* Main **********************************/ /************* Main **********************************/
@ -264,25 +349,35 @@ tr.dialogHeader4{
} }
/********** Operators *******************************/ /********** Operators *******************************/
/*#############################################
# dialogOperators #
#############################################*/
.dialogOperators { .dialogOperators {
background-color: fade(@gray_10, 2%); background-color: @gray_10;
border-top: 0px solid @gray_10; border-top: 0px solid @gray_10;
border-bottom: 0px solid @gray_10; border-bottom: 0px solid @gray_10;
td {padding: 2px;} td {padding: 2px 2px;}
.et2_label {margin-left: 6px; display: block;}
} }
/********** Footer *******************************/ /********** Footer *******************************/
/*Buttons / Toolbar*/ /*#############################################*/
/*# Toolbar #*/
/*# button | button | button delete #*/
/*##############################################*/
.dialogFooterToolbar{ .dialogFooterToolbar{
background-color: @color_button_panel_bg_color; background-color: @color_button_panel_bg_color;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 3px; padding: 3px;
td {padding: 0px 5px;} td {padding: 0px 5px 0px 0px;}
button { button {
.dimension_height_m; min-width: 114px; .dimension_height_m; min-width: 114px;
@ -304,16 +399,7 @@ tr.dialogHeader4{
// e.g. keine Benachrichtigung senden // e.g. keine Benachrichtigung senden
label.et2_label { /*label.et2_label {}*/
/* .Complete_Button_input;
.border_normal;
.box_shadow_standard_light;
.color-100-gray;
.background-color-10-gray;*/
padding: 6px 5px 6px 0;
position: relative;
top: 11px;
}
input.et2_checkbox { top: 0px;} input.et2_checkbox { top: 0px;}