/*
MOBILE STYLE SHEET SYSTEM
------------------------------
This sheet is attached in the System/Skins.asp file and used to try and control styling in a wide range of mobile devices using a simple links style sheet system. The default mobile style system uses a very basic mobile style sheet linked style page (below), and atempts to attach this simple mobile style sheet to mobile devices that will regognize it using both a <style media=handheld> or @import with media handheld attribute. In general, because support for the media="handheld" attribute is so spotty in pda's, micro-browsers and mobile devices like cell phones, its very difficult to predict which device will read the sheet, if they read style sheets at all. For this reason, this mobile style sheet system and solution should be used sparingly. A better solution, if you need to develop a special mobile-based page for this web product, is to develop a stripped down version of your module web pages in a separate folder or module using plain xhtml-basic code. This code is similar to HTML 3.2 and very plain. Remove almost all styles from this page and use very plain html that is compatible with the new xhtml basic doctype and markup code base. Consider building your mobile module that way using simple divs and paragraphs in linear content fashion, which minimal inline styling and imagery for maximum display possibilities on a wide range of mobile browsers. But if you care to try this mobile system below, you may customize your web design interface code below to override desktop browser style sheets and prepare the markup for very plain div-based linear display layouts, which need to be very simple and plain for mobile devices
------------------------------
*/


/* CORE STYLES FOR SMALL DEVICE DISPLAYS */

html,body,html body {
padding:0;
margin:0;
width:100%;
height:auto;
background:#ffffff;
font-size:xx-small;
font-weight:normal;
font-family:'trebuchet ms',verdana,arial,'ms sans serif','lucida grande',lucida,'trebuchet ms',geneva,helvetica,sans-serif;
color:#000000;
text-align:left;
line-height:normal;
word-spacing:0;
letter-spacing:0;
min-width:none;
max-width:100%;
min-height:none;
max-height:none;
}

html body div br {
padding:0;
margin:0;
line-height:.69em;
}

html body div p {
padding:0;
margin:0;
line-height:1.2em;
}

html body div pre {
white-space:pre-wrap;
}

html body div {
position:static;
float:none;
clear:both;
display:block;
width:100%;
height:auto;
padding:0;
margin:0;
max-width:100%;
font-size:xx-small;
line-height:1;
}

img.myimagetext.as-text {
content:attr(alt);
}

html body div form {
max-width:100%;
line-height:1;
margin:0;
padding:0;
}

html body div table {
max-width:100%;
margin:0;
padding:0;
}

table,td,tr,th,tfoot,thead,tbody,col,colspan,caption {
display:block;
width:auto;
height:auto;
padding:0;
margin:0;
font-size:xx-small;
line-height:1;
}

div a,div a:link,div a:visited,div a:focus,div a:active,div a:hover{
color:#003366;
text-decoration:underline;
line-height:1;
}

div a:hover{
font-weight:normal;
color:#0033aa;
text-decoration:underline;
background-color:#cfdfef;
}

div a:active,div a:focus{
font-weight:normal;
color:#0033aa;
text-decoration:underline;
background-color:#cfdfef;
}

div input,div button,div textarea,div select {
margin:0;
padding:0;
max-width:100%;
font-size:xx-small;
float:none;
clear:both;
line-height:1;
}

h1 {
/*/*//*/font-size:x-small;line-height:normal;/*end*/
}

big,h2,h3,h4,h5,h6,small,sub,sup {
/*/*//*/font-size:xx-small;line-height:normal;/*end*/
}





/* custom mobile styles */

/* DONT HIDE THESE : #module_panel1,#module_panel2,#module_panel3,#module_panel4,body #module_form #module,body #module_form #submit_module,body #skin_form #skin,body #skin_form #submit_skin */

/* hide these */

#left_menu_column,#right_menu_column,html body #header_panel1,html body #header_panel2,html body #header_panel3,#header_panel4,#header_panel5,#header_panel6,#header_menu_panel1,#header_menu_panel2,#header_menu_panel3,#header_menu_panel4,#header_menu_panel5,#header_menu_panel6,#header_menu_column,#module_panel5,#module_panel6,#module_panel7,#footer_panel1,#footer_panel2,#footer_panel3,#footer_panel4,#footer_panel5,#footer_panel6,#footer_menu_column,#footer_menu_panel1,#footer_menu_panel2,#footer_menu_panel3,#footer_menu_panel4,#footer_menu_panel5,#footer_menu_panel6,#error_panel1,#error_panel2,#error_panel3,#right_menu,#left_menu,#header_menu,#footer_menu,body object,body object strong,body .hidefromnetscape4,body .hidefromie5formac,body #flash_activex,body #flash_plugin,body #flash_alternate,body #flash_plugin,body #flash_home,body #header_print,body #layout_stub,body #printfooter,body div #module_panel2,body #skip_to_content {
float:none;
height:0;
width:0;
border:0;
margin:0;
padding:0;
line-height:0;
display:none;
}



/* misc */

html body #header_mobile {
display:block;
width:100%;
height:auto;
clear:both;
padding:0;
background-color:#00A5CD;
margin:0 auto;
text-align:center;
}

html body #header_mobile h1 {
display:block;
margin:0;
padding:2px 0;
border:none;
width:100%;
height:auto;
line-height:normal;
font-weight:bold;
font-size:x-small;
color:white;
}

html body #header_mobile_white {
display:block;
width:100%;
height:auto;
clear:both;
background-color:#fff;
text-align:center;
margin:0 auto;
line-height:1;
}

html body div img,html body div #header_img_logosmall {
display:block;
background-color:transparent;
color:#00A5CD;
font-size:xx-small;
padding:0;
margin:0 auto;
border:none;
text-align:center;
max-width:100%;
width:auto;
height:auto;
}

body #module_panel1,body #module_panel3,body #module_panel4,body #module_form,body #module_form #module,body #module_form #submit_module,body #skin_form,body #skin_form #skin,body #skin_form #submit_skin {
width:auto;
height:auto;
border:0;
float:none;
margin:0;
padding:0;
line-height:normal;
font-size:xx-small;
}

/*
body #module_panel1,body #module_panel3,body #module_panel4,body #module_form,body #skin_form {
background-color:#00b5df;
}
*/

body div #module_form #submit_module,body div #skin_form #submit_skin {
float:left;
background-color:#00eeff;
}

body div #module_form #module,body div #skin_form #skin {
background-color:#00eeff;
}


body div #shell1,body div #shell2,body div #content_setmargin,body div #content_settextarea,body div #content,html body div #footer {
position:static;
display:block;
float:none;
margin:0;
padding:0;
border:0;
width:100%;
height:auto;
min-width:100%;
max-width:none;
min-height:0;
max-height:none;
background:#ffffff;
color:#000033;
line-height:normal;
font-weight:normal;
font-style:none;
font-size:xx-small;
}

body div #back_to_top {
position:static;
display:block;
clear:both;
float:none;
line-height:normal;
width:100%;
height:auto;
border:0;
margin:0;
padding:0;
line-height:1;
}



/* menus */

body div ul#menuleft,body div ul#menuleft li,body div ul#menuright,body div ul#menuright li,body div ul#header_menu,body div ul#header_menu li,body div ul#footer_menu,body div ul#footer_menu li {
position:static;
display:block;
float:none;
clear:both;
margin:1px 0;
padding:0;
border:none;
width:100%;
height:auto;
line-height:normal;
background-color:#0095bD;
background-image:none;
text-align:left;
vertical-align:middle;
font-size:xx-small;
}
#menuleft li span,#menuright li span {
display:inline;
background-image:none;
text-align:left;
vertical-align:middle;
font-size:xx-small;
}
body ul#menuleft li a,body ul#menuleft li a:link,body ul#menuleft li a:visited,body ul#menuleft li a:active,body ul#menuleft li a:focus,body ul#menuleft li a:hover,body ul#menuright li a,body ul#menuright li a:link,body ul#menuright li a:visited,body ul#menuright li a:active,body ul#menuright li a:focus,body ul#menuright li a:hover,body ul#header_menu li a,body ul#header_menu li a:link,body ul#header_menu li a:visited,body ul#header_menu li a:active,body ul#header_menu li a:focus,body ul#header_menu li a:hover,body ul#footer_menu li a,body ul#footer_menu li a:link,body ul#footer_menu li a:visited,body ul#footer_menu li a:active,body ul#footer_menu li a:focus,body ul#footer_menu li a:hover {
position:static;
display:block;
float:none;
clear:both;
display:block;
margin:0;
padding:0;
border:none;
width:100%;
height:auto;
line-height:normal;
font-weight:bold;
color:#000;
text-decoration:underline;
background-color:#0095bD;
background-image:none;
text-align:left;
vertical-align:middle;
font-size:xx-small;
}
div ul#menuleft li a:hover,div ul#menuleft li a:active,div ul#menuleft li a:focus,div ul#menuright li a:hover,div ul#menuright li a:active,div ul#menuright li a:focus,div ul#header_menu li a:hover,div ul#header_menu li a:active,div ul#header_menu li a:focus,div ul#footer_menu li a:hover,div ul#footer_menu li a:active,div ul#footer_menu li a:focus {
font-weight:bold;
color:#fff;
background-color:#0085aD;
background-image:none;
}