/* General Demo Style */




@font-face {
    font-family: 'OswaldBook';
    src: url('../fonts/Oswald-Regular-webfont.eot');
    src: url('../fonts/Oswald-Regular-webfont.eot?') format('embedded-opentype'),
         url('../fonts/Oswald-Regular-webfont.woff') format('woff'),
         url('../fonts/Oswald-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Oswald-Regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, td, th, input, textarea, select, a {
	font-size:13px;
}


h1 {
	color: #F00;
	margin-bottom:20px;
	font-size:25px;
	line-height:30px;
	font-weight: normal;
	text-align:center;
	text-rendering:optimizelegibility;
	font-family: 'OswaldBook';
}
p {margin-top: 0px; margin-bottom: 20px; line-height:20px;}
a, a:visited, a b {
	color:#333;
	text-decoration: none;
	cursor:pointer;
}
a:hover {
	text-decoration:none;
	color:#F00;
}
a img { border: none; }

/*********** button ***********/


a.button, input.button { cursor: pointer; color:#F00; background:none; border:2px solid #000; font-size: 13px; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25); -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.25);}
a.button { display: inline-block; text-decoration: none; padding:7px 12px; }

input.button { margin:0; padding:6px 10px; }
a.button:hover, input.button:hover {background:#F00; border:2px solid #000; color:#000; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.buttons { border-top:1px dotted #333; overflow: auto; padding:15px 6px 0px 6px; margin-bottom: 20px; }
.buttons .left { float: left; text-align: left; }
.buttons .right { float: right; text-align: right; }
.buttons .center { text-align: center; margin-left: auto; margin-right: auto; }

/*********** // ***********/

*,
*:before,
*:after { 
    padding: 0; 
    margin: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}


/* 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/ */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1
}