/* Header Style */.codrops-top {	line-height: 24px;	font-size: 11px;	background: #fff;	background: rgba(255, 255, 255, 0.5);	text-transform: uppercase;	z-index: 9999;	position: relative;	font-family: Cambria, Georgia, serif;	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.codrops-top:before,.codrops-top:after {    content: " "; /* 1 */    display: table; /* 2 */}.codrops-top:after {    clear: both}.codrops-top a {	padding: 0px 10px;	letter-spacing: 1px;	color: #333;	display: inline-block;}.codrops-top a:hover {	background: rgba(255,255,255,0.6);}.codrops-top span.right {	float: right;}.codrops-top span.right a {	float: left;	display: block;}/* Demo Buttons Style */.codrops-demos {    text-align:center;	display: block;	line-height: 30px;	padding: 5px 0px;}.codrops-demos a {    display: inline-block;	margin: 0px 4px;	padding: 0px 6px;	color: #aaa;	line-height: 20px;		font-size: 12px;	font-weight: 700;	text-shadow: 1px 1px 1px #fff;	border: 1px solid #fff;	background: #ffffff; /* Old browsers */	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}.codrops-demos a:hover {	color: #333;	background: #fff;}.codrops-demos a:active {	background: #fff;}.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover {	background: #f0f0f0;	border-color: #d9d9d9;	color: #aaa;	box-shadow: 0 1px 0 rgba(255,255,255,0.3);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}.support-note span {	color: #ac375d;	font-size: 16px;	display: none;	font-weight: bold;	text-align: center;	padding: 5px 0;}.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions {	display: block;}::selection {    background: transparent; }::-moz-selection {    background: transparent; }.wrapper-demo {    margin: 60px 0 0 0;    *zoom: 1;    font-weight: 400;}.wrapper-demo:after {    clear: both;    content: "";    display: table;}/* DEMO 1 */.wrapper-dropdown-1 {    /* Size and position */    position: relative; /* Enable absolute positionning for children and pseudo elements */    width: 200px;    padding: 10px;    margin: 0 auto;    /* Styles */    background: #9bc7de;    color: #fff;    outline: none;    cursor: pointer;    /* Font settings */    font-weight: bold;}.wrapper-dropdown-1:after {    content: "";    width: 0;    height: 0;    position: absolute;    right: 16px;    top: 50%;    margin-top: -6px;    border-width: 6px 0 6px 6px;    border-style: solid;    border-color: transparent #fff;    }.wrapper-dropdown-1 .dropdown {    /* Size & position */    position: absolute;    top: 100%;    left: 0;    right: 0;    /* Styles */    background: #fff;    list-style: none;    font-weight: normal; /* Cancels previous font-weight: bold; */    /* Hiding */    opacity: 0;    pointer-events: none;}.wrapper-dropdown-1 .dropdown li a {    display: block;    text-decoration: none;    color: #9e9e9e;    padding: 10px 20px;}/* Hover state */.wrapper-dropdown-1 .dropdown li:hover a {    background: #f3f8f8;}/* Active state */.wrapper-dropdown-1.active .dropdown {    opacity: 1;    pointer-events: auto;}.wrapper-dropdown-1.active:after {    border-color: #9bc7de transparent;    border-width: 6px 6px 0 6px ;    margin-top: -3px;}.wrapper-dropdown-1.active {  background: #9bc7de;  background: -moz-linear-gradient(left,  #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));  background: -webkit-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: -o-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: -ms-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  background: linear-gradient(to right,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );}/* No CSS3 support */.no-opacity       .wrapper-dropdown-1 .dropdown,.no-pointerevents .wrapper-dropdown-1 .dropdown {    display: none;    opacity: 1; /* If opacity support but no pointer-events support */    pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity       .wrapper-dropdown-1.active .dropdown,.no-pointerevents .wrapper-dropdown-1.active .dropdown {    display: block;}/* DEMO 2 */.wrapper-dropdown-2 {    /* Size and position */    position: relative; /* Enable absolute positionning for children and pseudo elements */    width: 200px;    margin: 0 auto;    padding: 10px 15px;    /* Styles */    background: #fff;    border-left: 5px solid grey;    cursor: pointer;    outline: none;}.wrapper-dropdown-2:after {    content: "";    width: 0;    height: 0;    position: absolute;    right: 16px;    top: 50%;    margin-top: -3px;    border-width: 6px 6px 0 6px;    border-style: solid;    border-color: grey transparent;}.wrapper-dropdown-2 .dropdown {  /* Size & position */    position: absolute;    top: 100%;    left: -5px;    right: 0px;    /* Styles */    background: white;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;    list-style: none;    /* Hiding */    opacity: 0;    pointer-events: none;}.wrapper-dropdown-2 .dropdown li a {    display: block;    text-decoration: none;    color: #333;    border-left: 5px solid;    padding: 10px;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;}.wrapper-dropdown-2 .dropdown li:nth-child(1) a {     border-left-color: #00ACED;}.wrapper-dropdown-2 .dropdown li:nth-child(2) a {    border-left-color: #4183C4;}.wrapper-dropdown-2 .dropdown li:nth-child(3) a {    border-left-color: #3B5998;}.wrapper-dropdown-2 .dropdown li i {    margin-right: 5px;    color: inherit;    vertical-align: middle;}/* Hover state */.wrapper-dropdown-2 .dropdown li:hover a {    color: grey;}/* Active state */.wrapper-dropdown-2.active:after {    border-width: 0 6px 6px 6px;}.wrapper-dropdown-2.active .dropdown {    opacity: 1;    pointer-events: auto;}/* No CSS3 support */.no-opacity       .wrapper-dropdown-2 .dropdown,.no-pointerevents .wrapper-dropdown-2 .dropdown {    display: none;    opacity: 1; /* If opacity support but no pointer-events support */    pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity       .wrapper-dropdown-2.active .dropdown,.no-pointerevents .wrapper-dropdown-2.active .dropdown {    display: block;}/* DEMO 3 */.wrapper-dropdown-3 {    /* Size and position */    position: relative;    width: 200px;    margin: 0 auto;    padding: 10px;    /* Styles */    background: #fff;    border-radius: 7px;    border: 1px solid rgba(0,0,0,0.15);    box-shadow: 0 1px 1px rgba(50,50,50,0.1);    cursor: pointer;    outline: none;    /* Font settings */    font-weight: bold;    color: #8AA8BD;}.wrapper-dropdown-3:after {    content: "";    width: 0;    height: 0;    position: absolute;    right: 15px;    top: 50%;    margin-top: -3px;    border-width: 6px 6px 0 6px;    border-style: solid;    border-color: #8aa8bd transparent;}.wrapper-dropdown-3 .dropdown {  /* Size & position */    position: absolute;    top: 140%;    left: 0;    right: 0;    /* Styles */    background: white;    border-radius: inherit;    border: 1px solid rgba(0,0,0,0.17);    box-shadow: 0 0 5px rgba(0,0,0,0.1);    font-weight: normal;    -webkit-transition: all 0.5s ease-in;    -moz-transition: all 0.5s ease-in;    -ms-transition: all 0.5s ease-in;    -o-transition: all 0.5s ease-in;    transition: all 0.5s ease-in;    list-style: none;    /* Hiding */    opacity: 0;    pointer-events: none;}.wrapper-dropdown-3 .dropdown:after {    content: "";    width: 0;    height: 0;    position: absolute;    bottom: 100%;    right: 15px;    border-width: 0 6px 6px 6px;    border-style: solid;    border-color: #fff transparent;    }.wrapper-dropdown-3 .dropdown:before {    content: "";    width: 0;    height: 0;    position: absolute;    bottom: 100%;    right: 13px;    border-width: 0 8px 8px 8px;    border-style: solid;    border-color: rgba(0,0,0,0.1) transparent;    }.wrapper-dropdown-3 .dropdown li a {    display: block;    padding: 10px;    text-decoration: none;    color: #8aa8bd;    border-bottom: 1px solid #e6e8ea;    box-shadow: inset 0 1px 0 rgba(255,255,255,1);    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;}.wrapper-dropdown-3 .dropdown li i {    float: right;    color: inherit;}.wrapper-dropdown-3 .dropdown li:first-of-type a {    border-radius: 7px 7px 0 0;}.wrapper-dropdown-3 .dropdown li:last-of-type a {    border: none;    border-radius: 0 0 7px 7px;}/* Hover state */.wrapper-dropdown-3 .dropdown li:hover a {    background: #f3f8f8;}/* Active state */.wrapper-dropdown-3.active .dropdown {    opacity: 1;    pointer-events: auto;}/* No CSS3 support */.no-opacity       .wrapper-dropdown-3 .dropdown,.no-pointerevents .wrapper-dropdown-3 .dropdown {    display: none;    opacity: 1; /* If opacity support but no pointer-events support */    pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity       .wrapper-dropdown-3.active .dropdown,.no-pointerevents .wrapper-dropdown-3.active .dropdown {    display: block;}/* DEMO 4 */.wrapper-dropdown-4 {    /* Size and position */    position: relative;    width: 270px;    margin: 0 auto;    padding: 10px 10px 10px 30px;    /* Styles */    background: #fff;    border: 1px solid silver;    cursor: pointer;    outline: none;}.wrapper-dropdown-4:after {    content: "";    width: 0;    height: 0;    position: absolute;    right: 10px;    top: 50%;    margin-top: -3px;    border-width: 6px 6px 0 6px;    border-style: solid;    border-color: #ffaa9f transparent;}.wrapper-dropdown-4 .dropdown {    /* Size & position */    position: absolute;    top: 100%;    margin-top: 1px;    left: -1px;    right: -1px;    /* Styles */    background: white;    border: inherit;    border-top: none;    list-style: none;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;      /* Hiding */    opacity: 0;    pointer-events: none;}/* Red lines: the pseudo-elements way */.wrapper-dropdown-4 .dropdown:before,.wrapper-dropdown-4:before {    content: "";    width: 4px;    height: 100%;    position: absolute;    top: 0;    left: 15px;    border: 1px solid #ffaa9f;    border-top: none;    border-bottom: none;    z-index: 2;}/* Red lines: the gradients way *//*.wrapper-dropdown-4 .dropdown,.wrapper-dropdown-4 {  background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);}.wrapper-dropdown-4 .dropdown li:hover label {  background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5.3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);}*/.wrapper-dropdown-4 .dropdown li {    position: relative; /* Enable absolute positioning for checkboxes */}.wrapper-dropdown-4 .dropdown li label {    display: block;    padding: 10px 10px 10px 30px; /* Same padding as the button */    border-bottom: 1px dotted #1ccfcf;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;}.wrapper-dropdown-4 .dropdown li:last-of-type label {    border: none;}.wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {    position: absolute;    display: block;    right: 10px;    top: 50%;    margin-top: -8px;}/* Hover state */.wrapper-dropdown-4 .dropdown li:hover label {    background: #f0f0f0;}/* Checked state */.wrapper-dropdown-4 .dropdown li input:checked ~ label {    color: grey;    text-decoration: line-through;}/* Active state */.wrapper-dropdown-4.active:after {    border-width: 0 6px 6px 6px;}.wrapper-dropdown-4.active .dropdown {    opacity: 1;    pointer-events: auto;}/* No CSS3 support */.no-opacity       wrapper-dropdown-4 .dropdown,.no-pointerevents .wrapper-dropdown-4 .dropdown {    display: none;    opacity: 1; /* If opacity support but no pointer-events support */    pointer-events: auto; /* If pointer-events support but no pointer-events support */}.no-opacity       .wrapper-dropdown-4.active .dropdown,.no-pointerevents .wrapper-dropdown-4.active .dropdown {    display: block;}/* DEMO 5 */.wrapper-dropdown-5 {    /* Size & position */    position: relative;    width: 160px;    margin: 0 auto;    padding: 12px 15px;    /* Styles */    background: #fff;    border-radius: 5px; border:1px solid #ccc;   box-shadow: 0 1px 0 rgba(0,0,0,0.2);    cursor: pointer;    outline: none;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;}.wrapper-dropdown-5:after { /* Little arrow */    content: "";    width: 0;    height: 0;    position: absolute;    top: 50%;    right: 15px;    margin-top: -3px;    border-width: 6px 6px 0 6px;    border-style: solid;    border-color: #ccc transparent;}.wrapper-dropdown-5 .dropdown {    /* Size & position */    position: absolute;    top: 100%;    left: 0;    right: 0;    /* Styles */    background: #fff;    border-radius: 0 0 5px 5px;    border: 1px solid rgba(0,0,0,0.2);    border-top: none;    border-bottom: none;    list-style: none;    -webkit-transition: all 0.3s ease-out;    -moz-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;    /* Hiding */    max-height: 0;    overflow: hidden;}.wrapper-dropdown-5 .dropdown li {    padding: 0 10px ;}.wrapper-dropdown-5 .dropdown li a {    display: block;    text-decoration: none;    color: #333;    padding: 10px 0;    transition: all 0.3s ease-out;    border-bottom: 1px solid #e6e8ea;}.wrapper-dropdown-5 .dropdown li:last-of-type a {    border: none;}.wrapper-dropdown-5 .dropdown li i {    margin-right: 5px;    color: inherit;    vertical-align: middle;}/* Hover state */.wrapper-dropdown-5 .dropdown li:hover a {    color: #57a9d9;}/* Active state */.wrapper-dropdown-5.active {    border-radius: 5px 5px 0 0;    background: #4cbeff;    box-shadow: none;    border-bottom: none;    color: white;}.wrapper-dropdown-5.active:after {    border-color: #82d1ff transparent;}.wrapper-dropdown-5.active .dropdown {    border-bottom: 1px solid rgba(0,0,0,0.2);    max-height: 400px;}/* No CSS3 support: none *//*：这只是演示代码。源码下载链接: http://www.bootstrapmb.com/item/1219(这个说明仅在演示里会看到,下载的源码里没有)*/