@CHARSET "ISO-8859-1";

/* Reset CSS
 * --------------------------------------- */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

table {
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-weight: normal;
    font-style: normal;
}



ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
    margin: 0;
    padding: 0;
    color: #444;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}


/* Custom CSS
 * --------------------------------------- */
/* body{font-family: arial,helvetica;color: #333;color: rgba(0,0,0,0.5);}
.wrap{margin-left: auto;margin-right: auto;width: 960px;position: relative;}
h1{font-size: 6em;}
p{font-size: 2em;}
.intro p{width: 50%;margin: 0 auto;font-size: 1.5em;}
.section{text-align:center;} */



    #menu {
    position: fixed;
    bottom: 5rem;
    left: 2.5%;
    height: 16.25rem;
    z-index: 70;
    width: 13.75rem;
    padding: 0;
    margin: 0;
    
}

#menu li {
    display: inline-block;
    color: #404856;
    font-size: 1rem;
    
    margin-bottom: 10px;
    line-height: 35px;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

/* #menu li.active{background:#666;background: rgba(0,0,0, 0.5);color: #fff;} */


#menu li a {
    text-decoration: none;
    color: #404856;
    font-size: 1rem;
    border:1px solid #D8D8D8;
}

#menu li a:hover {
    color: #fff;
    font-size: 1rem;
    background: #175CA9;
}

#menu li.active a:hover {
    color: #fff;
    font-size: 1rem;
}

/* #menu li:hover{background: rgba(255,255,255, 0.8);} */
#menu li a,
#menu li.active a {
    padding: 5px 10px;
    display: block;
    
}

#menu li.active a {
    color: #404856;
    font-size: 1rem;
}

#menu li a:hover .yuandian {
    content: url('/static/index/images/in7.png');
}

#menu li.active .yuandian {
    content: url('/static/index/images/in7.png');
}

#menu li.active a {
    background: #175CA9;
    color: #fff;
}


#menu li:nth-of-type(1) a:hover .leftimg {
    content: url('/static/index/images/leftf1.png');
}
#menu li:nth-of-type(1).active .leftimg {
    content: url('/static/index/images/leftf1.png');
}

#menu li:nth-of-type(2) a:hover .leftimg {
    content: url('/static/index/images/leftf2.png');
}
#menu li:nth-of-type(2).active .leftimg {
    content: url('/static/index/images/leftf2.png');
}

#menu li:nth-of-type(3) a:hover .leftimg {
    content: url('/static/index/images/leftf3.png');
}
#menu li:nth-of-type(3).active .leftimg {
    content: url('/static/index/images/leftf3.png');
}

#menu li:nth-of-type(4) a:hover .leftimg {
    content: url('/static/index/images/leftf4.png');
}
#menu li:nth-of-type(4).active .leftimg {
    content: url('/static/index/images/leftf4.png');
}
/*li:nth-of-type(2)*/



/* Extensions preview menu
 * --------------------------------------- */
.preview-extensions-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    border-top: 0;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.8);
}

.preview-extensions-men li {
    display: inline-block;
    margin: 0;
}

.preview-extensions-menu li a {
    padding: .9375rem 1.5625rem;
    display: block;
}

.preview-buy-extension {
    background: #3cc63c;
}

.preview-more-extensions {
    background: #fff;
}

.preview-buy-extension a {
    color: #fff;
}

.preview-buy-extension:hover {
    background-color: #1a961a;
}

.preview-more-extensions a {
    color: #333;
}

.code {
    background: rgba(255, 255, 255, 0.7);
    padding: 0px 5px;
    line-height: 1.5625rem;
}


/* Style for our header texts
* --------------------------------------- */
/* h1{font-size: 5em;font-family: arial,helvetica;color: #fff;margin:0;}
.section p,
.intro p{color: #fff;} */

/* Centered texts in each section
* --------------------------------------- */
/* .section{text-align:center;} */


/* Bottom menu
* --------------------------------------- */
/* #infoMenu li a {color: #fff;} */

/* Sections backgrounds