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

	Project Name: VideoBlogger
	Project Description: WordPress theme for a media blog
	File Name: style.css
	Author: Adi Purdila
	Author URI: http://www.adipurdila.com
	Version: 1.0.0
	
**********************************************************************************/

/* ---------- RESET ---------- */

/* ---------- Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui ---------- */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

sup { font-size: 50%; }

a, a:hover { text-decoration: none; }

	a:hover { border-bottom: 1px dotted; }
	
form input, form textarea { outline: none; }





/* ---------- @FONT-FACE ---------- */
/*
@font-face {
    font-family: 'YanoneKaffeesatzThin';
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Thin-webfont.eot');
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Thin-webfont.woff') format('woff'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Thin-webfont.ttf') format('truetype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Thin-webfont.svg#YanoneKaffeesatzThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'YanoneKaffeesatzLight';
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.eot');
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.woff') format('woff'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.ttf') format('truetype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Light-webfont.svg#YanoneKaffeesatzLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}

@font-face {
    font-family: 'YanoneKaffeesatzBold';
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Bold-webfont.eot');
    src: url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Bold-webfont.woff') format('woff'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Bold-webfont.ttf') format('truetype'),
         url('../fonts/YanoneKaffeesatz/YanoneKaffeesatz-Bold-webfont.svg#YanoneKaffeesatzBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/WebSymbols/websymbols-regular-webfont.eot');
    src: url('../fonts/WebSymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/WebSymbols/websymbols-regular-webfont.woff') format('woff'),
         url('../fonts/WebSymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('../fonts/WebSymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}





/* ---------- TYPOGRAPHY ---------- */
body { font: 12px/18px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

h1 { font: 28px/34px "YanoneKaffeesatzRegular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

h2 {
	font-size: 24px;
	line-height: 36px;

}

h3 {
	font-size: 18px;
	line-height: 18px;

}

blockquote {
	font: 14px/18px "Georgia", serif;
	font-style: italic;
}

h1, h2, h3, h4, h5 { margin-bottom: 18px !important;; }

h2, h3 { font-family: "YanoneKaffeesatzLight", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

h4 { font-weight: bold; }

h5 { text-transform: uppercase; }

.ribbon p {
	font-size: 11px;
	text-transform: uppercase;
}

.large-text { font-size: 14px; }

.button { 
	font-size: 11px; 
	line-height: 36px;
}
/*
.list-pagination li a.navigation, 
.fancy-hover::before { font-family: "WebSymbolsRegular", sans-serif; }

.list-pagination li a.navigation {
	font-size: 10px;
	line-height: 36px; 
}
*/
.list-comments li:before {
	font-size: 36px;
	line-height: 36px;
}

.fancy-hover::before {
	font-size: 24px;
	line-height: 1em;
}





/* ---------- GENERAL ---------- */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.fr { float:  right; }
.fl { float:  left; }

body { background: #FBFCFC url('../img/pattern-bg-main.jpg') left top; }

.list-small-thumbs figure img, .list-video > li,
.list-blog-posts figure img, .blog-post-embed,
.embed-container, .author-bio figure img,
.list-comments figure img, .list-comments li,
.figure-left img, .figure-right img {
	-webkit-box-shadow: 0px 3px 0px #E5E5E5;
	-moz-box-shadow: 0px 3px 0px #E5E5E5;
	box-shadow: 0px 3px 0px #E5E5E5;
}

.block-image { display: block; /* Gets rid of the 3px below the image */ }

hr {
	border-bottom: none;
	border-top: 1px dotted #D2D3D5;
	height: 1px;
	margin: 18px 0 17px 0;
	display: block;
	clear: both;
}

blockquote {
	margin-left: 54px;
	padding: 0 18px;
}


p + hr, h1 + hr, h2 + hr, h3 + hr { margin-top: 0; }

.sidebar section + hr { margin-bottom: 35px; }

.blank-hr {
	border: none;
	height: 1px;
	margin: 18px 0 17px 0;
}

p, ol, ul { margin-bottom: 18px; }

em { display: block; }

.list-video li, .button, .list-blog-posts li, 
.list-pagination li a, .list-tags a, .single-blog-post,
.list-comments li, .page-container, .error-box,
.regular-form input, .regular-form textarea, .confirmation-box {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
 
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.list-blog-posts li, .middle-stripe, 
.single-blog-post, .page-container {
	-webkit-box-shadow: 0px 6px 0px #ECEDED;
	-moz-box-shadow: 0px 6px 0px #ECEDED;
	box-shadow: 0px 6px 0px #ECEDED;
}

.ribbon {
	height: 36px;
	width: 57px;
	display: block;
	background: transparent url('../img/sprite.png') no-repeat 0 -18px;
}

.embed-container {
	position: relative;
	height: 360px;
	overflow: hidden;
}

	.embed-container iframe, .embed-container object, .embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.figure-right img {
	float: right;
	margin: 0 0 18px 18px;
	display: block;
}

.figure-left img {
	float: left;
	margin: 0 18px 18px 0;
	display: block;
}

figure.post-figure img, .list-video figure img {
	-webkit-transition: opacity 0.3s ease-in-out; 
	-moz-transition: opacity 0.3s ease-in-out; 
	-ms-transition: opacity 0.3s ease-in-out; 
	-o-transition: opacity 0.3s ease-in-out; 
	transition: opacity 0.3s ease-in-out;
}

figure.post-figure img:hover, .list-video li:hover figure img {
	opacity: 0.3;
	filter: alpha(opacity=30); /* IE6-IE8 */
}

.fancy-hover {
	position: relative;
	display: block;
}

.fancy-hover img {
	z-index: 600;
	position: relative;
}

.fancy-hover:hover { border: none; }

.fancy-hover::before {
	content: ')';
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	text-align: center;
	margin: -0.5em 0 0 -0.5em;
	z-index: 500;
}





/* ---------- COLORS ---------- */
p a, li a {
	color: #3fa8c0; /* Light teal */
//	color: #005CA1; /* Ink blue */
//	color: #008aff; /* Hot blue */
//	color: #D6982F; /* Yellow mustard */
//	color: #E66D1A; /* Simple orange */
//	color: #990000; /* Dark red */
//	color: #ff0000; /* Pure red */
//	color: #c0513f; /* Pale red */
//	color: #228815; /* Dark green */
//	color: #9ac03f; /* Light green */
}

h1, h1 a, .meta a, .list-pagination a.current-page, 
/*.list-pagination a:hover,*/ .sidebar section a, .fancy-hover::before { color: #303437; }

.regular-form input[type="text"]:hover, 
.regular-form input[type="email"]:hover,.regular-form input[type="url"]:hover, 
.regular-form textarea:hover,.regular-form input[type="text"]:focus, 
.regular-form input[type="email"]:focus,.regular-form input[type="url"]:focus, 
.regular-form textarea:focus { border-color: #cacccc; }

/*.primary-navigation ul li,*/ .form-search input, .meta p, p em, em,
.list-pagination a, .regular-form label span, h5, 
blockquote { color: #c2c3c8; }

.pagination ul {
	box-shadow: none !important;

}
.pagination ul > li > a, .pagination ul > li > span{
	margin: 2px !important;
	border-width: 1px !important;
}

.current-page {
 color: black !important;
	font-weight:bold !important;
}

blockquote { border-left: 1px dotted #c2c3c8; }

.primary-navigation ul li a { color: #899199; }

.primary-navigation ul li ul { background-color: #171819; }

	.primary-navigation ul li ul li { border-bottom: 1px solid #3B3E41; }

.primary-navigation ul li a:hover, .button, .copyright-stripe p, 
.list-tags li a { color: white; }

.list-comments li:before { color: #F1F1F1; }

.list-tags a { background-color: #7C7F89; }

	.list-tags a:hover { background-color: #303437; }

.button {
	-webkit-box-shadow: 0px 1px 0px #338298;
	-moz-box-shadow: 0px 1px 0px #338298;
	box-shadow: 0px 1px 0px #338298;
	
	background-color: #3FA8C0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#47BBD6), to(#3FA8C0));
	background-image: -webkit-linear-gradient(top, #47BBD6, #3FA8C0);
	background-image: -moz-linear-gradient(top, #47BBD6, #3FA8C0);
	background-image: -ms-linear-gradient(top, #47BBD6, #3FA8C0);
	background-image: -o-linear-gradient(top, #47BBD6, #3FA8C0);
	background-image: linear-gradient(to bottom, #47BBD6, #3FA8C0);
}

	.button:hover {
		background-color: #47BBD6;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#4BC7E1), to(#43B4CC));
		background-image: -webkit-linear-gradient(top, #4BC7E1, #43B4CC);
		background-image: -moz-linear-gradient(top, #4BC7E1, #43B4CC);
		background-image: -ms-linear-gradient(top, #4BC7E1, #43B4CC);
		background-image: -o-linear-gradient(top, #4BC7E1, #43B4CC);
		background-image: linear-gradient(to bottom, #4BC7E1, #43B4CC);
	}
	
	
	
.ink-blue {
	-webkit-box-shadow: 0px 1px 0px #003963;
	-moz-box-shadow: 0px 1px 0px #003963;
	box-shadow: 0px 1px 0px #003963;
	
	background-color: #005CA1;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#005CA1), to(#014d86));
	background-image: -webkit-linear-gradient(top, #005CA1, #014d86);
	background-image: -moz-linear-gradient(top, #005CA1, #014d86);
	background-image: -ms-linear-gradient(top, #005CA1, #014d86);
	background-image: -o-linear-gradient(top, #005CA1, #014d86);
	background-image: linear-gradient(to bottom, #005CA1, #014d86);
}

	.ink-blue:hover {
		background-color: #026bb9;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#026bb9), to(#005CA1));
		background-image: -webkit-linear-gradient(top, #026bb9, #005CA1);
		background-image: -moz-linear-gradient(top, #026bb9, #005CA1);
		background-image: -ms-linear-gradient(top, #026bb9, #005CA1);
		background-image: -o-linear-gradient(top, #026bb9, #005CA1);
		background-image: linear-gradient(to bottom, #026bb9, #005CA1);
	}
	
.hot-blue {
	-webkit-box-shadow: 0px 1px 0px #0066bc;
	-moz-box-shadow: 0px 1px 0px #0066bc;
	box-shadow: 0px 1px 0px #0066bc;
	
	background-color: #008aff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#008aff), to(#027be2));
	background-image: -webkit-linear-gradient(top, #008aff, #027be2);
	background-image: -moz-linear-gradient(top, #008aff, #027be2);
	background-image: -ms-linear-gradient(top, #008aff, #027be2);
	background-image: -o-linear-gradient(top, #008aff, #027be2);
	background-image: linear-gradient(to bottom, #008aff, #027be2);
}

	.hot-blue:hover {
		background-color: #2199ff;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#2199ff), to(#008aff));
		background-image: -webkit-linear-gradient(top, #2199ff, #008aff);
		background-image: -moz-linear-gradient(top, #2199ff, #008aff);
		background-image: -ms-linear-gradient(top, #2199ff, #008aff);
		background-image: -o-linear-gradient(top, #2199ff, #008aff);
		background-image: linear-gradient(to bottom, #2199ff, #008aff);
	}	
	
.yellow-mustard {
	-webkit-box-shadow: 0px 1px 0px #9f7122;
	-moz-box-shadow: 0px 1px 0px #9f7122;
	box-shadow: 0px 1px 0px #9f7122;
	
	background-color: #D6982F;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#D6982F), to(#bd862a));
	background-image: -webkit-linear-gradient(top, #D6982F, #bd862a);
	background-image: -moz-linear-gradient(top, #D6982F, #bd862a);
	background-image: -ms-linear-gradient(top, #D6982F, #bd862a);
	background-image: -o-linear-gradient(top, #D6982F, #bd862a);
	background-image: linear-gradient(to bottom, #D6982F, #bd862a);
}

	.yellow-mustard:hover {
		background-color: #2199ff;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ab36), to(#D6982F));
		background-image: -webkit-linear-gradient(top, #f0ab36, #D6982F);
		background-image: -moz-linear-gradient(top, #f0ab36, #D6982F);
		background-image: -ms-linear-gradient(top, #f0ab36, #D6982F);
		background-image: -o-linear-gradient(top, #f0ab36, #D6982F);
		background-image: linear-gradient(to bottom, #f0ab36, #D6982F);
	}	

.simple-orange {
	-webkit-box-shadow: 0px 1px 0px #b75614;
	-moz-box-shadow: 0px 1px 0px #b75614;
	box-shadow: 0px 1px 0px #b75614;
	
	background-color: #E66D1A;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#E66D1A), to(#d26418));
	background-image: -webkit-linear-gradient(top, #E66D1A, #d26418);
	background-image: -moz-linear-gradient(top, #E66D1A, #d26418);
	background-image: -ms-linear-gradient(top, #E66D1A, #d26418);
	background-image: -o-linear-gradient(top, #E66D1A, #d26418);
	background-image: linear-gradient(to bottom, #E66D1A, #d26418);
}

	.simple-orange:hover {
		background-color: #2199ff;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f88a3f), to(#E66D1A));
		background-image: -webkit-linear-gradient(top, #f88a3f, #E66D1A);
		background-image: -moz-linear-gradient(top, #f88a3f, #E66D1A);
		background-image: -ms-linear-gradient(top, #f88a3f, #E66D1A);
		background-image: -o-linear-gradient(top, #f88a3f, #E66D1A);
		background-image: linear-gradient(to bottom, #f88a3f, #E66D1A);
	}			

.dark-red {
	-webkit-box-shadow: 0px 1px 0px #6d0101;
	-moz-box-shadow: 0px 1px 0px #6d0101;
	box-shadow: 0px 1px 0px #6d0101;
	
	background-color: #990000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#830101));
	background-image: -webkit-linear-gradient(top, #990000, #830101);
	background-image: -moz-linear-gradient(top, #990000, #830101);
	background-image: -ms-linear-gradient(top, #990000, #830101);
	background-image: -o-linear-gradient(top, #990000, #830101);
	background-image: linear-gradient(to bottom, #990000, #830101);
}

	.dark-red:hover {
		background-color: #b50000;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#b50000), to(#990000));
		background-image: -webkit-linear-gradient(top, #b50000, #990000);
		background-image: -moz-linear-gradient(top, #b50000, #990000);
		background-image: -ms-linear-gradient(top, #b50000, #990000);
		background-image: -o-linear-gradient(top, #b50000, #990000);
		background-image: linear-gradient(to bottom, #b50000, #990000);
	}	

.pure-red {
	-webkit-box-shadow: 0px 1px 0px #bf0000;
	-moz-box-shadow: 0px 1px 0px #bf0000;
	box-shadow: 0px 1px 0px #bf0000;
	
	background-color: #ff0000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#e50000));
	background-image: -webkit-linear-gradient(top, #ff0000, #e50000);
	background-image: -moz-linear-gradient(top, #ff0000, #e50000);
	background-image: -ms-linear-gradient(top, #ff0000, #e50000);
	background-image: -o-linear-gradient(top, #ff0000, #e50000);
	background-image: linear-gradient(to bottom, #ff0000, #e50000);
}

	.pure-red:hover {
		background-color: #ff2222;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#ff0000));
		background-image: -webkit-linear-gradient(top, #ff2222, #ff0000);
		background-image: -moz-linear-gradient(top, #ff2222, #ff0000);
		background-image: -ms-linear-gradient(top, #ff2222, #ff0000);
		background-image: -o-linear-gradient(top, #ff2222, #ff0000);
		background-image: linear-gradient(to bottom, #ff2222, #ff0000);
	}	

.pale-red {
	-webkit-box-shadow: 0px 1px 0px #813528;
	-moz-box-shadow: 0px 1px 0px #813528;
	box-shadow: 0px 1px 0px #813528;
	
	background-color: #c0513f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c0513f), to(#a54636));
	background-image: -webkit-linear-gradient(top, #c0513f, #a54636);
	background-image: -moz-linear-gradient(top, #c0513f, #a54636);
	background-image: -ms-linear-gradient(top, #c0513f, #a54636);
	background-image: -o-linear-gradient(top, #c0513f, #a54636);
	background-image: linear-gradient(to bottom, #c0513f, #a54636);
}

	.pale-red:hover {
		background-color: #d55a46;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#d55a46), to(#c0513f));
		background-image: -webkit-linear-gradient(top, #d55a46, #c0513f);
		background-image: -moz-linear-gradient(top, #d55a46, #c0513f);
		background-image: -ms-linear-gradient(top, #d55a46, #c0513f);
		background-image: -o-linear-gradient(top, #d55a46, #c0513f);
		background-image: linear-gradient(to bottom, #d55a46, #c0513f);
	}

.dark-green {
	-webkit-box-shadow: 0px 1px 0px #175c0e;
	-moz-box-shadow: 0px 1px 0px #175c0e;
	box-shadow: 0px 1px 0px #175c0e;
	
	background-color: #228815;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#228815), to(#1e7512));
	background-image: -webkit-linear-gradient(top, #228815, #1e7512);
	background-image: -moz-linear-gradient(top, #228815, #1e7512);
	background-image: -ms-linear-gradient(top, #228815, #1e7512);
	background-image: -o-linear-gradient(top, #228815, #1e7512);
	background-image: linear-gradient(to bottom, #228815, #1e7512);
}

	.dark-green:hover {
		background-color: #289d19;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#289d19), to(#228815));
		background-image: -webkit-linear-gradient(top, #289d19, #228815);
		background-image: -moz-linear-gradient(top, #289d19, #228815);
		background-image: -ms-linear-gradient(top, #289d19, #228815);
		background-image: -o-linear-gradient(top, #289d19, #228815);
		background-image: linear-gradient(to bottom, #289d19, #228815);
	}	

.light-green {
	-webkit-box-shadow: 0px 1px 0px #6e892e;
	-moz-box-shadow: 0px 1px 0px #6e892e;
	box-shadow: 0px 1px 0px #6e892e;
	
	background-color: #9ac03f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9ac03f), to(#87a837));
	background-image: -webkit-linear-gradient(top, #9ac03f, #87a837);
	background-image: -moz-linear-gradient(top, #9ac03f, #87a837);
	background-image: -ms-linear-gradient(top, #9ac03f, #87a837);
	background-image: -o-linear-gradient(top, #9ac03f, #87a837);
	background-image: linear-gradient(to bottom, #9ac03f, #87a837);
}

	.light-green:hover {
		background-color: #aad445;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#aad445), to(#9ac03f));
		background-image: -webkit-linear-gradient(top, #aad445, #9ac03f);
		background-image: -moz-linear-gradient(top, #aad445, #9ac03f);
		background-image: -ms-linear-gradient(top, #aad445, #9ac03f);
		background-image: -o-linear-gradient(top, #aad445, #9ac03f);
		background-image: linear-gradient(to bottom, #aad445, #9ac03f);
	}		
	
.admin-reply figure img {
	-webkit-box-shadow: 0px 3px 0px #E85606;
	-moz-box-shadow: 0px 3px 0px #E85606;
	box-shadow: 0px 3px 0px #E85606;
}

.error-box {
	color: #f75321; 
	border: 1px solid #E6BBB3;
	background-color: #FDE8E4;
}

.confirmation-box {
	color: #52964F;
	border: 1px solid #B7CBB6;
	background-color: #E7FAE6;
}





/* ---------- BUTTONS ---------- */
.button {
	padding: 0 18px;
	display: inline-block;
	height: 36px;
}

	.button:hover { border-bottom: none; }





/* ---------- STRIPES ---------- */
/*.top-stripe, .copyright-stripe { background: #2C4051  } */

.footer-stripe, .main-footer, .top-stripe, .copyright-stripe {
	/* background: transparent url('../img/pattern-detail.jpg') repeat-x left top; */
	background: #1A3659 !important;
	/* padding: 36px 0 18px 0; */
}

.middle-stripe {
	/*background: white url('../img/pattern-detail.jpg') repeat-x left top;*/
	border-bottom: 1px solid #E1E2E2;

	padding: 36px 0 35px 0; 
}

.middle-stripe.minimal { padding: 18px 0 0 0; }

	.middle-stripe.minimal h1 { margin-bottom: 17px; }

.copyright-stripe {
	padding: 33px 0 18px 0;
	border-top: 1px solid #272a2c;
	text-align: center;
}





/* ---------- HEADER ---------- */
.logo { margin-bottom: 0; padding-left: 5px !important; }

.logo a {
	/* background: transparent url('../img/company-logo.png') no-repeat left top; */
	height: 36px;
	display: block;
	font-size: 34px;
/*	font: 0/0 a;
    text-shadow: none;
    color: transparent;
	*/
}
/*
.top-stripe { padding: 18px 0; }
*/
.primary-navigation ul { margin: 0; }

	.primary-navigation ul > li { 
		float: left;
		position: relative;
	}
	
		.primary-navigation ul li a {
			height: 36px; 
			line-height: 36px; 
			display: inline-block;
		}
		
			.primary-navigation ul li a:hover {
				border: none;
			}
		
	.primary-navigation ul li ul {
		position: absolute;
		opacity: 0; 
  		filter: alpha(opacity=0); 
  		z-index: 99999;
  		height: 0;
  		overflow: hidden;
  
		-webkit-transition: opacity 0.4s ease-in-out; 
		-moz-transition: opacity 0.4s ease-in-out; 
		-ms-transition: opacity 0.4s ease-in-out; 
		-o-transition: opacity 0.4s ease-in-out; 
		transition: opacity 0.4s ease-in-out;
	}
	
		.primary-navigation ul li ul li { width: 100%; }
	
		.primary-navigation ul li ul li a {
			display: block;
			white-space: nowrap;
			padding: 0 18px;
		}
		
	.primary-navigation ul > li:hover ul {
		opacity: 10; 
  		filter: alpha(opacity=100); 
  		height: auto;
	}
	
.form-search { margin-left: 24px; }

.form-search p {
	height: 36px;
	line-height: 36px;
	margin: 0;
}

	.form-search input {
		border: 1px solid #3B3E41;
		height: 36px;
		width: 100px;
		background: #171819 url('../img/sprite.png') no-repeat 0 -289px;
		padding: 0 12px 0 36px; 

		-webkit-transition: width 0.3s ease-in-out; 
		-moz-transition: width 0.3s ease-in-out; 
		-ms-transition: width 0.3s ease-in-out; 
		-o-transition: width 0.3s ease-in-out; 
		transition: width 0.3s ease-in-out;
	}
	
		.form-search input:hover, .form-search input:focus{
			width: 216px; 
			padding: 0 12px 0 36px; 
		}
			
			
			
			
			
/* ---------- FEATURED ARTICLE ---------- */
.meta {
	text-align: right;
	padding-top: 36px;
}

.featured-offset { padding-right: 16px; }





/* ---------- BLOG ---------- */
.list-blog-posts li, .single-blog-post, .page-container {
	background-color: white;
	border: 1px solid #E1E3E3;
	
	padding: 17px 0 18px 0;
	margin-bottom: 36px;
}

	.list-blog-posts article .alpha, .single-blog-post .alpha, .page-container { padding-left: 18px; }
	.list-blog-posts article .omega , .single-blog-post .omega, .page-container { padding-right: 18px; }

.single-blog-post .meta { padding-top: 0; }

	.single-blog-post .meta .list-rating li { margin-bottom: 18px; }

.blog-post-content {
	margin: 0 18px;
	border-top: 1px dotted #d2d3d5;
	padding: 17px 0 0 0;
} 

	.blog-post-content figure.post-figure img {
		margin-bottom: 18px;
		width: 100%;
		display: block;
	}
	
	.blog-post-content ul li, .page-container ul li, .error-box ul li { list-style: disc; margin-left: 18px; }
	.blog-post-content ol li, .page-container ol li, .error-box ol li { list-style: decimal; margin-left: 18px; }

	.blog-post-content .list-full-width li, .page-container .list-full-width li {
		list-style-type: none;
		margin-left: 0;
	}
	
.blog-post-embed {
	position: relative;
	height: 288px;
	overflow: hidden;
	margin-bottom: 17px;
}

	.blog-post-embed iframe, .blog-post-embed object, .blog-post-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.sidebar { padding-left: 16px; }

.author-bio figure img {
	float: left;
	margin: 0 12px 18px 0;
}





/* ---------- LISTS ---------- */
.list-small-thumbs { margin-bottom: 0; }

	.list-small-thumbs li img {
		float: left;
		margin: 0 12px 18px 0;
	}

.list-video > li {
	background-color: white;
	border: 1px solid #E1E3E3;
	margin-bottom: 18px;
}

	.list-video li a img {
	  -webkit-border-top-left-radius: 3px;
	     -moz-border-top-left-radius: 3px;
	          border-top-left-radius: 3px;

	  -webkit-border-top-right-radius: 3px;
	     -moz-border-top-right-radius: 3px;
	          border-top-right-radius: 3px;
	          
		display: block;
		
		width: 100%;
	}

.video-thumb-content {
	background: transparent url('../img/pattern-detail.jpg') repeat-x left top;
	padding: 18px 18px 17px 18px;
}

.hd-on, .hd-off {
	width: 17px;
	height: 17px;
	display: block;	
	
	background: transparent url('../img/sprite.png') no-repeat;
}

.hd-on { background-position: 0 0; }

.hd-off { background-position: -17px 0; }

.list-rating { margin: 0; }

.list-rating li {
	display: block;
	float: left;
    height: 18px;
    width: 10px;
    
    background: transparent url("../img/sprite.png") no-repeat -34px 0;
    
    margin: 0 3px 0 0;
}

	.list-rating li.list-rated {
		background-position: -44px 0;
	}

.single-blog-post .list-rating li { float: right; }

.list-twitter li {
	background: transparent url('../img/sprite.png') no-repeat 0 -90px;
	padding-left: 30px;
}

.list-content li, .list-full-width li {
	border-bottom: 1px dotted #D2D3D5;
	height: 36px;
	line-height: 36px;
}

.list-content li:last-child, .list-full-width li:last-child { border-bottom: none; }

.list-full-width li {
	background: transparent url('../img/sprite.png') no-repeat 0 -253px;
	padding-left: 12px;
}

.list-social li {
	float: left;
	margin-right: 6px;
}

.list-social li a {
	width: 18px;
	height: 18px;
	display: block;
	
	font: 0/0 a;
    text-shadow: none;
    color: transparent;

	background: transparent url('../img/sprite.png') no-repeat;	
}

	li a.social-youtube { background-position: 0 -54px; }
		li a.social-youtube:hover { background-position: 0 -72px; }
	li a.social-vimeo { background-position: -18px -54px; }
		li a.social-vimeo:hover { background-position: -18px -72px; }
	li a.social-facebook { background-position: -36px -54px; }
		li a.social-facebook:hover { background-position: -36px -72px; }
	li a.social-twitter { background-position: -54px -54px; }
		li a.social-twitter:hover { background-position: -54px -72px; }
	li a.social-linkedin { background-position: -72px -54px; }
		li a.social-linkedin:hover { background-position: -72px -72px; }
	li a.social-rss { background-position: -90px -54px; }
		li a.social-rss:hover { background-position: -90px -72px; }
/*
.list-pagination li {
	float: left;
	margin-right: 3px;
}

	.list-pagination li a {
		height: 36px;
		width: 36px;
		line-height: 36px;
		
		
		display: inline-block;
		text-align: center;
		background: white;
		border: 1px solid #E1E2E2;
	}
	
.list-pagination .current-page {
	border: 1px solid #BBBCBC;
	font-weight: bold;
}
*/
.list-tags { margin-bottom: 36px; }

.list-tags li {
	float: left;
	margin: 0 9px 6px 0;
}

	.list-tags li a {
		height: 30px;
		line-height: 30px;
		text-align: center;
		display: block;
		padding: 0 9px;
	}
	
		.list-tags li a:hover { border-bottom: none; }

.list-comments {
	/* Create a counter for the LI elements */
	counter-reset: li;	
}

.list-comments li {
	background: white;
	padding: 17px 18px 0 18px;
	border: 1px solid #E1E3E3;
	position: relative;
	counter-increment: li;
	margin-bottom: 17px;
}

	.list-comments li ul { margin-bottom: 0; }
	
	.list-comments li ul li p:last-child { margin-bottom: 17px; }

	.list-comments li::before {
		content: counter(li);
		position: absolute;
		top: 17px;
		right: 18px;
	}
	
	.list-comments figure img {
		float: left;
		margin: 0 12px 0 0;
	}

.error-box, .confirmation-box {
	padding: 17px 18px 0 18px;
	margin-bottom: 18px;
}





/* ---------- FORMS ---------- */
.regular-form label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}

	.regular-form label span { font-weight: normal; }

.regular-form input[type="text"], .regular-form input[type="email"], 
.regular-form input[type="url"] {
	border: 1px solid #E2E4E4;
	height: 31px;
	width: 100%;
	padding: 0 9px;
}

.regular-form textarea {
	border: 1px solid #E2E4E4;
	width: 100%;
	padding: 12px;
	height: 175px;
	display: block;
}

.regular-form input[type="submit"] {
	border: none;
	cursor: pointer;
}

.regular-form input.short-input { width: 50%; }

.captcha-section input[type="text"] {
	margin-top: 0;
	margin-left: 18px;
	width: 90px;
	float: left;
}

.loader { padding: 0 18px; }





/* ---------- MAIN CONTENT ---------- */
div[role="main"] { padding: 36px 0; }





/* ---------- FOOTER ---------- */
/*.main-footer { background: white url('../img/pattern-bg-footer-stripe.jpg') left top; }*/





/* ---------- MEDIA QUERIES ---------- */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

	.embed-container { height: 270px; }
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
/* First break point */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	.embed-container { height: 306px; }

	.container .list-small-thumbs li.three.columns { width: 268px; margin-left: 0; }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/* Second break point */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.container .list-video > li.column,
	.container .list-video > li.columns { margin-bottom: 18px; }
	
	.logo a { margin-bottom: 18px; }
	
	.form-search { display: none; }
	
	.top-stripe .primary-navigation ul { float: none; }
	
	.meta {
		text-align: left;
		padding-top: 0px;
	}
	
	.sidebar { 
		padding-left: 0;
		border-top: 1px dotted #D2D3D5;
		padding-top: 36px;
	}
	
	.list-pagination li { margin-bottom: 36px; }
	
	.list-blog-posts .meta, .single-blog-post .meta { padding-left: 18px; }
	
	.single-blog-post .list-rating li { float: left; }
	
	#comment-form, #contact-form { padding-bottom: 36px; }
	
	.featured-offset { padding: 0; }
	
	.embed-container { margin-bottom: 18px; }
	
	hr.sixteen.columns { margin: 18px 0 17px 0; }
	
	.footer-stripe { padding-top: 0; }
	
		.footer-stripe h3 { margin-top: 18px; }
	
		.footer-stripe .columns:first-child h3, .footer-stripe .column:first-child h3 { margin-top: 36px; }
		
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* Third break point */
@media only screen and (max-width: 479px) {

	.embed-container { height: 198px; }

	.container .list-video > li.column,
	.container .list-video > li.columns { margin-bottom: 18px; }
	
	.logo a { margin-bottom: 18px; }
	
	.form-search { display: none; }
	
	.top-stripe .primary-navigation ul { float: none; }
	
	.meta {
		text-align: left;
		padding-top: 0px;
	}
	
	.sidebar { 
		padding-left: 0;
		border-top: 1px dotted #D2D3D5;
		padding-top: 36px;
	}
	
	.list-pagination li { margin-bottom: 36px; }
	
	.list-blog-posts .meta, .single-blog-post .meta { padding-left: 18px; }
	
	.single-blog-post .list-rating li { float: left; }
	
	#comment-form, #contact-form { padding-bottom: 36px; }
	
	.featured-offset { padding: 0; }
	
	.embed-container { margin-bottom: 18px; }
	
	hr.sixteen.columns { margin: 18px 0 17px 0; }
	
	.footer-stripe { padding-top: 0; }
	
		.footer-stripe h3 { margin-top: 18px; }
	
		.footer-stripe .columns:first-child h3, .footer-stripe .column:first-child h3 { margin-top: 36px; }
		
}





/* ---------- Browser Specific Styles ---------- */
.ie8 .form-search input[type="text"] {
	line-height: 36px;
}

.ie8 .regular-form input[type="text"], .ie8 .regular-form input[type="url"],
.ie8 .regular-form input[type="email"] {
	line-height: 30px;
}