/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
<!--一流素材网收集整理，更多精彩请访问www.16sucai.com-->
                                                                  
*/

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { font: 14px Georgia, serif; background-image:url("../images/bg.jpg"); }
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #ddd; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #333; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }
h3 { text-align:center; padding:15px 0; }
h4 { padding:10px; }
a { outline: none; }

/* COMMON CLASSES */
#spacer { height:200px; clear:both; }
.break { clear:both; }
.info { padding:10px; }
.info a { color:#000; }
.box { width:399px; float:left; border-top:1px solid black; }
.example { width:90%; border-top:1px solid #1099E3; margin:0 auto; padding:10px 0; }

.viewcode { margin-top:10px; cursor:pointer; }
.viewcode img { margin:10px; }
.viewcode pre { position:absolute; z-index:999; background-color:#eee; width:350px; height:150px; overflow:auto; cursor:text;
	-moz-box-shadow: 0 0 10px #777; -webkit-box-shadow: 0 0 10px #777; padding:5px; display:none; font-size:12px; }

.accordion { }
.accordion a { display:block; padding:5px 10px; background-color:#592645; color:#DBD27D; text-decoration:none; }
.accordion a:hover { background-color:#85354C; }
.accordion div { background-color:#B5264F; color:#DBD27D; }
.accordion div p { padding:20px; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* CONTENT */
#content { }

/* CSS3 BOX */
#css3box { }

/* JQUERY BOX */
#jquerybox { border-left:1px solid black; }

/* EXAMPLE CLASSES */
.pulsate { width:100px; height:100px; background-color:#6CAB6C; position: relative; border:1px solid #38374A; margin-left:40px;
	-moz-border-radius: 12px; -webkit-border-radius:12px; }

.bounceimg { -moz-border-radius: 12px; -webkit-border-radius:12px; -moz-box-shadow: 0 0 10px #777; -webkit-box-shadow: 0 0 10px #777; } 

.nudge ul { list-style:none; }
.nudge ul li a { background-color: #fff; color: #afafaf; padding: 10px 0 10px 25px; display:block; text-decoration:none; border-top:1px solid #eee; }

/* CSS3 EXAMPLES */

/* Fade */
@-webkit-keyframes fade {
	0% {
		opacity: 1.0;
	}
	100% {
		opacity: 0.5;
	}
}

.css3_fadeimg:hover {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1s;
}

/* Bounce */
@-webkit-keyframes bounce {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 250px;
	}
}

.css3_bounce:hover img {
	-webkit-animation-name: bounce;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
}

/* Pulsate */
@-webkit-keyframes pulsate {
	0% { width:100px; }
	5% { width:150px; left:-25px; }
	10% { width:100px; left:0px; }
	15% { width:150px; left:-25px; }
	20% { width:100px; left:0px; }
	
	40% { width:100px; background-color:#38374A; }
	45% { width:150px; left:-25px; background-color:#38374A; } /* Too bad it doesn't remember the colour from the previous step */
	50% { width:100px; left:0px; background-color:#38374A; }
	55% { width:150px; left:-25px; background-color:#38374A; }
	60% { width:100px; left:0px; background-color:#38374A; }

	80% { width:100px; background-color:#45002D; }
	100% { width:100px; background-color:#45002D; } /* You'll always need to define 100% */
}

.css3_pulsate:hover {
	-webkit-animation-name: pulsate;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease-in-out;
}

/* Link Nudge */
.css3_nudge ul li a {
	-webkit-transition-property: color, background-color, padding-left;
	-webkit-transition-duration: 500ms, 500ms, 500ms;
}
			
.css3_nudge ul li a:hover {
	background-color: #efefef;
	color: #333;
	padding-left: 50px;
}

/* ACCORDION */
.css3_accordion { }
.css3_accordion a { }
.css3_accordion div {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 500ms ease;
}
.css3_accordion div:target {
	height: 105px;
}