/*
Slightly updated style(s) for the traditional soyMAIL.
This one tries to be über-neutral!

Button styles based on ...
http://www.red-team-design.com/just-another-awesome-css3-buttons
http://ikwebdesigner.com/special-characters/
*/

body
{
   color: #000000;
   background-color: #ddd;
}

.css_logo
{
   /* "Tw Cen MT" MS font looks a lot like Futura */
   font-family:futura, "Tw Cen MT", helvetica, arial, sans;
   font-size: 170%; font-weight: normal; 
   text-shadow: #fff 0px 1px 0, #000 0 -1px 0;
   color: #cccccc;
   padding: 0 0.2em 0 0.2em;
}

.css_logo9
{
   /* MSIE9 ... "Tw Cen MT" MS font looks a lot like Futura (on MSWin) */
   font-family:"Tw Cen MT", helvetica, arial, sans;
   font-size: 200%; font-weight: normal;
   color: #666666;
   padding: 0 0.2em 0 0.2em;
}

.css_warning
{
   color: #ff0000;
   font-size: 100%;
   text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* panel 1 example: status, message list */

.css_panel_1
{
   font-size: 100%;
   white-space: nowrap;

   width:100%;
   margin:0.1em 0.1em 0.1em 0.1em;
   padding:0.1em 0.1em 0.1em 0.1em; 

   border: 1px solid #777;

   background-color: #ddd;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
   background-image: -webkit-linear-gradient(top, #fff, #ddd);
   background-image: -moz-linear-gradient(top, #fff, #ddd);
   background-image: -ms-linear-gradient(top, #fff, #ddd);
   background-image: -o-linear-gradient(top, #fff, #ddd);
   background-image: linear-gradient(top, #fff, #ddd);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#dddddd');

   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.css_panel_1 a,
.css_panel_2 a,
.css_text_message a
{
   font-size: 100%;
   text-decoration: underline;
   color: #000000;
}

.css_text_message a
{
   font-family: fixed, monospace;
}

.css_button_panel_1, .css_button_panel_2
{
   white-space: nowrap;
   text-decoration: none;
   color: #333;
   text-shadow: 0 1px 0 rgba(255,255,255,.8);

   border: 1px solid #777;
   padding: 0.1em 0.5em 0.1em 0.5em;
   margin: 0;

   background-color: #ccc;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
   background-image: -webkit-linear-gradient(top, #eee, #ccc);
   background-image: -moz-linear-gradient(top, #eee, #ccc);
   background-image: -ms-linear-gradient(top, #eee, #ccc);
   background-image: -o-linear-gradient(top, #eee, #ccc);
   background-image: linear-gradient(top, #eee, #ccc);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#cccccc');

   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.css_button_panel_1:hover, .css_button_panel_2:hover
{
   background-color: #ddd;        
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
   background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
   background-image: -moz-linear-gradient(top, #fafafa, #ddd);
   background-image: -ms-linear-gradient(top, #fafafa, #ddd);
   background-image: -o-linear-gradient(top, #fafafa, #ddd);
   background-image: linear-gradient(top, #fafafa, #ddd);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#dddddd');        
}

/* MSIE avoid checkbox background issues by not styling in the first place! */
input:not([type=checkbox]):not([type=radio]),
textarea
{ 
   resize: none;
   background-color: #f4f4f4!important;
   border: 1px inset #777;
   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.css_select_1, .css_select_2
{
   font-size: 100%;
   background-color: #f0f0f0;        
   color: #000000;
   border-style: solid;
   border-color: #777;
   border-width: 1px;

   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.css_checkbox_1, .css_checkbox_2
{
   font-size: 80%;
   background: transparent !important;
   background-color: inherit !important;
   border: none !important;
}

/* panel 2 example: main menu bar */

.css_panel_2
{
}

.css_save_as_2
{
    color: #EFEFEF;
    text-decoration: none;
}

/* panel 3 example: message header and text display */
/* panel 4 example: contacts, options */

.css_panel_3, .css_panel_4
{
   font-size: 100%;
   margin:0.1em 0.1em 0.1em 0.1em;
   padding:0.5em 0.5em 0.5em 0.5em; 

   border: 1px solid #777;
   background-color: #f8f8f8;
   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

/* [kludge] options panel */
.css_panel_4 .css_panel_1, .css_panel_4 .css_panel_2
{
   border: none;
   border-width: 0;
   background: inherit;
   background-image: inherit;
   background-color: inherit;
   -moz-border-radius: inherit;
   -webkit-border-radius: inherit;
   border-radius: inherit;
   -moz-box-shadow: inherit;
   -webkit-box-shadow: inherit;
   box-shadow: inherit;
}

/* [kludge] search panel */
.css_panel_1 .css_panel_2, .css_panel_1 .css_panel_1
{
   border: none;
   border-width: 0;
   background-image: inherit;
   background-color: inherit;
   background: inherit;
   -moz-border-radius: inherit;
   -webkit-border-radius: inherit;
   border-radius: inherit;
   -moz-box-shadow: inherit;
   -webkit-box-shadow: inherit;
   box-shadow: inherit;
}

/* [kludge] options section headings */
tr[id^="options_"],
/* [kludge] search heading */
tr[class="css_panel_2"] td[colspan="2"],
/* [kludge] contacts headings */
tr[class="css_panel_2"] td table tr[class="css_panel_2"]
{
   text-decoration: underline;
}

.css_text_1
{
   font-size: 100%;
   background-color: #f4f4f4;
   color: #000000;
}

.css_text_message
{
   font-family: fixed, monospace;
   overflow: auto;
}

.css_text_edit
{
   font-family: fixed, monospace;
   font-size: 100%;
   background-color: #f4f4f4;
   color: #000000;
}

/* message preview */

.css_preview
{
   font-family: monospace; font-size: 90%;
   padding: 1px 5px 1px 5px;
   color: #000;
   background-color: #eee;

   border: 1px inset #777;

   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.css_preview_status { font-style: italic; }

/* help pages elements (mostly transparent for illustrative purposes only) */

.css_button_help
{
   background-color: transparent;
   color: #000000;
   font-size: 80%;
   border-style: solid;
   border-color: #000000;
   border-width: 1px;
   margin: 0px;
}

.css_button_help_link
{
   background-color: transparent;
   color: #000000;
   font-size: 80%;
   border-style: dashed;
   border-color: #000000;
   border-width: 1px;
   margin: 0px;
}

.css_text_help
{
   font-size: 80%;
   background-color: transparent;
   color: #000000;
}

.css_checkbox_help
{
   font-size: 80%;
   background-color: transparent;
   color: #000000;
   border-style: solid;
   border-color: #000000;
   border-width: 1px;
}

.css_select_help
{
   font-size: 80%;
   background-color: #DEDEDE;
   color: #000000;
   border-style: solid;
   border-color: #000000;
   border-width: 1px;
}