/*****************************************************************************************
  作者：张太红
  日期：2017年03月17日
*****************************************************************************************/
/*****************************************************************************************
  第一部分：导航栏
*****************************************************************************************/

/** 导航栏背景及边框 **/
.navbar {
    background-color: #034D6A;
    border-radius: 0;
    border: 0;
}

/*****************************************************************************************
  功能：响应式navbar-brand image CSS
  调整navbar-brand padding：1、让logo图片的有更多的显示区域；2、解决firefox bug
  添加100% height和width auto：作用类似bootstrap img-responsive class，使得logo图片大小自适应
  增加brand-name padding：让网站名称居中显示
*****************************************************************************************/
.navbar-brand {
    padding: 4px;
}

.navbar-brand > img {
    height: 100%;
    padding-top: 4px;
    color: #000000;
    width: auto;
}

.brand-name {
    padding: 15px;
}

.brand-name p {
    color: #fff;
}

.brand-name p:hover {
    color: #000;
}

/* 导航栏下拉菜单背景颜色, 与导航栏背景颜色相同 */
.dropdown-menu {
    background-color: #034D6A;
}

/* 导航栏下拉菜单背景颜色, 与导航栏背景颜色相同，手机模式 */
.navbar-right > li {
    background-color: #034D6A;
    color: #ffffff;
}

/** 导航栏菜单、按钮 **/
#nav-list a {
    color: #fff;
    text-align: center;
}

#nav-list p {
    color: #000;
    margin-top: 15px;
    text-align: center;
}

#nav-list a:hover {
    background: #979797;
}

#nav-list a:active {
    background: #61122f;
}

.actived {
    background: #FAFFFA;
}

#nav-list > li.actived > a {
    color: #61122f;
}

.navbar-header button.navbar-toggle .navbar-header .icon-bar {
    border: 1px solid #61122f;
}

/** 折叠的导航菜单展开后与导航栏之间的分隔线颜色 **/
.navbar-default .navbar-collapse {
    border-top-color: #61122f;
}

/*****************************************************************************************
  第三部分：页面主体
*****************************************************************************************/

/* 主体容器 */
.container .jumbotron {
    padding: 0px;
    box-shadow: 0 0 5px #3F0C1F;
    border: 1px solid #3F0C1F;
    margin-bottom: 15px;
}

/* 增加主体容器的行间距 */
.row-space {
    height: 30px;
}

#slide {
    margin-top: -5px;
    margin-bottom: 15px;
}

.carousel-caption > h3 {
    color: #034D6A;
}

.carousel-caption > p {
    color: #034D6A;
}

/* 四个缩略图导航器： 品种列表、品种分布、品种画册、品种视频 */
#thumbnails {
    width: 100%;
    position: relative;
    border: 2px solid #3F0C1F;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 0px;
    padding-top: 62.5%;
    -webkit-box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
    box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
}

#thumbnails:hover {
    box-shadow: 0 1px 2px 2px #666666;
}

#thumbnails span {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    text-transform: uppercase;
    background-color: #034D6A;
    color: #fff;
    opacity: 0.7;
}

.list {
    background: url("/static/breeds/images/breeds_list.png");
}

.distribution {
    background-image: url("/static/breeds/images/breeds_distribution.png");
}

.video {
    background-image: url("/static/breeds/images/breeds_video.png");
}

.album {
    background-image: url("/static/breeds/images/breeds_album.png");
}

/*****************************************************************************************
  第四部分：页脚
*****************************************************************************************/
.footer {
    margin-top: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #034D6A;
    border-top: 0;
    color: #ffffff;
    font-size: 0.9em;
}

.footer div.row {
    margin-bottom: 35px;
}

#project, #organization, #objective {
    line-height: 2;
}

#project > span, #organization > span, #objective > span {
    font-size: 1.3em;
}

#objective {
    font-style: italic;
}

/*****************************************************************************************
  品种分布：国旗
*****************************************************************************************/
.flag {
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid #3F0C1F;
    -webkit-box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
    box-shadow: rgba(0, 0, 0, 0.20) 0 5px 5px;
}

.flag:hover {
    box-shadow: 0 1px 2px 2px #666666;
}

.flag span {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 1em;
    background-color: #034D6A;
    color: #fff;
    opacity: 0.7;
}

.flag img {
    width: 100%;
}

/*****************************************************************************************
  品种分布：右上角圆圈显示一个国家的马品种数量
*****************************************************************************************/
.circle-text {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    padding-top: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: 0px;
}

.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: #034D6A;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.circle-text div {
    float: left;
    width: 100%;
    padding-top: 50%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    color: white;
}

video {
    width: 100%;
    height: auto;
}

.video-title {
    text-align: center;
    color: #034D6A;
}

.breed-photo {
    margin-top: 10px;
    display: inline-block;
}

.horse-name {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

hr {
    border: none;
    width: 100%;
    height: 10px;
    border-bottom: 1px solid #034D6A;
    box-shadow: 0 5px 5px -5px #333;
    margin: -10px auto 2px;
    margin-bottom: 10px;
}

.chinese-indent {
    text-indent: 2em;
}

.box-shadow {
    border: 2px solid #034D6A;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.75);
    margin-top: 10px;
    margin-bottom: 10px;
}