/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
}

body {
	font-size: 1em;
	line-height: 1.4;
	text-rendering: optimizeLegibility;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 2px;
	border: 0;
	border-bottom: 1px solid #efefef;
	border-radius: 2px;
	background-color: #ababab;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

*:focus { outline: none; }

a,
a:hover {
	color: #333; /* 1d76c1 */
	text-decoration: none;
}
a:hover { color: #000; }

br.clear { clear: both; }

body { background-color: #555; }

.wrapper { min-height: 100%; }

.bg-image {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1366px;
	height: 768px;
	margin-left: -683px;
	background: url(../image/document-bg.png) no-repeat 0 0;
}
.menu {
	position: absolute;
	width: 1366px;
	height: 768px;
	bottom: 0;
	left: 50%;
	padding: 0;
	margin: 0 0 0 -683px;
	box-shadow: 0px -5px 50px #000;
	overflow: hidden;
}
.menu li {
	position: absolute;
	bottom: 0;
	height: 100%;
	list-style: none;
	float: left;
}
.menu li.over { z-index: 2; }

#item1 {
	width: 342px;
	left: 0;
} /* 25% */
#item1.over { background: url(../image/item1-bg.png) no-repeat 0 100%; }
#item2 {
	width: 219px;
	left: 342px;
} /* 16% */
#item2.over { background: url(../image/item2-bg.png) no-repeat 0 100%; }
#item3 {
	width: 246px;
	left: 561px;
} /* 18% */
#item3.over { background: url(../image/item3-bg.png) no-repeat 0 100%; }
#ashes_of_cows {
	width: 191px;
	left: 807px;
} /* 14% */
#ashes_of_cows.over { background: url(../image/ashes-of-cows-bg.png) no-repeat 0 100%; }
#item4,
#item6 {
	width: 218px;
	left: 998px;
} /* 16% */
#item4.over { background: url(../image/item4-bg.png) no-repeat 0 100%; }
#item6.over { background: url(../image/item6-bg.png) no-repeat 0 100%; }
#item5 {
	width: 150px;
	left: 1216px;
} /* 11% */
#item5.over { background: url(../image/item5-bg.png) no-repeat 0 100%; }


.menu li a {
	position: absolute;
	width: 150px;
	height: 150px;
	display: block;
	text-decoration: none;
	z-index: 2;
}
.menu li a > span {
	position: absolute;
	font-family: "Titillium Web";
	font-size: 24px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	text-shadow: 0 3px 2px #000;
	letter-spacing: -1px;
	display: none;
	color: #ccc;
	z-index: 3;
}

#item1 a {
	left: 25px;
	bottom: 180px;
}
#item1 a > span {
	left: 55px;
	bottom: 105px;
}

#item2 a {
	right: 0;
	bottom: 310px;
}
#item2 a > span {
	left: 35px;
	bottom: 5px;
	letter-spacing: -1px;
}

#item3 a {
	left: 35px;
	bottom: 250px;
}
#item3 a > span {
	left: 20px;
	bottom: 800px;
}

#ashes_of_cows a {
	left: 10px;
	bottom: 270px;
}
#ashes_of_cows a > span {
	left: 12px;
	bottom: 118px;
	letter-spacing: -1px;
}

#item4 a {
	right: 15px;
	bottom: 0;
}
#item4 a > span {
	left: 30px;
	bottom: -30px;
}

#item5 a {
	left: 0;
	bottom: 0;
}
#item5 a > span {
	left: 20px;
	bottom: 65px;
}

#item6 a {
	left: 10px;
	bottom: 360px;
}
#item6 a > span {
	left: 30px;
	bottom: 20px;
}

#admin a {
	width: 50px;
	height: 50px;
	left: 145px;
	bottom: 10px;
	border-radius: 25px;
}
#admin a:hover { background: rgba(0, 0, 0, 0.5); }




.section-layer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	background: rgba(0, 0, 0, 0.35);
	-pie-background: rgba(0, 0, 0, 0.35);
	display: none;
}
.content {
	position: absolute;
	width: 1366px;
	height: 768px;
	bottom: 0;
	left: 50%;
	margin-left: -683px;
}
section {
	position: relative;
	width: 800px;
	height: 540px;
	display: none;
	padding-top: 42px;
	background: url(../image/pattern_185.png) repeat 0 0;
	box-shadow: 0 10px 50px #000;
	-moz-box-shadow: 0 10px 50px #000;
	-webkit-box-shadow: 0 10px 50px #000;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	behavior: url(../script/pie.htc);
	z-index: 4;
}

section .holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 530px;
	padding: 47px 0 5px;
	overflow: hidden;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	behavior: url(../script/pie.htc);
}
section .holder:focus { outline: none; }
section .holder .scroll-pane {
	height: 530px;
	overflow: auto;
}
.text-content { padding: 0 10px 0 30px; }

#popup_container {
	display: block;
	left: 120px;
	top: 50px;
}
#popup_container,
#popup_container .holder {
	width: 480px;
	height: 100px;
	border-radius: 9px 9px 0 0;
	-moz-border-radius: 9px 9px 0 0;
	-webkit-border-radius: 9px 9px 0 0;
}
#popup_container .holder,
#popup_container .holder .scroll-pane { height: 90px; }

#item1_container {
	left: 150px;
	top: 100px;
}
#item2_container {
	left: 270px;
	top: 100px;
}
#item3_container {
	left: 300px;
	top: 110px;
}
#ashes_of_cows_container {
	left: 500px;
	top: 150px;
}
#item4_container {
	background: none rgba(255, 255, 255, 0.25);
	left: 425px;
	top: 110px;
}
#item5_container {
	background: none rgba(255, 255, 255, 0.25);
	left: 330px;
	top: 100px;
}
#item6_container {
	background: none #000;
	left: 570px;
	top: 180px;
}


#item1_container,
#item1_container .holder,
#item6_container,
#item6_container .holder,
#ashes_of_cows_container,
#ashes_of_cows_container .holder,
#item3_container,
#item3_container .holder { width: 480px; }
#item6_container { height: 190px; }
#ashes_of_cows_container,
#ashes_of_cows_container .holder {
	height: 400px;
	border-radius: 9px 9px 0 0;
	-moz-border-radius: 9px 9px 0 0;
	-webkit-border-radius: 9px 9px 0 0;
}
#ashes_of_cows_container {
	opacity: 0.65;
	filter: alpha(opacity=65);
}
#ashes_of_cows_container .holder,
#ashes_of_cows_container .holder .scroll-pane { height: 390px; }
#item6_container .holder,
#item6_container .holder .scroll-pane { height: 160px; }
#ashes_of_cows_container { margin-bottom: 70px; }
#item1_container .holder { background: url(../image/bio-face-bg.png) no-repeat 100% 100%; }
#item2_container,
#item2_container .holder { width: 745px; }

#item4_container,
#item4_container .holder,
#item5_container,
#item5_container .holder { width: 660px; }

section .icons {
	position: relative;
	margin: -42px 0 0;
	padding: 7px 0;
	height: 27px;
	z-index: 3;
	float: right;
}
section .icons li {
	list-style: none;
	float: left;
}
section .icons li a {
	position: relative;
	font-family: "Titillium Web";
	text-decoration: none;
	text-shadow: 0 1px 2px #fff;
	font-size: 15px;
	line-height: 16px;
	padding: 4px 10px 6px 7px;
	border-top: transparent solid 1px;
	border-bottom: transparent solid 1px;
	border-radius: 0 14px 14px 0;
	-moz-border-radius: 0 14px 14px 0;
	-webkit-border-radius: 0 14px 14px 0;
	behavior: url(../script/pie.htc);
	color: #222;
	float: left;
	transition: all 0.2s;
	-o-transition: all 0.2s; /* Opera */
	-moz-transition: all 0.2s; /* Firefox 4 */
	-webkit-transition: all 0.2s; /* Safari and Chrome */
}
section .icons li:first-child a {
	padding: 4px 7px 6px 10px;
	border-radius: 14px 0 0 14px;
	-moz-border-radius: 14px 0 0 14px;
	-webkit-border-radius: 14px 0 0 14px;
}
section .icons li a:hover {
	border-top-color: #fff;
	border-bottom-color: #999;
}
section .icons li a:active,
section .icons li a.active {
	color: #fff;
	margin-top: 1px;
	border-top: #000 solid 1px;
	border-bottom: #fff solid 1px;
	text-shadow: 0 1px 2px #000;
	background-color: rgba(0, 0, 0, 0.5);
	-pie-background: rgba(0, 0, 0, 0.5);
	behavior: url(../script/pie.htc);
}
section .icons li a.close {
	padding: 0;
	width: 28px;
	height: 26px;
	margin: 0 7px;
	text-indent: -10000px;
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	background: url(../image/close.png) 50% 50% no-repeat;
}
section .icons li a.close:active {
	border-top: #000 solid 1px;
	border-bottom: #fff solid 1px;
	background-color: rgba(0, 0, 0, 0.15);
	-pie-background: rgba(0, 0, 0, 0.15);
	behavior: url(../script/pie.htc);
}

#item6_container .icons li a {
	color: #ccc;
	text-shadow: none;
	border-top: #000 solid 1px;
	border-bottom: #666 solid 1px;
}
#item6_container .icons li a:active,
#item6_container .icons li a.active {
	background-color: rgba(255, 255, 255, 0.15);
	-pie-background: rgba(255, 255, 255, 0.15);
	behavior: url(../script/pie.htc);
}

.text-content h1,
.text-content h2,
.text-content h3,
.text-content p,
.text-content li,
.text-content dt,
.text-content dd,
.text-content td { font-family: "Titillium Web"; }
.text-content h1,
.text-content p,
.text-content ul { margin: 0 0 1em; }
.text-content h1,
.text-content h2,
.text-content h3 { text-shadow: 0 1px 2px #eee; }
.text-content dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 23%;
}
.text-content dd { margin: 0 0 10px 25%; }
.text-content p,
.text-content ul { margin: 0 0 1em; }
.text-content ul { padding-left: 0; }
.text-content td {
	vertical-align: top;
	padding: 0;
}
.text-content li { list-style: none; }

.text-content a {
	transition: all 0.3s;
	-o-transition: all 0.3s; /* Opera */
	-moz-transition: all 0.3s; /* Firefox 4 */
	-webkit-transition: all 0.3s; /* Safari and Chrome */
	text-shadow: 0 1px 1px #999;
}
.text-content a:hover {
	color: #000;
	text-decoration: none;
	text-shadow: 0 1px 1px #ccc;
}


dfn {
	font-family: "Titillium Web";
	font-style: normal;
	position: absolute;
	top: -10000px;
	left: -10000px;
	width: 640px;
	display: block;
	overflow: hidden;
}

/* bio */
#item1_container .text-content p,
#item1_container .text-content dl { color: #000; }
/* bio */

/* books */
#item2_container .text-content .gallery ul {
	margin: 0;
	padding: 0;
}
#item2_container .text-content .gallery ul li {
	list-style: none;
	position: relative;
	width: 225px;
	height: 225px;
	padding: 0 0 20px;
	margin-bottom: 10px;
	float: left;
}
#item2_container .text-content .gallery ul li a { display: block; }
#item2_container .text-content .gallery ul li a img {
	height: 210px;
	margin: 0 auto;
	display: block;
	box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	transition: all 0.3s;
	-o-transition: all 0.3s; /* Opera */
	-moz-transition: all 0.3s; /* Firefox 4 */
	-webkit-transition: all 0.3s; /* Safari and Chrome */
	behavior: url(../script/pie.htc);
}
#item2_container .text-content .gallery ul li:hover a img {
	height: 220px;
	margin: -5px auto;
	box-shadow: 0 0 20px #000;
	-moz-box-shadow: 0 0 20px #000;
	-webkit-box-shadow: 0 0 20px #000;
	behavior: url(../script/pie.htc);
}
#item2_container .text-content .gallery ul li a img.left { float: left; }
#item2_container .text-content .gallery ul li a img.right { float: right; }
#item2_container .text-content .gallery .localmenu {
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 195px;
	padding: 5px 0 0 5px;
	color: #111;
	display: none;
}
/* books */

/* publications */
#item3_container .text-content img,
#item3_container .text-content td { max-width: 415px; }
/* publications */

/* ashes_of_cows */
#ashes_of_cows_container .text-content.tracks ul li em {
	font-style: normal;
	float: right;
}
/* ashes_of_cows */

/* things */
#item4_container .text-content p,
#item4_container .text-content li {
	font-weight: 600;
	color: #000; 
}
#item4_container .text-content img,
#item4_container .text-content td { max-width: 600px; }
/* things */

/* contact */
#item6_container .text-content p { color: #eee; }
#item6_container .text-content p a { color: #999; }
#item6_container .text-content p a:hover { color: #fff; }
/* contact */

/* events */
#item5_container .text-content p,
#item5_container .text-content li {
	font-weight: 600;
	color: #000;
}
#item5_container .text-content img,
#item5_container .text-content td { max-width: 600px; }
/* events */

.player-wrapper { position: relative; }

.footer,
.simple-player {
	position: absolute;
	bottom: -70px;
	left: 0;
	right: 0;
	overflow: hidden;
	background: #000;
	box-shadow: 0 0 25px #000;
	-moz-box-shadow: 0 0 25px #000;
	-webkit-box-shadow: 0 0 25px #000;
	border-radius: 0 0 9px 9px;
	-moz-border-radius: 0 0 9px 9px;
	-webkit-border-radius: 0 0 9px 9px;
	behavior: url(../script/pie.htc);
}
.simple-player {
	bottom: -8px;
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}
.simple-player .jp-interface { margin: 0; }


/* jquery scroll */
.jspContainer {
	overflow: hidden;
	position: relative;
}
.jspPane { position: absolute; }
.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px !important;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: opacity 0.3s;
	-o-transition: opacity 0.3s; /* Opera */
	-moz-transition: opacity 0.3s; /* Firefox 4 */
	-webkit-transition: opacity 0.3s; /* Safari and Chrome */
	behavior: url(../script/pie.htc);
}
.content:hover .jspVerticalBar {
	opacity: 1;
	filter: alpha(opacity=100);
	transition: opacity 0.3s;
	-o-transition: opacity 0.3s; /* Opera */
	-moz-transition: opacity 0.3s; /* Firefox 4 */
	-webkit-transition: opacity 0.3s; /* Safari and Chrome */
	behavior: url(../script/pie.htc);
}
.jspVerticalBar .jspDrag { filter: alpha(opacity=0); }
.content:hover .jspVerticalBar .jspDrag { filter: alpha(opacity=100); }

.jspHorizontalBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px !important;
	display: none;
}
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { position: relative; }
.jspDrag {
	width: 10px !important;
	position: relative;
	top: 0;
	left: 5px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.3);
	-pie-background: rgba(0, 0, 0, 0.3);
	border-top: #555 solid 1px;
	border-bottom: #fff solid 1px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(../script/pie.htc); /* you must use absolute path */
}
#item6_container .jspDrag {
	background: rgba(255, 255, 255, 0.1);
	-pie-background: rgba(255, 255, 255, 0.1);
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}
.jspArrow {
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}
.jspArrow.jspDisabled { cursor: default; }
.jspVerticalBar .jspArrow { height: 10px; }
.jspHorizontalBar .jspArrow {
	width: 10px;
	float: left;
	height: 100%;
}
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner {
	float: left;
	height: 100%;
}
.jspArrowUp,
.jspArrowUp:hover { background: url(../image/scrollbar-top-bottom-bg.png) left top no-repeat; }
.jspArrowDown,
.jspArrowDown:hover {
	background: url(../image/scrollbar-top-bottom-bg.png) right bottom no-repeat;
}
/* jquery scroll */


/* jplayer */
.jp-playlist-player {
	padding: 5px 0;
	overflow: hidden;
}
.jp-interface {
	position: relative;
	margin: 0 auto 5px;
	width: 400px;
	height: 26px;
}
.jp-interface ul.jp-controls {
	padding: 0;
	margin: 0;
	list-style: none;
}
.jp-interface ul.jp-controls li { position: absolute; }
.jp-interface ul.jp-controls li a,
.jp-interface ul.jp-controls li a:hover {
	position: absolute;
	overflow: hidden;
	text-indent: -9999px;
}
a.jp-play,
a.jp-pause,
a.jp-stop,
a.jp-previous,
a.jp-next {
	position: relative;
	width: 22px;
	height: 22px;
	margin: 2px;
	border-radius: 11px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	behavior: url(../script/pie.htc); /* you must use absolute path */
	transition: background 0.3s;
	-o-transition: background 0.3s; /* Opera */
	-moz-transition: background 0.3s; /* Firefox 4 */
	-webkit-transition: background 0.3s; /* Safari and Chrome */
}
a.jp-play:hover,
a.jp-pause:hover,
a.jp-stop:hover,
a.jp-previous:hover,
a.jp-next:hover {
	box-shadow: 0 0 11px rgba(255, 255, 255, .75);
	-moz-box-shadow: 0 0 11px rgba(255, 255, 255, .75);
	-webkit-box-shadow: 0 0 11px rgba(255, 255, 255, .75);
	behavior: url(../script/pie.htc); /* you must use absolute path */
}

a.jp-play,
a.jp-pause { left: 35px; }

a.jp-play,
a.jp-play:hover { background: url(../image/icon-controls.png) -22px 0 no-repeat; }
a.jp-play:hover { background: url(../image/icon-controls.png) -22px -22px no-repeat; }
a.jp-pause,
a.jp-pause:hover {
	background: url(../image/icon-controls.png) -44px 0 no-repeat;
	display: none;
}
a.jp-pause:hover { background: url(../image/icon-controls.png) -44px -22px no-repeat; }
a.jp-stop,
a.jp-stop:hover {
	left: 60px;
	background: url(../image/icon-controls.png) -66px 0 no-repeat;
}
a.jp-stop:hover { background: url(../image/icon-controls.png) -66px -22px no-repeat; }
a.jp-previous,
a.jp-previous:hover {
	left: 10px;
	background: url(../image/icon-controls.png) 0 0 no-repeat;
}
a.jp-previous:hover { background: url(../image/icon-controls.png) 0 -22px no-repeat; }
a.jp-next,
a.jp-next:hover {
	left: 85px;
	background: url(../image/icon-controls.png) -88px 0 no-repeat;
}
a.jp-next:hover { background: url(../image/icon-controls.png) -88px -22px no-repeat; }

a.jp-close {
	top: 1px;
	left: 6px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: #ccc url(../image/close.png) 50% 50% no-repeat;
}
a.jp-close:hover { background-color: #fff; }

.jp-progress {
	position: absolute;
	overflow: hidden;
	top: 7px;
	left: 165px;
	width: 122px;
	height: 10px;
	background: #111;
	border-top: #000 solid 1px;
	border-bottom: #222 solid 1px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(../script/pie.htc);
}
.jp-load-bar {
	background: #555;
	width: 0;
	height: 10px;
	cursor: pointer;
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	behavior: url(../script/pie.htc);
}
.jp-play-bar {
	background: #fff;
	width: 0;
	height: 10px;
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	behavior: url(../script/pie.htc);
}
.jp-play-time,
.jp-total-time {
	position: absolute;
	top: 1px;
	width: 40px;
	height: 20px;
	color: #f2f2f2;
	line-height: 1em;
}
.jp-play-time { left: 115px; }
.jp-total-time {
	left: 295px;
	text-align: right;
}
.jp-volume-bar {
	position: absolute;
	overflow: hidden;
	top: 7px;
	left: 350px;
	background: #555;
	width: 46px;
	height: 10px;
	cursor: pointer;
	border-top: #000 solid 1px;
	border-bottom: #222 solid 1px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(../script/pie.htc);
}
.jp-volume-bar-value {
	background: #fff;
	width: 0;
	height: 10px;
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	behavior: url(../script/pie.htc);
}
.jp-playlist {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 400px;
	height: 26px;
}
.jp-playlist ul {
	margin: 0;
	padding: 0;
	position: absolute;
	list-style-type: none;
}
.jp-playlist li { padding-left: 10px; }
.jp-playlist a,
.jp-playlist a:hover,
.jp-playlist a.jplayer_playlist_current:hover,
.jp-playlist a.jplayer_playlist_current {
	color: #f2f2f2;
	text-decoration: none;
}

.jp-play-time,
.jp-total-time,
.jp-playlist li {
	font-family: "Titillium Web";
	font-size: 1em;
	line-height: 1.4em;
}
/* jplayer */


.fb-like.fb_iframe_widget {
	position: absolute !important;
	bottom: 10px;
	left: 50%;
	margin-left: -225px;
	z-index: 3;
}

.fb-comments.fb_iframe_widget,
.fb-comments.fb_iframe_widget > span,
.fb-comments.fb_iframe_widget > span > iframe { height: 165px !important; }

.fb-like-box.fb_iframe_widget { background: url(../image/pattern_185.png) repeat 0 0; }
.fb-like-box.fb_iframe_widget,
.fb-like-box.fb_iframe_widget > span,
.fb-like-box.fb_iframe_widget > span > iframe { width: 420px !important; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	/* IE 6/7 fallback */
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display: none !important;
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible { visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.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; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min-resolution: 144dpi) {
	/* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}


@media screen and (max-width: 1365px) {
	.bg-image {
		width: 1280px;
		height: 768px;
		margin-left: -640px;
		background-position: -43px 0;
	}
	.menu,
	.content {
		width: 1280px;
		height: 768px;
		margin-left: -640px;
	}
	#item1 { width: 299px; }
	#item1.over { background-position: -43px 100%; }
	#item2 { left: 299px; }
	#item3 { left: 518px; }
	#ashes_of_cows { left: 764px; }
	#item4,
	#item6 { left: 955px; }
	#item5 {
		width: 107px;
		left: 1173px;
	}
	#item1 a { left: 18px; }
	#item1 a > span { left: 12px; }

}


@media screen and (max-width: 1279px) {
	.bg-image {
		width: 1024px;
		height: 576px;
		margin-left: -512px;
		background: url(../image/document-1024-bg.png) no-repeat 0 0;
	}
	.menu,
	.content {
		width: 1024px;
		height: 576px;
		margin-left: -512px;
	}
	#item1 { width: 257px; }
	#item1.over { background: url(../image/item1-1024-bg.png) no-repeat 0 100%; }
	#item1 a {
		left: 5px;
		bottom: 85px;
	}
	#item1 a > span {
		left: 55px;
		bottom: 135px;
	}
	#item2 {
		width: 164px;
		left: 257px;
	}
	#item2.over { background: url(../image/item2-1024-bg.png) no-repeat 0 100%; }
	#item2 a {
		right: -20px;
		bottom: 215px;
	}
	#item3 {
		width: 185px;
		left: 420px;
	}
	#item3.over { background: url(../image/item3-1024-bg.png) no-repeat 0 100%; }
	#item3 a {
		left: 15px;
		bottom: 155px;
	}
	#ashes_of_cows {
		width: 143px;
		left: 605px;
	}
	#ashes_of_cows.over { background: url(../image/ashes-of-cows-1024-bg.png) no-repeat 0 100%; }
	#ashes_of_cows a {
		left: -10px;
		bottom: 175px;
	}
	#item4,
	#item6 {
		width: 164px;
		left: 748px;
	}
	#item4.over { background: url(../image/item4-1024-bg.png) no-repeat 0 100%; }
	#item6.over { background: url(../image/item6-1024-bg.png) no-repeat 0 100%; }
	#item4 a {
		right: -5px;
		bottom: 0;
	}
	#item4 a > span { left: 40px; }
	#item6 a {
		left: -10px;
		bottom: 265px;
	}
	#item5 {
		width: 113px;
		left: 912px;
	}
	#item5.over { background: url(../image/item5-1024-bg.png) no-repeat 0 100%; }
	#item5 a {
		left: 0;
		bottom: 0;
	}
	#item5 a > span { left: 35px; }

	section { height: 460px; }
	section .holder,
	section .holder .scroll-pane { height: 450px; }

	#ashes_of_cows_container,
	#ashes_of_cows_container .holder,
	#ashes_of_cows_container .holder .scroll-pane { height: 340px; }

	#item1_container,
	#item2_container,
	#item3_container,
	#ashes_of_cows_container,
	#item4_container,
	#item5_container { top: 2px; }

	#item4_container { left: 200px; }
	#item5_container { left: 210px; }
	#item6_container { left: 520px; }

}


@media screen and (max-width: 991px) {

	.bg-image,
	.content {
		width: auto;
		margin: 0;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		height: auto;
	}
	.bg-image {
		background-position: 0 100%;
		background-size: auto 100%;
	}

	.section-layer { background: rgba(0, 0, 0, 0.35) url(../image/loader.gif) 50% 50% no-repeat; }

	header {
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 1;
	}
	header nav .menu {
		position: static;
		margin: 0;
		padding: 0;
		box-shadow: none;
		width: auto;
		height: auto;
		display: block;
	}
	header nav .menu li,
	header nav .menu li a,
	header nav .menu li a span {
		position: static;
		float: none;
		width: auto !important;
		height: auto;
		display: block;
		text-align: right;
	}
	header nav .menu li a { padding: 10px 20px; }
	header nav .menu li a:hover { background: none transparent; }

	#item1_container,
	#item2_container,
	#item3_container,
	#ashes_of_cows_container,
	#item4_container,
	#item5_container,
	#item6_container {
		position: absolute;
		top: 20px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		width: auto;
		height: auto;
		overflow: hidden;
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#item4_container,
	#item5_container { background: url(../image/pattern_185.png) repeat 0 0; }

	#ashes_of_cows_container {
		margin-bottom: 0;
		border-radius: 9px;
		-moz-border-radius: 9px;
		-webkit-border-radius: 9px;
	}

	#item1_container .holder,
	#item2_container .holder,
	#item3_container .holder,
	#ashes_of_cows_container .holder,
	#item4_container .holder,
	#item5_container .holder,
	#item6_container .holder {
		width: 100%;
		height: auto !important;
		bottom: 0;
	}
	#item1_container .holder { background-position: 50% 0; }

	#item1_container .holder .scroll-pane,
	#item2_container .holder .scroll-pane,
	#item3_container .holder .scroll-pane,
	#ashes_of_cows_container .holder .scroll-pane,
	#item4_container .holder .scroll-pane,
	#item5_container .holder .scroll-pane,
	#item6_container .holder .scroll-pane {
		width: 100%;
		height: 100%;

	}
	
	#admin,
	.footer { display: none; }

	.mobile-title {
		position: absolute;
		margin: 0;
		top: 0;
		width: 100%;
		text-align: center;
		font-family: "Titillium Web";
		text-shadow: 0 1px 2px #eee;
		z-index: 1;
	}

	.text-content { padding: 0 10px; }


	/* content */
	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#item4_container .text-content table td,
	#item5_container .text-content table td { display: block; }

	#item4_container .text-content img,
	#item5_container .text-content img,
	#item4_container .text-content td,
	#item5_container .text-content td {
		max-width: none;
		width: 100%;
	}
	#item4_container .text-content td img,
	#item5_container .text-content td img { width: 100% !important; }

	.playing {
		position: relative;
		padding: 5px 0;
		transition: all 0.3s;
		-o-transition: all 0.3s; /* Opera */
		-moz-transition: all 0.3s; /* Firefox 4 */
		-webkit-transition: all 0.3s; /* Safari and Chrome */
	}
	.playing > .track,
	.playing > em { color: #999 !important; }
	.playing .controls {
		position: absolute;
		background-color: #fff;
		border-radius: 16px;
		height: 22px;
		padding: 5px 0;
		right: 36px;
		top: 0;
	}

	.control {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: inline-block;
		background-color: #fff;
		margin: 0 5px;
		text-indent: -10000px;
		background-image: url(../image/icon-controls.png);
		background-repeat: no-repeat;
	}
	#aoc_play { background-position: -22px -22px; }
	#aoc_pause { background-position: -44px -22px; }
	#aoc_stop { background-position: -66px -22px; }

}


@media screen and (min-width: 992px) {
	.mobile-title { display: none; }
}


@media screen and (max-width: 767px) {
	#item2_container .text-content img {
		margin-right: 0 !important;
		float: none !important;
		display: block;
		max-width: 100%;
		height: auto;
	}
}


@media screen and (max-width: 575px) and (max-height: 320px) {
	header nav .menu li a { padding: 5px 10px; }
	header nav .menu li a span { font-size: 18px; }
}


@media screen and (max-width: 479px) {
	#item1_container,
	#item2_container,
	#item3_container,
	#ashes_of_cows_container,
	#item4_container,
	#item5_container,
	#item6_container {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
		height: auto;
		overflow: hidden;
		opacity: 1;
		filter: alpha(opacity=100);
	}
}