﻿*
{   
    margin: 0em;
    padding: 0em;
}
html /*确保使用 非 % 单位对容器标注尺寸  可防止对 该 容器范围内的页面缩放变形 可用于打印 扩印等*/
{
 /*   
   width: 78.5em; 
    height: 58.5em;  
容器定义的宽度或高度 可定义影响、浏览器中该容器的总宽度或高度 的基值（因为总宽度还受其它子元素设置的影响，
当子元素 < 容器的尺寸时 将包括无页面区域）应使用默认值：auto 以防止出现无页面的空白区*/
}
body
{   
    font-family: Verdana,Geneva,Lucida,Arial,sans-serif;
    font-size: 100%; /*为确保不同浏览器的兼容性 请确保使用100%*/
    line-height: 1.6em;
    width: auto; /*这里设置的宽度定义页面呈现的宽度*/
    height: auto;
    margin: 0em; /*请确保这两个设置为0em*/
    padding: 0em;
    
    background-color: #FFFFFF;
}

form /*确保使用 em 单位对容器标注尺寸  能防止页面缩放变形 确保容器能正确跟踪 适应子元素尺寸变化 请使用默认值 auto 标注尺寸*/
{
    width: auto;
    height: auto;
}

/*主布局 div
----------------------------------------------------------------*/

div
{
    margin: 0em; /*请确保这两个设置为0em*/
    padding: 0em;
}
div#box /*宽度总体控制  高度分层控制最小高度*/
{
    position: absolute; /*特别注意：fixed 定位会导致页面刷新缓慢 滚屏时出现抖动 当然这也与处理器的速度有关*/
    top: 1.5em; /*若保留1em 可为编辑页面方便查看标签 还可为打印页眉留出空间 */
    left: 0em;
    padding-top: 0.01em;
    
    width: 100%;  /*控制整个box元素在页面 宽度 使用 em 单位 能防止页面缩放变形 使用 100% 能确保在任何分辨率下满屏显示*/
    height: auto; 
    background-color: #664433;
}
div#topa
{
    float: left;
    width: 100%;
    height: auto;
    background-color: #408010;
    border: 1px;
}
div#top1
{
    float: left;
    width: 11%; /*请确保 top1 + top2 = 100% 在编辑页面时可以设为10% 以方便在编辑环境里正确呈现页面(使 top1,top2 在同一层呈现)  --百和*/
    height: auto;
    min-height: 9em; /*控制 top1 最小高度*/
    
    background-color: #406010;
 /*   background-image: url(http://localhost:1073/Test/Images/http_imgload[6].gif);*/
    cursor: pointer;
}
div#top2
{
    float: left;
    width: 89%; /*请确保 top1 + top2 = 100% --百和*/
    height: auto;
    min-height: 6em; /*控制 top2 最小高度*/
    
    background-color: #408010;
}
div#floadata
{
    float: left;
    width: 26%;
    height: auto;
    max-height: 20em;
    overflow: auto;
    
    background-color: #666633;
    padding: 0em 0% 1em 0%;
    margin-bottom: 0em;
    text-align: center;
    display: none;
    visibility: visible;
}
div#amvbox
{
    float: left;
    width: 48%;
    height: auto;
    
    background-color: #000000;
    padding: 0em 0% 3px 0%;
    text-align: center;
    display: none;
    overflow: auto;
    z-index: 0;
}
div#skydiv
{
    float: left;
    width: 48%;
    height: auto;
    max-height: 20em;
    overflow: auto;
    
    background-color: #666633;
    padding: 0em 0% 1em 0%;
    margin-bottom: 0em;
    text-align: center;
    display: none;
    visibility: visible;
}
div#adrobox
{
    float: right;
    width: 26%;
    height: auto;
    max-height: 20em;
    overflow: auto;
    
    background-color: #666633;
    padding: 0em 0% 1em 0%;
    margin-bottom: 0em;
    text-align: center;
    display: none;
    visibility: visible;
}
div#middlea
{
    float: left;
    width: 100%;
    height: auto;
    
    background-color: #6B8E23;
}
div#middle1
{
    float: left;
    width: 11%; /*请确保width: middle1 + middle2 + middle3 = 100% --百和*/
    height: auto;
    min-height: 22em;
    
    background-color: transparent;
}
div#middle2
{
    float: left;
    width: 77%; /*请确保width: middle1 + middle2 + middle3 = 100% --百和*/
    height: auto;
    min-height: 100%; /*向上相关性 100% 遇见 auto的 向下相关性 相关性结果归零 最小高度将由 height: auto; 自动计算最小化的值*/
    min-width: 10em;
    
    background-color: #8A8243;
    margin-bottom: 2.5em; /*设置 3em 下边界 产生悬挂效果*/
}
div#middle3
{
    float: right;
    width: 12%; /*请确保width: middle1 + middle2 + middle3 = 100% --百和*/
    height: auto;
    min-height: 22em;
    
    background-color: transparent;
    
}
div#foot2
{
    float: left;
    width: 100%;
    height: auto;
    min-height: 6.5em;
    
    background-color: #556B2F;
    padding: 0em 0em 2em 0em;
    border-top: 2px solid #FFFFFF;
}

/*次布局 div
----------------------------------------------------------------*/
div#divmenu
{
    margin-bottom: 2em;
}
.tagamv div
{
    vertical-align: bottom;
}    
/*div#skydiv
{
    z-index: -1; position: absolute; top: 0%; left: 0%; width: 10em; height: 10em;
    background-color: Red; 有些鼠标事件可穿过 transparent 颜色值 但绝不会穿过其它颜色值
}*/
div#skysoul
{
    position: relative; top: 0%; left: 0%; width: 100%; height: auto; text-align: center; background-color: #000000; color: #FFFFFF;
}
input#buttonf
{
    border-style: none; cursor: pointer; position: absolute; top: 40%; left: 45%; width: 6em; height: 4em; background-color: #000000; color: #FFFFFF; display: none; visibility: hidden;
}
div#asycdata
{
    z-index: -1; position: absolute; top: 0%; left: 0%; width: auto; height: auto; display: none; visibility: hidden;
}

/*其它 div
----------------------------------------------------------------*/

/*隐藏 布局标签说明
------------------------------------------------------------------------*/      
      
.taga /*隐藏 容器层 布局标签说明*/
{
    display: none;
    visibility: hidden;
}   
.tagn /*隐藏 显示层 布局标签说明*/
{
    background-color: #993399;
    display: none;
    visibility: hidden;
}
.jfloatl
{
    float: left;
}
.jfloatr
{
    float: right;
}
.jclear
{
    clear: both;
}
.jhidden
{
    display: none;
}
.jcenter
{
    text-align: center;
}
.jw26
{
    width: 26%;
}
.jw32
{
    width: 32%;
}
.jw68
{
    width: 68%;
}
.jw96
{
    width: 96%;
}
.jw100
{
    width: 100%;
}
.jwauto
{
    width: auto;
}
.jw10em
{
    width: 10em;/*对表格的最后一列的标题限制宽度，中间留有自由伸缩的列，可以确保表格布局工整性、与正确性。*/
}
.jh4
{
    min-height: 4em;
}
.jh10
{
    min-height: 10em;
}
.jh15
{
    min-height: 15em;
}
.jh30
{
    min-height: 30em;
}
.jh100
{
    height: 100%;
}
.jhauto
{
    height: auto;
}
.jpadding0
{
    padding: 0em;
}
.jpadd03rl
{
    padding: 0em 0.3em 0em 0.3em;
}
.jmargin0
{
    margin: 0em;
}
.jmargtop
{
    margin-top: 0.5em;
}
.tag0
{
    float: left;
    width: 100%;
    height: auto;
    min-height: 22em;
    
    margin: 0em 0em 1em 0%;
    padding: 0em 0% 1em 0%;
    background-color: transparent;
}
.tag1
{
    float: left;
    width: 28%;
    height: auto;
    
    margin: 0em 1% 1em 3%; /*边界值是否有效 受浮动方向影响 向左浮动 则左边界值有效 右边界值无效 为了保证版面 必须定义边界*/
    padding: 0em 1% 1em 1%;
    background-color: #AA8243;
}
.tag2
{
    float: left;
    width: 28%;
    height: auto;
    
    margin: 0em 1% 1em 1%;
    padding: 0em 1% 1em 1%;
    outline: #00FF00 dotted thick;

    background-color: #AA8283;
}
.embphoto
{
    width: 48%;
    height: 68%;
    
    margin: 1em 1% 1em 1%;
    padding: 1em 1% 1em 1%;

    background-color: #AA8283;
}
.tagamv
{
    width: 100%;
    height : 100%;
    margin: 0em 0em 0em 0%;
    padding: 0em 0% 0em 0%;
    background-color: transparent;
    vertical-align: top;
    color: #AA8283;
}
.tag3
{
    float: right;
    width: 28%;
    height: auto;
    
    margin: 0em 3% 1em 1%;
    padding: 0em 1% 1em 1%;
    background-color: #AA8243;
}
.button5em
{
    text-align: center;
    width: 40%;
    min-width: 3em;
    max-width: 5em;
    
    height: 2em;
    margin: 0.5em;
}
.button8em
{
    text-align: center;
    width: 40%;
    min-width: 8.5em;
    max-width: 10em;
    font-size: 1.2em;
    
    height: 2em;
    margin: 0.5em 1.5em 0.5em 0.5em;
}
.button8em:hover
{
    color: Green;
}
.tagTextBox
{
    font-size: 1em;
    text-align: center;
    width: 40%;
    min-width: 3em;
    max-width: 8em;
    
    height: 1.3em;
    margin: 0.2em;
    padding: 0em;
}
.tagurl
{
    width: 20em;
    max-width: 80%;
    white-space: nowrap;
}
.tagx
{
    width: auto; height: auto; display: none; visibility: hidden;
}
.svg
{
    border-style: none;
    width: 20em;height: 10em;max-width: 99%;max-height: 10em;
    z-index: 0;
    float: left;
    background-color: #AA895A;
    /*fill: #000000;  svg 元素 特有属性 */
    /*fill-opacity: 1;  svg 元素 特有属性 */
    /*stroke-opacity: 1;  svg 元素 特有属性 */
    font-size: 1em;
    font-weight: 100;
    margin-left: 0em;
}
.backred
{
    background-color: Red;
}
.colorRed
{
    color: #CC0000;
}
.back-black,.back-black p
{
    color: White;
    background-color: Black;
}
.level1 > li
{
    float: left;
    background-color: #996600;
}
.level3
{
    display: none;
}
.menulist
{
    font-family: 宋体;
    font-size: 1.2em;
    color: Black;
}
.menulist ul
{
    background-color: #7C6F57;
}
.menulist > ul > li
{
    float: left;
    background-color: #996600;
    border: 0.01em solid #FF9933;
    padding: 0.2em;
}
.menulist > ul > li:first-child,.menulist > ul > li:first-child a
{
    background-color: #7C6F57;
    color: White;
}
.menulist a
{
    padding: 0em 1.5em 0em 1.5em;
}
.menulist a:link
{
    color: Black;
}
.menulist a:visited
{
    color: Black;
}
.menulist a:hover
{
    background-color: #7C6F57;
    color: White;
}
.menulist li:hover
{
    background-color: #7C6F57;
}
.golda
{
    background-color: Green;
    color: Yellow;
}
.ovf
{
    overflow: auto;
    white-space: nowrap;
    padding: 0em;
}
.jloga
{
    display: inline-block;
}
.jloga img
{
    height: 1em;
    width: auto;
    margin: 0.3em 0em 0em 0em;
}
/* dl 相关标签  金发色 #C29965; 口红色 #ED5762;
---------------------------------------------------*/
.jdl
{
    padding: 0em 4.5em 0em 4.5em;
    margin: 0em 15% 3em 20%;
}
dt
{
    background-color: Yellow;
    width: 5em;
}
dd
{
    margin-left: 2em;
}
/* h1 标签
--------------------------------------------------*/

h1
{
    color: #CC0099;
    font-family: Arial;
    font-style: italic;
}
h2, h3, h4, h5, h6
{
	font-weight: normal;
}
h3
{
    margin-top: 1em;
}

/* p 标签
--------------------------------------------------*/

p
{
    text-indent: 0em;
    text-align: justify;
    margin: 0em;
    padding: 0em 1em 1em 1em;
    background-color: #8A8243;/*为元素提供背景色，能确保该元素在不同的硬件设备上 正确伸展并布局*/
}
div#top1 p
{
    background-color: #406010;
    text-indent: 2em;
    text-align: justify;
    margin: 0em;
    padding: 0em 0em 0.5em 0em;/*该行可以影响该元素内图片的宽度，应确保 0.5em 与 javascript 脚本中的设置一致
且要注意：设置左右 (宽度)，也会导致该元素在脚本操作之后的 (高度) 发生变化。*/
}
div#box > p,div#topa > p,div#middlea > p
{
    display: none;
}
div#floadata p
{
    text-align: center;
}
dl span
{
    color: #CC0000;
}
/* ul 标签
----------------------------------------------------*/
ul
{
    list-style: none;
}
li
{
    text-align: justify;
}
.tag2 span:first-child
{
    background-color: Yellow;
}
.shangpin > li > span:first-child
{
    background-color: #CC9900;
}
/* img 标签
--------------------------------------------------*/

img 
{
    float: left;
    width: 100%;
    height: auto;
    max-height: 30em;
    min-height: 1em;
    
    margin: 0em;
    cursor: pointer;
    
    vertical-align: text-top;
}
div#middle2 .tag1 img,div#middle2 .tag2 img,div#middle2 .tag3 img
{
    width: 50%;
    height: auto;
    margin: 0em 0% 0em 0%;
}
div#divmenu img /*注意：不要设置该选择器的高度为 auto 它会影响top2中菜单menu控件中的图片尺寸 导致页面布局变形*/
{
    width: 100%;
    height: 0.1em;
    min-height: 0.0em;
    margin: 0.0em; /*设置该边界值会导致 产生水平条*/
}
div#divmenu a
{
    margin: 0em;
    padding: 0em;
}
div#floadata img
{
    width: 6em;
    height: 3em;
}

/* input 标签
---------------------------------------------------*/
input[type="text"]
{
    height: 1.3em;
}
input[type="button"]
{
    width: 5em;
    height: 3em;
}
input[type="submit"]
{
    width: 5em;
    height: 3em;
    margin-right: 0.2em;
    margin-top: 0.5em;
}


/* a 标签
---------------------------------------------------*/
a
{
    padding: 0em 0.3em 0em 0.3em;
}
a:link
{
    color: Blue;
}
a:visited
{
    color: #800000;
}
a:hover
{
    background-color: Green;
    color: Yellow;
}
a:active
{
    color: Yellow;
}
a#backtop1 /*返回锚*/
{
    float: right;
    color: Blue;
    margin: 0em 1em 1em 0em;
}
a#backtop1:hover /*返回锚*/
{
    color: #FFFFFF;
    background-color: #7C6F57;
}

/* table 标签
---------------------------------------------------*/

td:hover
{
    background-color: #FFFFFF;
    text-decoration: underline;
}
tr:hover
{
    background-color: #C0C0C0;
}
table.customers /*自定义漂亮的表格*/
{   float: left; 
    font-size: 1em;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 96%;
    border-collapse: collapse;
}
table.customers td, table.customers th 
{
    border: 1px solid #98bf21;
    padding: 0.15em 0.3em 0.1em 0.2em;
}
table.customers th
{
    font-size: 1.1em;
    text-align: left;
    padding-top: 0.2em;
    padding-bottom: 0.15em;
    color: #ffffff;
}
table.customers th:last-child
{
    width: 10em;
}
table.customers tr.alt td
{
    color: #000000;
    background-color: #808000;
}
table.customers tr td:hover
{
    color: #FF22FF;
    background-color: #FFFFFF;
}

 
