www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/041/library/stylesheets/style.css

    /* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* #Basic Styles
================================================== */
body {
	font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #707070;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	background-image: url(../images/ui/texture-body.png);
	background-repeat: repeat;
}

/* #Typography
================================================== */
@font-face {
    font-family: 'BitterRegular';
    src: url('../fonts/Bitter-Regular-webfont.eot');
    src: url('../fonts/Bitter-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bitter-Regular-webfont.woff') format('woff'),
         url('../fonts/Bitter-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Bitter-Regular-webfont.svg#BitterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BitterItalic';
    src: url('../fonts/Bitter-Italic-webfont.eot');
    src: url('../fonts/Bitter-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bitter-Italic-webfont.woff') format('woff'),
         url('../fonts/Bitter-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Bitter-Italic-webfont.svg#BitterItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BitterBold';
    src: url('../fonts/Bitter-Bold-webfont.eot');
    src: url('../fonts/Bitter-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bitter-Bold-webfont.woff') format('woff'),
         url('../fonts/Bitter-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Bitter-Bold-webfont.svg#BitterBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
	overflow:hidden;
	color: #252525;
	font-weight: normal;
	font-family: 'BitterRegular';
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {font-weight:normal !important;font-family: 'BitterBold';}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {font-weight:normal;font-family: 'BitterItalic';}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color:#999999 !important;}
h1 {
	font-size: 26px;
	line-height: 30px;
	margin-bottom: 20px;
}
h2 {
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 20px;
}
h3 {
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 20px;
}
h4 {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 16px;
}
h5 {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 14px;
}
h6 {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 12px;
}
.subheader {
	color: #999999;
}
.headline {
	border-bottom:1px solid #d3d3d3;
	padding-bottom:10px;
	margin-bottom:15px;
}
p {
	margin: 0 0 20px 0;
}
p img {
	margin: 0;
}
em {
	font-style: italic;
}
strong {font-weight: bold;}
small {font-size: 80%;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}

/*	Embed */
iframe, object, embed{max-width: 100%;}

/*	Blockquotes  */
blockquote, blockquote p {
	color: #707070;
	font-style: italic;
}
blockquote p {
	margin-bottom: 10px;
}
blockquote {
	margin: 0 0 26px;
	padding: 9px 20px 6px 19px;
	border-left: 5px solid #d3d3d3;
}
blockquote cite {
	display: block;
	font-size: 12px;
	color: #252525;
	font-weight: bold;
}
blockquote cite:before {
	content: "\2014 \0020";
}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {color: #252525;}
blockquote cite a:hover { color:#00bff3;}
hr {
	border: solid #d3d3d3;
	border-width: 1px 0 0;
	clear: both;
	margin: 30px 0 40px;
	height: 0;
}
hr.space {
	border:none !important;
	height:10px;
}
/* #Base 960 Grid
================================================== */
.container {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
.container .column,  .container .columns {
	float: left;
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}
.row {
	margin-bottom: 20px;
}
/* Nested Column Classes */
.column.alpha, .columns.alpha {
	margin-left: 0;
}
.column.omega, .columns.omega {
	margin-right: 0;
}
/* Base Grid */
.container .one.column,  .container .one.columns {
	width: 40px;
}
.container .two.columns {
	width: 100px;
}
.container .three.columns {
	width: 160px;
}
.container .four.columns {
	width: 220px;
}
.container .five.columns {
	width: 280px;
}
.container .six.columns {
	width: 340px;
}
.container .seven.columns {
	width: 400px;
}
.container .eight.columns {
	width: 460px;
}
.container .nine.columns {
	width: 520px;
}
.container .ten.columns {
	width: 580px;
}
.container .eleven.columns {
	width: 640px;
}
.container .twelve.columns {
	width: 700px;
}
.container .thirteen.columns {
	width: 760px;
}
.container .fourteen.columns {
	width: 820px;
}
.container .fifteen.columns {
	width: 880px;
}
.container .sixteen.columns {
	width: 940px;
}
.container .one-third.column {
	width: 300px;
}
.container .two-thirds.column {
	width: 620px;
}
/* Offsets */
.container .offset-by-one {
	padding-left: 60px;
}
.container .offset-by-two {
	padding-left: 120px;
}
.container .offset-by-three {
	padding-left: 180px;
}
.container .offset-by-four {
	padding-left: 240px;
}
.container .offset-by-five {
	padding-left: 300px;
}
.container .offset-by-six {
	padding-left: 360px;
}
.container .offset-by-seven {
	padding-left: 420px;
}
.container .offset-by-eight {
	padding-left: 480px;
}
.container .offset-by-nine {
	padding-left: 540px;
}
.container .offset-by-ten {
	padding-left: 600px;
}
.container .offset-by-eleven {
	padding-left: 660px;
}
.container .offset-by-twelve {
	padding-left: 720px;
}
.container .offset-by-thirteen {
	padding-left: 780px;
}
.container .offset-by-fourteen {
	padding-left: 840px;
}
.container .offset-by-fifteen {
	padding-left: 900px;
}



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
	width: 768px;
}
.container .column,  .container .columns {
	margin-left: 10px;
	margin-right: 10px;
}
.column.alpha, .columns.alpha {
	margin-left: 0;
	margin-right: 10px;
}
.column.omega, .columns.omega {
	margin-right: 0;
	margin-left: 10px;
}
.alpha.omega {
	margin-left: 0;
	margin-right: 0;
}
.container .one.column,  .container .one.columns {
	width: 28px;
}
.container .two.columns {
	width: 76px;
}
.container .three.columns {
	width: 124px;
}
.container .four.columns {
	width: 172px;
}
.container .five.columns {
	width: 220px;
}
.container .six.columns {
	width: 268px;
}
.container .seven.columns {
	width: 316px;
}
.container .eight.columns {
	width: 364px;
}
.container .nine.columns {
	width: 412px;
}
.container .ten.columns {
	width: 460px;
}
.container .eleven.columns {
	width: 508px;
}
.container .twelve.columns {
	width: 556px;
}
.container .thirteen.columns {
	width: 604px;
}
.container .fourteen.columns {
	width: 652px;
}
.container .fifteen.columns {
	width: 700px;
}
.container .sixteen.columns {
	width: 748px;
}
.container .one-third.column {
	width: 236px;
}
.container .two-thirds.column {
	width: 492px;
}
/* Offsets */
.container .offset-by-one {
	padding-left: 48px;
}
.container .offset-by-two {
	padding-left: 96px;
}
.container .offset-by-three {
	padding-left: 144px;
}
.container .offset-by-four {
	padding-left: 192px;
}
.container .offset-by-five {
	padding-left: 240px;
}
.container .offset-by-six {
	padding-left: 288px;
}
.container .offset-by-seven {
	padding-left: 336px;
}
.container .offset-by-eight {
	padding-left: 384px;
}
.container .offset-by-nine {
	padding-left: 432px;
}
.container .offset-by-ten {
	padding-left: 480px;
}
.container .offset-by-eleven {
	padding-left: 528px;
}
.container .offset-by-twelve {
	padding-left: 576px;
}
.container .offset-by-thirteen {
	padding-left: 624px;
}
.container .offset-by-fourteen {
	padding-left: 672px;
}
.container .offset-by-fifteen {
	padding-left: 720px;
}
}


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
.container {
	width: 300px;
}
.container .columns,  .container .column {
	margin: 0;
}
.container .one.column,  .container .one.columns,  .container .two.columns,  .container .three.columns,  .container .four.columns,  .container .five.columns,  .container .six.columns,  .container .seven.columns,  .container .eight.columns,  .container .nine.columns,  .container .ten.columns,  .container .eleven.columns,  .container .twelve.columns,  .container .thirteen.columns,  .container .fourteen.columns,  .container .fifteen.columns,  .container .sixteen.columns,  .container .one-third.column,  .container .two-thirds.column {
	width: 300px;
}
/* Offsets */
.container .offset-by-one,  .container .offset-by-two,  .container .offset-by-three,  .container .offset-by-four,  .container .offset-by-five,  .container .offset-by-six,  .container .offset-by-seven,  .container .offset-by-eight,  .container .offset-by-nine,  .container .offset-by-ten,  .container .offset-by-eleven,  .container .offset-by-twelve,  .container .offset-by-thirteen,  .container .offset-by-fourteen,  .container .offset-by-fifteen {
	padding-left: 0;
}
}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
	width: 420px;
}
.container .columns,  .container .column {
	margin: 0;
}
.container .one.column,  .container .one.columns,  .container .two.columns,  .container .three.columns,  .container .four.columns,  .container .five.columns,  .container .six.columns,  .container .seven.columns,  .container .eight.columns,  .container .nine.columns,  .container .ten.columns,  .container .eleven.columns,  .container .twelve.columns,  .container .thirteen.columns,  .container .fourteen.columns,  .container .fifteen.columns,  .container .sixteen.columns,  .container .one-third.column,  .container .two-thirds.column {
	width: 420px;
}
}
/* #Clearing
================================================== */

    /* Self Clearing Goodness */
.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,  .clearfix:after,  .row:before,  .row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.row:after,  .clearfix:after {
	clear: both;
}
.row,  .clearfix {
	zoom: 1;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-tmp iframe, .fancybox-tmp object {
	vertical-align: top;
	padding: 0;
	margin: 0;
}
.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}
.fancybox-skin {
	position: relative;
	padding: 0;
	margin: 0;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.fancybox-opened {
	z-index: 8030;
}
.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
	padding: 0;
	margin: 0;
	position: relative;
	outline: none;
}
.fancybox-inner {
	overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}
.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 10px;
}
.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
}
.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url(../images/lightbox/fancybox_sprite.png);
}
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8020;
}
#fancybox-loading div {
	width: 44px;
	height: 44px;
	background-image: url(../images/lightbox/fancybox_loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}
.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer; /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
	background-color: transparent;
	background-image: url(../images/lightbox/blank.gif);
}
.fancybox-prev {
	left: 0;
}
.fancybox-next {
	right: 0;
}
.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}
.fancybox-prev span {
	left: 20px;
	background-position: 0 -36px;
}
.fancybox-next span {
	right: 20px;
	background-position: 0 -72px;
}
.fancybox-nav:hover span {
	visibility: visible;
}
.fancybox-tmp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	padding: 0;
	overflow: visible;
	visibility: hidden;
}
/* Overlay helper */

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: #000;
}
#fancybox-overlay.overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}
/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}
.fancybox-opened .fancybox-title {
	visibility: visible;
}
.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8030;
	text-align: center;
}
.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}
.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}
.fancybox-title-inside-wrap {
	margin-top: 10px;
}
.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/* #Links
================================================== */
a, a:visited {
	-webkit-transition: color 0.1s ease-in-out;
	-moz-transition: color 0.1s ease-in-out;
	-o-transition: color 0.1s ease-in-out;
	-ms-transition: color 0.1s ease-in-out;
	-transition: color 0.1s ease-in-out;
	transition: color 0.1s ease-in-out;
	color: #00bff3;
	text-decoration: none;
	outline: 0;
}
a:hover, a:focus {
	color: #252525;
	text-decoration: none;
	outline: 0;
}
p a, p a:visited {line-height: inherit;}

/* #Lists
================================================== */
ul, ol {margin-bottom: 20px;}
ul {list-style: none outside;}
ol {list-style: decimal;}
ol, ul.square, ul.circle, ul.disc {margin-left: 30px;}
ul.square {list-style: square outside;}
ul.circle {list-style: circle outside;}
ul.disc {list-style: disc outside;}
li { line-height: 21px; }
ul ul, ul ol,  ol ol, ol ul {margin: 4px 0 5px 30px;font-size: 90%;}
ul ul li, ul ol li,  ol ol li, ol ul li {margin-bottom: 6px;}

/* #Images
================================================== */

img.scale-with-grid {
	width: 100%;
	height: auto;
}
img {
	max-width: 100%;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}
.hover-overlay {}
img.float-left {
	float: left;
	margin: 0 20px 10px 0;
}
img.float-right {
	float: right;
	margin: 0 0 10px 20px;
}
img.float-center {
	float: none;
	clear: both;
	text-align: center;
	display: block;
	margin: 0 0 20px 0;
}
/* #Buttons
================================================== */
.button,  .button:visited {
	display: inline-block;
	text-decoration: none!important;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
	outline: none;
	line-height: normal;
	font-weight:bold;
	padding: 8px 14px;
	cursor: pointer;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	margin: 0 5px 20px 0;
	vertical-align: middle;
	border-style: solid;
	border-width: 1px;
	text-decoration: none;
}
.button.tiny {
	padding: 4px 10px !important;
	font-size: 11px;
}
.button.medium {
	padding: 9px 16px!important;
	font-size: 16px;
}
.button.big {
	padding: 11px 19px!important;
	font-size: 18px;
}
.button:hover {
	cursor: pointer;
	color: #FFF;
	text-decoration: none;
}
.button.black,.button.purple,.button.blue,.button.green,.button.orange,.button.pink,.button.white,.button.grey {
	background-image: url(../images/ui/button.png);
	background-repeat: repeat-x;
	background-position: left top;
}
.button.white {
	color: #555;
    border-color: #dedede #d8d8d8 #d3d3d3;
    text-shadow: 0 1px 0 #fff;
	background-color: #f5f5f5;
}
.button.white:hover {
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    text-shadow: 0 1px 0 #fdfdfd;
}
.button.grey {
	border-color: #b5b5b5 #a1a1a1 #8f8f8f;
	color: #555;
	text-shadow: 0 1px 0 #d4d4d4;
	background-color: #bdbdbd;
}
.button.grey:hover {
	color: #555;
    background: #c2c2c2;
    border-color: #989898 #8e8e8e #878787;
    text-shadow: 0 1px 0 #dadada;
}
.button.pink {
	color: #913944;
    border-color: #df6f8b #da5f75 #d55061;
    text-shadow: 0 1px 0 #f89ca9;
	background-color: #f67689;
}
.button.pink:hover {
	background: #f67c90;
    border-color: #c36079 #c25669 #c14e5c;
    text-shadow: 0 1px 0 #f9a6b4;
}
.button.orange {
	color: #996633;    
    border-color: #f5b74e #e5a73e #d6982f;
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
	background-color: #fecc5f;
}
.button.orange:hover {
    background: #fecb5e;
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
}
.button.green {
	color: #5d7731;    
    border-color: #adc671 #98b65b #87aa4a;
    color: #5d7731;
    text-shadow: 0 1px 0 #cfe5a4;
	background-color: #b7d770;
}
.button.green:hover {
    background: #b9d972;
    border-color: #8bb14d #83a648 #7d9e45;
    text-shadow: 0 1px 0 #d5e8aa;
}
.button.blue {
	color: #42788e;    
    border-color: #8dc5da #76b7cf #63abc7;
    text-shadow: 0 1px 0 #b6e6f9;
	background-color: #92dbf6;
}
.button.blue:hover {
    background: #92dbf6 !important;
    border-color: #7caec0 #68a3ba #5a9cb5;
    text-shadow: 0 1px 0 #bee9fa;
}
.button.purple {
	color: #7b5777;
    border-color: #bc9db9 #ad89aa #a1799d;
    color: #7b5777;
    text-shadow: 0 1px 0 #eacae6;
	background-color: #dfaeda;
}
.button.purple:hover {
    background: #e0b1db;
    border-color: #a482a0 #9b7897 #947090;
    text-shadow: 0 1px 0 #ecd0e9;
}
.button.black {
	color: #fff;
    border-color: #4c4c4c #313131 #1f1f1f;
    color: #fff;
    text-shadow: 0 1px 0 #2e2e2e;
	background-color: #525252;
}
.button.black:hover {
    background: #5a5a5a;
    border-color: #2c2c2c #1c1c1c #101010;
    text-shadow: 0 1px 0 #363636;
}
.button.full-width,  button.full-width,  input[type="submit"].full-width,  input[type="reset"].full-width,  input[type="button"].full-width {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,  input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/* #Forms
================================================== */

form {
	margin-bottom: 20px;
}
fieldset {
	margin-bottom: 20px;
}
input[type="text"], input[type="password"],  input[type="email"],  textarea,  select {
	border: 1px solid #ccc;
	padding: 6px 4px;
	outline: none;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #777;
	margin: 0;
	width: 210px;
	max-width: 100%;
	display: block;
	margin-bottom: 20px;
	background: #fff;
}
select {
	padding: 0;
}
input[type="text"]:focus,  input[type="password"]:focus,  input[type="email"]:focus,  textarea:focus {
	border: 1px solid #aaa;
	color: #444;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow: 0 0 3px rgba(0,0,0,.2);
}
textarea {
	min-height: 60px;
}
label,  legend {
	display: block;
	font-weight: normal;
	margin-bottom:5px;
}
select {
	width: 220px;
}
input[type="checkbox"] {
	display: inline;
}
label span,  legend span {
	font-weight: normal;
	font-size: 13px;
	color: #444;
}

/* #Tables
================================================== */
table {
	max-width: 100%;
	background-color: #FFF;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 20px;
	width:100%;
}
table th,
table td {
	padding: 8px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #dddddd;
}
table th {font-weight: bold; color:#252525;}
table thead th {vertical-align: bottom;}
table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0;
}
table tbody + tbody {border-top: 2px solid #dddddd;}
table tbody tr:hover td,
table tbody tr:hover th {background-color: #f5f5f5;}
.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapsed;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.table-bordered th,
.table-bordered td {border-left: 1px solid #dddddd;}
.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}
.table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}
.table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 4px;
     -moz-border-radius: 0 0 0 4px;
          border-radius: 0 0 0 4px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}

/* #Alert boxes and notice box
================================================== */
.error,
.alert,
.notice,
.success,
.info {
	padding: 8px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
	-o-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice        { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success       { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info          { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a          { color: #514721; }
.success a         { color: #264409; }
.info a            { color: #205791; }
.attention-unit {
	background-color: #FFF;
  padding: 30px 30px 10px 30px;
  margin-bottom: 30px;
  border:1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.attention-unit h3 {}
.attention-unit p {font-weight:normal;}

/* #Tabs
================================================== */
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs {position: relative;zoom: 1;margin-bottom: 30px;}
.ui-tabs .ui-tabs-nav {margin: 0px;padding: 0px;display: table;clear: both;}
.ui-tabs .ui-tabs-nav li {
	border-bottom:none !important;
	list-style: none;
	float: left;
	position: relative;
	padding: 0;
	white-space: nowrap;
	margin-top: 0px;
	margin-right: -1px;
	margin-bottom: -1px !important;
	margin-left: 0px;
	z-index:8;
}
.ui-tabs .ui-tabs-nav .ui-state-default {height: 39px;border-bottom:none !important;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {z-index:99;background-color: #FFF; border-top:1px solid #252525;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a h5 {color:#252525;}
.ui-tabs .ui-tabs-nav li.ui-state-disabled a {}
.ui-tabs .ui-tabs-nav li.ui-state-processing a {}
.ui-tabs .ui-tabs-nav li a h5 { margin:0px;line-height:39px; font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#707070;}
.ui-tabs .ui-tabs-nav li a {
	font-size:14px;
	color:#707070;
	line-height:39px;
	height: 38px;
	float: left;
	border-bottom:none;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #ddd;
	border-left-color: #ddd;
	padding-right: 15px;
	padding-left: 15px;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	padding: 15px;
	border: 1px solid #ddd;
	background-color: #FFF;
	background-image: none;
}
.ui-tabs .ui-tabs-hide {display: none !important;}

/* #Toggles
================================================== */
.main-toggles {margin-bottom:20px;}
.toggle {margin-bottom:5px;}
.toggle .ui-accordion-header {
	position: relative;
	height: 38px;
	line-height: 39px;
	border: 1px solid #ddd;
	display: block;
	cursor: pointer;
	padding: 0 10px 0 33px;
	background-color: #fff;
}
.toggle .ui-accordion-header:hover {border: 1px solid #666; outline:none;}
.toggle .ui-accordion-header:focus { outline:none;}
.toggle h5 {margin-bottom:0px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.toggle .toggle-content { padding:10px;border: 1px solid #ddd;border-top: none; background-color:#FFF;}
.toggle .ui-icon {
	display: block;
	position: absolute;
	width: 13px;
	height: 13px;
	left: 10px;
	top: 13px;
	background-image: url(../images/ui/ui-acc-togg-plus.png);
	background-repeat: no-repeat;
}
.toggle .ui-state-active .ui-icon {background-image: url(../images/ui/ui-acc-togg-minus.png);}

/* #Testimonialrotator
================================================== */
.testimonialrotator{ position:relative; margin-bottom:30px;}
.testimonialrotator .testimonial{ position:absolute; top:0; left:0;  display:none; }
.testimonialrotator .testimonial:first-child{  position:relative; display:block; }
.testimonial blockquote { margin:0px;}
.testimonial cite {}

/* #Twitter
================================================== */
.tweet {}
ul.tweet_list {}
ul.tweet_list li {
	background-image: url(../images/lists/social_small_twitter.png);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 30px;
	margin-bottom:20px;
}
ul.tweet_list li.tweet_first {}
ul.tweet_list li span.tweet_text {}
ul.tweet_list li span.tweet_time { display:block; margin-top:5px; text-transform:uppercase; font-size:80%;}
ul.tweet_list li span.tweet_time a {text-decoration: none;color: #595959 !important;}
ul.tweet_list li span.tweet_time a:hover {color:#00bff3 !important;}

/* #Primary navigation
================================================== */
.mobileMenu { display: none }

#primary-nav-holder {height: 35px;}

#primary-nav {margin: 0;padding: 0;list-style: none;line-height: 35px;}
#primary-nav a.current {color: #00bff3; border-top:1px solid #00bff3;}
#primary-nav li {float: left;position: relative;	z-index: 40; left:0px; margin-bottom:0px;}
#primary-nav li:hover { visibility: inherit; }
#primary-nav ul {position: absolute;top: -9999em; margin:0px; width:150px; /*THIS*/}
#primary-nav ul li { width: 100%;}
#primary-nav li:hover ul,
#primary-nav li.sfHover ul {top: 36px; z-index: 99;}


#primary-nav li:hover li ul,
#primary-nav li.sfHover li ul,
#primary-nav li li:hover li ul,
#primary-nav li li.sfHover li ul,
#primary-nav li li li:hover li ul,
#primary-nav li li li.sfHover li ul { top: -9999em; left:150px; /*THIS*/}

#primary-nav li li:hover ul,
#primary-nav li li.sfHover ul,
#primary-nav li li li:hover ul,
#primary-nav li li li.sfHover ul,
#primary-nav li li li li:hover ul,
#primary-nav li li li li.sfHover ul {top: -1px;}	
#primary-nav a {
	display: block;
	position: relative;
    border-bottom: none;
	padding: 0 15px;
	color: #b2b2b6;
	font-weight: bold;
	text-transform:uppercase;
	height: 35px;
	line-height: 35px;
}
#primary-nav a:hover,
#primary-nav li.sfHover > a,
#primary-nav li.current-cat > a,
#primary-nav li.current_page_item > a,
#primary-nav li.current-menu-item > a {
	color: #00bff3;
	text-decoration: none;
}

#primary-nav ul {
	padding: 3px 15px;
	/*background-color: #252525;*/
	background-image: url(../images/header/opacity-95.png);
	background-repeat: repeat;
}
#primary-nav ul li {
	margin:0px;
	height: 35px;
	line-height: 35px;
	float: none;
	background: none;
}
#primary-nav ul li:first-child { border-top: none; }
#primary-nav ul li a {
    color: #b2b2b6;
    font-weight: normal;
	text-transform:capitalize;
	line-height: 35px;
	height: 35px;
	padding: 0;
	text-decoration: none;
}
#primary-nav li.sfHover ul a {}
#primary-nav li.sfHover ul a:hover { color: #00bff3; }

#primary-nav a.sf-with-ul {padding-right: 2.25em;min-width: 1px;}
.sf-sub-indicator {
	position: absolute;
	display: block;
	right: .75em;
	top: 1.05em;
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
	background-image: url(../images/navigation/arrows-ffffff.png);
	background-repeat: no-repeat;
	background-position: -10px -100px;
}
a > .sf-sub-indicator {top: .8em;background-position: 0 -100px;}
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {background-position: -10px -100px;}
#primary-nav .sf-sub-indicator {background-position: -10px 0;}
#primary-nav a > .sf-sub-indicator {background-position: 0 0;}
#primary-nav a:focus > .sf-sub-indicator, #primary-nav a:hover > .sf-sub-indicator, #primary-nav a:active > .sf-sub-indicator, #primary-nav li:hover > a > .sf-sub-indicator, #primary-nav li.sfHover > a > .sf-sub-indicator {background-position: -10px 0;}

/* #Flexslider
================================================== */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li {margin-bottom:0px;}
/*.flexslider .slides img {width: 100%; display: block;}*/
.flexslider .slides img {max-width: 100%; display: block;}
.flexslider .slides img.float-right {margin-bottom:0px !important; margin-left:30px !important;}
.flexslider .slides img.float-left {margin-bottom:0px !important; margin-right:30px !important;}
.flex-pauseplay span {text-transform: capitalize;}

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

.no-js .slides > li:first-child {display: block;}

.flexslider {
	padding: 0;
	position: relative;
	zoom: 1;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.flexslider .slider-description { padding-top:50px;text-shadow: 0 1px 0 rgba(0,0,0,0.3);}
.flexslider .slider-description h3 {color:#FFF; margin-bottom:16px;}
.flexslider .slider-description h3 a {color:#00bff3;}
.flexslider .slider-description h3 a:hover {color:#fff;}

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

.flex-control-nav {
	box-shadow: inset 0 -5px 10px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:inset 0 -5px 10px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:inset 0 0 -5px 10px 0 rgba(0,0,0,0.1);
	-o-box-shadow:inset 0 0 -5px 10px 0 rgba(0,0,0,0.1);
	margin-top:-55px;
	width: 100%;
	position: absolute;
	text-align: center;
	height: 55px;
	line-height: 55px;
	background-image: url(../images/header/opacity-25.png);
	background-repeat: repeat;
}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline; line-height:13px;}
.flex-control-paging li a {
	width: 13px;
	height: 13px;
	display: block;
	cursor: pointer;
	text-indent: -9999px;
	background-image: url(../images/flexslider/bg_control_nav.png);
	background-repeat: no-repeat;
	background-position: 0px -26px;
}
.flex-control-paging li a:hover {
	background-image: url(../images/flexslider/bg_control_nav.png);
	background-position: 0px -13px;
	background-repeat: no-repeat;
}
.flex-control-paging li a.flex-active {
	cursor: default;
	background-image: url(../images/flexslider/bg_control_nav.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

/* #Filterable portfolio
================================================== */
#filters {
	display: block;
	width: 100%;
	margin-bottom:30px;
	padding-bottom:10px;
	border-bottom:1px solid #d3d3d3;
}
#filters ul li {
	display: inline;
	padding: 0 10px 0px 0;
	margin-bottom:10px;
}
#filters a {
	font-size:90%;
	color: #252525;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 4px 8px;
}
#filters a:hover {color:#707070;}
#filters a.selected {background: #00bff3;color: #FFF !important;}
#filterable-portfolio { min-height:400px; margin-bottom:30px;}

.portfolio-item { margin-bottom:20px;}
.portfolio-item h5 { border-bottom:1px solid #d3d3d3; margin-bottom:8px; padding-bottom:8px; font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold;}
.portfolio-item h5 a { color:#252525;}
.portfolio-item h5 a:hover { color:#00bff3;}
.portfolio-item img {width:100%; height:auto; margin-bottom:20px;}

.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}