/* - Generic */
html { 
    background: #fffffc;
}

body { 
    background: transparent;
    margin: 0.62em 0.62em 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

/* - Forms */
fieldset { 
    margin: 0;
    padding: 10px 0 0;
    border: 0;
}
fieldset + fieldset {
    margin-top: 15px;
}
legend { 
    color: #2b2b2b;
    font-weight: bold;
}
label.msg { 
    display: none;
}
label.invalid { 
    color: #c53d43;
    display: inline;
}
input.invalid { 
    border: 1px solid #c53d43;
    background-color: #f2b1b1;
}
input, 
select, 
textarea, 
button {
    margin: 0;
    font-size: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
input { 
    padding: 0 0.25em;
}
textarea { 
    padding: 0.2em 0.25em;
    overflow: auto;
    resize: vertical;
}
input[type=checkbox], 
input[type=radio] { 
    padding: 0;
}
input[type=text], 
input[type=submit], 
input[type=button] { 
    height: 1.75em;
    line-height: normal;
}
input[type=text]::-moz-focus-inner, 
input[type=submit]::-moz-focus-inner, 
input[type=button]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* - Input */
input[type=text], 
textarea { 
    width: 75%;
    outline: 0;
    border: 1px solid #adadad;
    border-top-color: #a3a3a2;
    line-height: 1.3;
    background-color: #ffffff;
    border-radius: 2px;
}

textarea { 
    resize: none;
}

input[type=text]:hover, 
textarea:hover, 
input[type=text]:focus, 
textarea:focus { 
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
}
input[type=text]:hover, 
textarea:hover { 
    border-color: #a0a0a0;
}
input[type=text]:focus, 
textarea:focus { 
    outline: 0;
    border-color: #2a83a2;
}

input.radio, 
input.checkbox { 
    vertical-align: middle;
}
.input_noborder { 
    border:0;
}

/* -- Buttons */
#insert, 
#cancel, 
input.button, 
.updateButton { 
    cursor: pointer;
    overflow: visible;
    display: inline-block;
    outline: none;
    margin-right: 5px;
    padding: 0 0.5em;
    border: 1px solid #c0c6c9;
    line-height: 1.75em;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(#f3f3f3, #dcdddd);
    background-image: -webkit-linear-gradient(#f3f3f3, #dcdddd);
    background-image: linear-gradient(#f3f3f3, #dcdddd);
    color: #2b2b2b;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#dcdddd',GradientType=0 );
}

#insert, 
#cancel { 
    min-width: 80px;
    padding: 0 0.8em;
    color: #fffffc;
    text-shadow: #383c3c 1px 1px 1px;
    font-size: 14px;
    font-weight: bold;
}
#insert { 
    border-color: #165e83;
    background-color: #2a83a2;
    background-image: -ms-linear-gradient(#2a83a2, #165e83);
    background-image: -moz-linear-gradient(#2a83a2, #165e83);
    background-image: -webkit-linear-gradient(#2a83a2, #165e83);
    background-image: linear-gradient(#2a83a2, #165e83);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a83a2', endColorstr='#165e83',GradientType=0 );

}
#insert:hover { 
    border-color: #274a78;
    background-color: #2f93b6;
    background-image: -ms-linear-gradient(#2f93b6, #1a6e99);
    background-image: -moz-linear-gradient(#2f93b6, #1a6e99);
    background-image: -webkit-linear-gradient(#2f93b6, #1a6e99);
    background-image: linear-gradient(#2f93b6, #1a6e99);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f93b6', endColorstr='#1a6e99',GradientType=0 );
}
#insert:active { 
    background-color: #165e83;
    background-image: -ms-linear-gradient(#165e83, #2a83a2);
    background-image: -moz-linear-gradient(#165e83, #2a83a2);
    background-image: -webkit-linear-gradient(#165e83, #2a83a2);
    background-image: linear-gradient(#165e83, #2a83a2);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#165e83', endColorstr='#2a83a2',GradientType=0 );
}
#cancel { 
    border-color: #7b7c7d;
    background-color: #adadad;
    background-image: -ms-linear-gradient(#adadad, #7b7c7d);
    background-image: -moz-linear-gradient(#adadad, #7b7c7d);
    background-image: -webkit-linear-gradient(#adadad, #7b7c7d);
    background-image: linear-gradient(#adadad, #7b7c7d);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#7b7c7d',GradientType=0 );
}
#cancel:hover { 
    border-color: #595857;
    background-color: #bababa;
    background-image: -ms-linear-gradient(#bababa, #88898a);
    background-image: -moz-linear-gradient(#bababa, #88898a);
    background-image: -webkit-linear-gradient(#bababa, #88898a);
    background-image: linear-gradient(#bababa, #88898a);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#88898a',GradientType=0 );
}
#cancel:active { 
    background-color: #7d7c7d;
    background-image: -webkit-linear-gradient(#7b7c7d, #adadad);
    background-image: -ms-linear-gradient(#7b7c7d, #adadad);
    background-image: -moz-linear-gradient(#7b7c7d, #adadad);
    background-image: -webkit-linear-gradient(#7b7c7d, #adadad);
    background-image: linear-gradient(#7b7c7d, #adadad);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7c7d', endColorstr='#adadad',GradientType=0 );
}


/* - Browse Icon */
a.browse, 
a.pickcolor {
    text-decoration: none;
}
a.browse span, 
a.pickcolor span {
    display: block;
    margin-left: 2px;
    background-image: url(img/icons.gif);
}
a.browse span { 
    width: 20px;
    height: 18px;
    border: 1px solid #ffffff;
    background-position: -860px 0;
}
a.pickcolor span { 
    width: 20px;
    height: 16px;
    background-position: -840px 0;
}

a.browse:hover span, 
a.pickcolor:hover span { 
    background-color: #dcdddd;
}
a.browse:hover span {
    border: 1px solid #2b2b2b;
}

a.browse span.disabled { 
    border: 1px solid #ffffff;
    -moz-opacity: 0.3;
    opacity: 0.3;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
a.browse:hover span.disabled { 
    border: 1px solid white;
    background-color: transparent;
}

/* - Charmap */
table.charmap { 
    border: 1px solid #2b2b2b;
    text-align: center;
}
td.charmap, 
#charmap a { 
    width: 18px;
    height: 18px;
    border:1px solid #2b2b2b;
    line-height: 18px;
    color: #2b2b2b;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}
#charmap a { 
    display: block;
    border: 0;
    color: #2b2b2b;
    text-decoration: none;
}
#charmap a:hover { 
    background: #dcdddd;
}
#charmap #codeN { 
    font-size: 10px;
    text-align: center;
}
#charmap #codeV { 
    height: 80px;
    border: 1px solid #2b2b2b;
    font-size: 40px;
    text-align: center;
}

/* - Source */
.wordWrapCode { 
    vertical-align: middle;
    border: 1px none #2b2b2b;
    background: transparent;
}
.mceActionPanel { 
    margin-top: 10px;
}
.mceActionPanel div { 
    margin-bottom: 10px;
}

/* - Tabs classes */
.tabs { 
    width: 100%;
    line-height: normal;
    border-bottom: 1px solid #c0c6c9;
}
.tabs ul { 
    margin: 0;
    padding: 0;
    list-style: none;
}
.tabs li { 
    line-height: 1;
    display: inline-block;
    margin: 0 5px -1px 0;
    border: 1px solid #c0c6c9;
    background-color: #f3f3f3;
    font-size: 90%;
    border-radius: 3px 3px 0 0;
}
.tabs li.current { 
    border-bottom-color: #ffffff;
    background-color: #ffffff;
    outline: 0;
}
.tabs span { 
    display: block;
    padding: 5px 10px;
}
.tabs a { 
    color: #2b2b2b;
    text-decoration: none;
}
.tabs a:hover { 
    color: #507ea4;
}
.tabs li.current a { 
    cursor: default;
}
.tabs li.current a:hover {
    color: #2b2b2b;
}

/* - Panels */
.panel_wrapper div.panel { 
    display: none;
}
.panel_wrapper div.current { 
    display: block;
    width: 100%;
    height: auto ! important;
    overflow: visible;
}
.panel_wrapper { 
    clear: both;
    padding: 10px;
    border: 1px solid #c0c6c9;
    border-top: 0px;
    background-color: #ffffff;
}

/* - Columns */
.column { 
    float: left;
}
.properties { 
    width: 100%;
}
.properties .column2 { 
    text-align: left;
}

/* - Titles */
h1, 
h2, 
h3, 
h4 { 
    color: #2b2b2b;
    margin: 0;
    padding: 5px 0 0;
}
h3 { 
    font-size: 14px;
}
.title { 
    font-size: 12px;
    font-weight: bold;
    color: #2b2b2b;
}

/* - Dialog specific */
#plugintable thead { 
    font-weight: bold;
    background: #dcdddd;
}
#plugintable, 
#about #plugintable td { 
    border: 1px solid #c0c6c9;
}
#plugintable { 
    width: 96%;
    margin-top: 10px;
}
#pluginscontainer { 
    height: 290px;
    overflow: auto;
}

/* -- Color Picker */
#colorpicker #colors {
    float: left;
    border: 1px solid #c0c6c9;
    cursor: crosshair;
}
#colorpicker #light {
    float: left;
    width: 15px;
    height: 150px;
    margin-left: 10px;
    border: 1px solid #c0c6c9;
    cursor: crosshair;
}
#colorpicker #light div {
    overflow: hidden;
}
#colorpicker #preview_wrapper {
    float: right;
    height: 20px;
    margin-top: 3px;
}
#colorpicker #previewblock {
    float: right;
    margin-left: 5px;
}
#colorpicker #previewblock label {
    display: none;
}
#colorpicker #preview { 
    display: inline-block;
    width: 30px;
    height: 17px;
    border: 1px solid #c0c6c9;
}
#colorpicker .panel_wrapper div.current { 
    width: 330px;
    min-height: 180px ! important;
    margin: 0 auto;
}
#colorpicker #namedcolors {
    width: 100%;
}
#colorpicker #namedcolors a {
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    margin: 1px 1px 0 0;
    overflow: hidden;
}
#colorpicker #colornamecontainer {
    margin-top: 10px;
}

/* -- Insert HTML */
#source {
    width: 100% ! important;
    height: 220px ! important;
}