/* 以下是类名为'wrapper'的元素的样式规则 */
.wrapper{ 
    width: 424px; /* 设置元素的宽度为424px */
    margin: 10px auto; /* 上下外边距为10px，左右外边距自动，使元素在父容器中水平居中 */
    zoom:1; /* 触发IE浏览器的hasLayout属性，用于解决一些布局相关的兼容性问题，通常和浮动、定位等布局方式结合使用 */
    position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续子元素基于此进行绝对定位等操作 */
}

/* 以下是类名为'tabbody'的元素的样式规则 */
.tabbody{
    height:225px; /* 设置元素的高度为225px */
}

/* 以下是类名为'tabbody'下的类名为'panel'的子元素的样式规则 */
.tabbody.panel { 
    position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 body 元素定位 */
    width:100%; /* 宽度占满父元素的宽度 */
    height:100%; /* 高度占满父元素的高度 */
    background: #fff; /* 设置背景颜色为白色 */
    display: none; /* 初始状态下不显示该元素，可通过后续添加类名等方式改变显示状态 */
}

/* 以下是类名为'tabbody'下具有'focus'类名的元素的样式规则，可能用于切换显示不同面板等交互场景 */
.tabbody.focus { 
    display: block; /* 当元素具有'focus'类名时，显示该元素，覆盖上面'.panel'中设置的'display: none'样式 */
}

/* 以下是 body 元素的样式规则，会应用到整个页面文档 */
body{
    font-size: 12px; /* 设置页面默认的字体大小为12px */
    color: #888; /* 设置页面文本颜色为灰色（#888） */
    overflow: hidden; /* 隐藏页面的滚动条，防止内容超出可视区域时出现滚动条 */
}

/* 以下是 input 和 label 元素的样式规则，使它们在垂直方向上居中对齐 */
input,label{
    vertical-align:middle /* 设置元素在垂直方向上的对齐方式为居中对齐，常用于表单元素等在同一行显示时的布局调整 */
}

/* 以下是类名为'clear'的元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */
.clear{
    clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */
}

/* 以下是类名为'pl'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */
.pl{
    padding-left: 18px;
    padding-left: 23px\9; /* 在IE浏览器下，设置左边距为23px，正常浏览器下为18px */
}

/* 以下是 id 为'imageList'的元素的样式规则 */
#imageList {
    width: 420px; /* 设置元素的宽度为420px */
    height: 215px; /* 设置元素的高度为215px */
    margin-top: 10px; /* 设置元素的上外边距为10px，使其与上方元素间隔一定距离 */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */
    overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多内容且希望在垂直方向可滚动查看的区域 */
}

/* 以下是 id 为'imageList'下的 div 元素的样式规则 */
#imageList div {
    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
    width: 100px; /* 设置元素的宽度为100px */
    height: 95px; /* 设置元素的高度为95px */
    margin: 5px 10px; /* 设置元素的外边距，上下外边距为5px，左右外边距为10px，用于控制元素之间的间隔距离 */
}

/* 以下是 id 为'imageList'下的 img 元素的样式规则 */
#imageList img {
    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */
    border: 2px solid white; /* 为图片添加白色的2px边框 */
}

/* 以下是类名为'bgarea'的元素的样式规则 */
.bgarea{
    margin: 10px; /* 设置元素的上下左右外边距均为10px，使其与周围元素间隔一定距离 */
    padding: 5px; /* 设置元素的内边距为5px，在元素内部四周添加间隔空间 */
    height: 84%; /* 设置元素的高度占父元素高度的84%，用于根据父元素高度自适应自身高度 */
    border: 1px solid #A8A297; /* 为元素添加1px的边框，边框颜色为#A8A297 */
}

/* 以下是类名为'content'下的 div 元素的样式规则 */
.content div{
    margin: 10px 0 10px 5px; /* 设置元素的外边距，上外边距和下外边距为10px，左外边距为5px，右外边距为0，用于控制元素在水平和垂直方向的间隔位置 */
}

/* 以下是类名为'content'下的类名为'iptradio'的元素的样式规则 */
.content.iptradio{
    margin: 0px 5px 5px 0px; /* 设置元素的外边距，上外边距为0px，右外边距为5px，下外边距为5px，左外边距为0px，用于控制元素在水平和垂直方向的间隔位置 */
}

/* 以下是类名为'txt'的元素的样式规则 */
.txt{
    width:280px; /* 设置元素的宽度为280px */
}

/* 以下是类名为'wrapcolor'的元素的样式规则 */
.wrapcolor{
    height: 19px; /* 设置元素的高度为19px */
}

/* 以下是类名为'color'的 div 元素的样式规则 */
div.color{
    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
    margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
}

/* 以下是 id 为'colorPicker'的元素的样式规则 */
#colorPicker{
    width: 17px; /* 设置元素的宽度为17px */
    height: 17px; /* 设置元素的高度为17px */
    border: 1px solid #CCC; /* 为元素添加1px的边框，边框颜色为#CCC */
    display: inline-block; /* 将元素设置为行内块级元素，使其可以在一行内与其他行内元素或行内块元素一起排列，同时又能设置宽度、高度等块级元素的属性 */
    border-radius: 3px; /* 设置元素的边框圆角半径为3px，使其边角呈现圆形效果 */
    box-shadow: 2px 2px 5px #D3D6DA; /* 为元素添加阴影效果，水平和垂直方向偏移2px，模糊半径为5px，阴影颜色为#D3D6DA */
    margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
}

/* 以下是类名为'alignment'的 div 元素以及 id 为'custom'的元素的样式规则，通过属性选择器 hack（\9）为IE浏览器单独设置左边距，用于适配不同浏览器下的布局差异 */
div.alignment,#custom{
    margin-left: 23px;
    margin-left: 28px\9; /* 在IE浏览器下，设置左边距为28px，正常浏览器下为23px */
}

/* 以下是 id 为'custom'下的 input 元素的样式规则 */
#custom input{
    height: 15px; /* 设置元素的高度为15px */
    min-height: 15px; /* 设置元素的最小高度为15px，确保在某些情况下元素高度不会小于此值 */
    width:20px; /* 设置元素的宽度为20px */
}

/* 以下是 id 为'repeatType'的元素的样式规则 */
#repeatType{
    width:100px; /* 设置元素的宽度为100px */
}

/* 以下是 id 为'imgManager'的元素的样式规则，用于图片管理相关的区域样式设置 */
#imgManager {
    width: 100%; /* 宽度占满父元素的宽度 */
    height: 225px; /* 设置元素的高度为225px */
}

/* 以下是 id 为'imgManager'下的 id 为'imageList'的子元素的样式规则 */
#imgManager #imageList{
    width: 100%; /* 宽度占满父元素的宽度 */
    overflow-x: hidden; /* 隐藏水平方向的溢出内容 */
    overflow-y: auto; /* 允许垂直方向出现滚动条以查看超出部分内容，常用于展示较多图片且希望在垂直方向可滚动查看的区域 */
}

/* 以下是 id 为'imgManager'下的 ul 元素的样式规则 */
#imgManager ul {
    display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
    list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
    margin: 0; /* 设置元素的外边距为0，使其紧密排列 */
    padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
}

/* 以下是 id 为'imgManager'下的 li 元素的样式规则 */
#imgManager li {
    float: left; /* 使元素向左浮动，常用于实现多栏布局，让后续元素围绕其进行排列 */
    display: block; /* 将元素显示为块级元素，独占一行，常用于列表等元素的布局设置 */
    list-style: none; /* 清除默认的列表样式标记（如圆点、数字等） */
    padding: 0; /* 设置元素的内边距为0，去除默认的内边距 */
    width: 113px; /* 设置元素的宽度为113px */
    height: 113px; /* 设置元素的高度为113px */
    margin: 9px 0 0 19px; /* 设置元素的外边距，上外边距为9px，右外边距为0，下外边距为0，左外边距为19px，用于控制元素之间的间隔距离 */
    background-color: #eee; /* 设置元素的背景颜色为浅灰色（#eee） */
    overflow: hidden; /* 超出元素尺寸范围的内容将被隐藏 */
    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该列表项元素可点击交互 */
    position: relative; /* 将元素的定位方式设置为相对定位，相对其原本在文档流中的位置进行定位调整，方便后续内部绝对定位元素基于此进行定位 */
}

/* 以下是 id 为'imgManager'下具有'clearFloat'类名的 li 元素的样式规则，用于清除浮动带来的影响，确保父元素能正确包裹浮动的子元素，保持布局的完整性 */
#imgManager li.clearFloat {
    float: none; /* 取消元素的浮动属性 */
    clear: both; /* 清除左右两侧的浮动元素影响，使该元素不受之前浮动元素的干扰，另起一行显示 */
    display: block; /* 将元素显示为块级元素，独占一行 */
    width:0; /* 设置元素的宽度为0 */
    height:0; /* 设置元素的高度为0 */
    margin: 0; /* 设置元素的外边距为0 */
    padding: 0; /* 设置元素的内边距为0 */
}

/* 以下是 id 为'imgManager'下的 li 元素内的 img 元素的样式规则 */
#imgManager li img {
    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该图片元素可点击交互 */
}

/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.icon {
    cursor: pointer; /* 设置鼠标指针样式为手型，提示用户该元素可点击交互 */
    width: 113px; /* 设置元素的宽度为113px */
    height: 113px; /* 设置元素的高度为113px */
    position: absolute; /* 将元素设置为绝对定位，其位置将基于最近的已定位（非 static 定位）的祖先元素来确定，如果没有则相对于 li 元素定位 */
    top: 0; /* 基于父元素（li 元素）顶部定位，垂直方向距离顶部0px */
    left: 0; /* 基于父元素（li 元素）左侧定位，水平方向距离左侧0px */
    z-index: 2; /* 设置元素的层叠顺序为2，使其在一定程度上可以覆盖其他层叠顺序较低的元素显示 */
    border: 0; /* 设置元素的边框宽度为0，即无边框 */
    background-repeat: no-repeat; /* 设置背景图片不重复平铺 */
}

/* 以下是 id 为'imgManager'下的 li 元素内的类名为'icon'的元素在鼠标悬停时的样式规则 */
#imgManager li.icon:hover {
    width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */
    height: 107px; /* 鼠标悬停时，设置元素的高度为107px */
    border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */
}

/* 以下是 id 为'imgManager'下具有'selected'类名的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.selected.icon {
    background-image: url(images/success.png); /* 设置元素的背景图片，用于显示特定的选中标识等视觉效果 */
    background-position: 75px 75px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角75px */
}

/* 以下是 id 为'imgManager'下具有'selected'类名且鼠标悬停的 li 元素内的类名为'icon'的元素的样式规则 */
#imgManager li.selected.icon:hover {
    width: 107px; /* 鼠标悬停时，设置元素的宽度为107px */
    height: 107px; /* 鼠标悬停时，设置元素的高度为107px */
    border: 3px solid #1094fa; /* 鼠标悬停时，为元素添加3px的边框，边框颜色为#1094fa */
    background-position: 72px 72px; /* 设置背景图片在元素内的定位位置，水平和垂直方向均距离元素左上角72px，与未悬停时的背景位置有所变化，用于提供悬停交互的视觉效果变化 */
}