/* -----------------------------------------------------------------------------------------------------------------------
DEFAULTS
// dark brown: #67431c
----------------------------------------------------------------------------------------------------------------------- */
html, body, p, ul, dl, li, h1, h2, h3, h4, img	{ margin: 0; padding: 0; }
table, th, td 		{ border-collapse: collapse; border-spacing: 0; vertical-align: top; }
ul 					{ list-style: none; }
img 				{ border: 0; }
a 					{ outline: none; }

/* ============= */
body {
	background: url(/img/style-2.0/gen/bg.gif);
	overflow: auto; /* IE always displays scrollbars, even on a small page. Hide the scrollbars on a small page */
}

div.wrapper	{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	clear: both;
}

#header	{
	margin-bottom: 15px;
	background: url(/img/style-2.0/gen/nav-bg.png) repeat-x;
	height: 56px;
}

/* -----------------------------------------------------------------------------------------------------------------------
TYPOGRAPHY
----------------------------------------------------------------------------------------------------------------------- */
body { font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; font-size: 12px; line-height: 20px; color: #555; }
.content > p, .outline 	{ padding-bottom: 10px; margin: 10px 20px 10px 20px; }
.outline-h 				{ margin: 5px 20px; }
a	 					{ text-decoration: none; color: #67431c; }
a.u 					{ border-bottom:1px dotted; }
a.u:hover				{ border-bottom:1px dotted; color: #2f1a02; }
a.u:active 				{ border: none; }

h1						{ margin: 20px 20px 10px 20px; font-size: 16px; font-weight: bold; color: #333; text-shadow:0 1px 0 #fff; }
h2						{ font-size: 15px; font-weight: normal; margin: 20px 20px 10px 20px; color: #333; text-shadow:0 1px 0 #fff; }
.subnote, .editnote 	{ font-size: 11px; color: #67431c; font-weight: normal; float: right; }
textarea				{ font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; }

/* -----------------------------------------------------------------------------------------------------------------------
CONTENT
all content modules
----------------------------------------------------------------------------------------------------------------------- */
/* GENERAL */
div.sepHead 		{ border-top: 1px solid #eeece0; border-bottom: 1px solid #cdcdcd; margin: 12px; background-color: #efefef; padding: 5px 5px 5px 20px; }
div.sepline,li.sepline			{ border-bottom: 1px solid #eeece0; margin: 5px 0; }
.box 				{ -moz-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background: #fffef6 none repeat scroll 0 0; border: 1px solid #fff; margin-bottom: 20px; }

/* C 
|........|
*/
div.c-wrap 			{ float: left; position: relative; }
div.c-mod 			{ position: relative; width: 960px; background: url(/img/style-2.0/gen/c.png) repeat-y; }
div.c-mod div.content { margin-left: 30px; margin-right: 30px; }

/* C2
|...||...|
*/
div.c2-pri-wrap 	{ float: left; position: relative; }
div.c2-sec-wrap 	{ float: left; position: relative; }
div.c2-mod 			{ position: relative; width: 480px; background: url(/img/style-2.0/gen/c2.png) repeat-y; }
div.c2-mod div.content { margin-left: 30px; margin-right: 30px; }

/* C64 / C46
|......||..|
|..||......|
*/
div.c64-pri-wrap 	{ float: left; position: relative; }
div.c46-sec-wrap 	{ float: right; position: relative; }
div.c64-pri-mod 	{ position: relative; width: 660px; }
div.c64-sec-mod		{ position: relative; width: 300px; }
div.c64-pri-mod .content, div.c46-sec-mod .content { margin-right: 25px; }
div.c64-sec-wrap 	{ float: right; position: relative; }
div.c46-pri-wrap 	{ float: left; position: relative; }
div.c46-sec-mod 	{ position: relative; width: 660px; } 
div.c46-pri-mod 	{ position: relative; width: 300px; }
div.c64-sec-mod .content, div.c46-pri-mod .content { margin-right: 25px; }

/* C3 
|..||..||..|
*/
div.c3-pri-wrap 	{ float: left; position: relative; }
div.c3-sec-wrap 	{ float: left; position: relative; }
div.c3-ter-wrap 	{ float: right; position: relative; }
div.c3-mod 			{ position: relative; width: 320px; color: #777; background: url(/img/style-2.0/gen/c3.png) repeat-y; }
div.c3-mod div.content { margin-left: 30px; margin-right: 30px; }

/* -----------------------------------------------------------------------------------------------------------------------
NAVIGATION
----------------------------------------------------------------------------------------------------------------------- */
ul#navi						{ width: 770px; height: 35px; top: 10px; position: relative; }
ul#navi li 					{ float: left; }
ul#navi li > a, ul#navi li 	{ height: 35px; display: block; position: absolute; top: 0; }
#nav-logo 					{ left: 0; }

ul#navi li#nav-ency a	{
	left: 280px;
	width:120px;
	background-image: url(/img/style-2.0/gen/navigation-encyclopedia.png);
	background-repeat: no-repeat;
}

ul#navi li#nav-videos a	{
	left: 400px;
	width:120px;
	background-image: url(/img/style-2.0/gen/navigation-videos.png);
	background-repeat: no-repeat;
}

ul#navi li#nav-community a	{
	left: 520px;
	width:120px;
	background-image: url(/img/style-2.0/gen/navigation-community.png);
	background-repeat: no-repeat;
}

ul#navi li#nav-artwork a {
	left: 640px;
	width:120px;
	background-image: url(/img/style-2.0/gen/navigation-artwork.png);
	background-repeat: no-repeat;
}

ul#navi li a:hover 			{ background-position: 0 -50px; } 
ul#navi li a.current 		{ background-position: 0 -100px; text-indent: -9999px; }

/* SEARCH */
ul#navi li#nav-search 		{ position: relative; left: 725px; width: 209px; background-image: url(/img/style-2.0/gen/nav-search.png); background-repeat: no-repeat; text-indent: 0; top: 4px; z-index: 9999; }
ul#navi li#nav-search input { background: url(/img/style-2.0/gen/search.gif) center left no-repeat #fff; height: 16px; width: 172px; padding: 1px 4px 2px 16px; margin: 3px 31px 0 7px; font-size: 11px; border: solid 1px #fff; }

/* WIDGETS */
.widget { z-index: 10000; background-color: #000; color: #ccc; width: 320px; float: right;  position: absolute; }

/* CUSTOM WIDGET VALUES */
.widget.livesearch 		{  top: 48px; right: 0; }
#login 					{ position: relative; }
.widget.login 			{  width: 240px; top: 29px; right: 26px; }

/* OTHER WIDGET VALUES */
table.widget td 		{ padding: 5px 10px; border-top: 1px solid #272727; }
table.widget th 		{ padding: 10px; }

.widget .close 			{ background: url(/img/style-2.0/gen/ruse-close.png) center left no-repeat transparent; position: absolute; top: -10px; right: -10px; height: 30px; width: 30px; z-index: 10002; }
.pointer.up 			{ background: url(/img/style-2.0/gen/widget-pointer-up.png) center left no-repeat transparent; position: absolute; top: -21px; height: 30px; width: 30px; }
.pointer.leftside		{ background: url(/img/style-2.0/gen/widget-pointer-up.png) center left no-repeat transparent; position: absolute; left: -12px; height: 30px; width: 30px; }
.pointer.up.center 		{ right: 50%; }
.pointer.leftside.center { top: 50%; }
.pointer.up.right 		{ right: 0; }
.pointer.up.left		{ left: 0; }
.widget .content, .widget-content p, dialog-content p { text-align: left; padding: 8px 14px 10px 14px; }
.widget a 				{ color: #ccc; }
.widget a:hover 		{ color: #fff; text-decoration: none; }
.search-description		{ font-size: 11px; }

/* -----------------------------------------------------------------------------------------------------------------------
ALPHABET NAVI
----------------------------------------------------------------------------------------------------------------------- */
#nav-alpha				{ left: 280px; width:350px; top: 15px; background-repeat: no-repeat; font-size: 14px; }
ul.alpha 				{ margin-bottom: 15px;	 }
.alpha li a 			{ padding: 5px 13px; }
.alpha li a.selected 	{ -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #67431c; color: #fff; }
.alpha li a:hover 		{ -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #d28a48; color: #fff; }

/* -----------------------------------------------------------------------------------------------------------------------
UPPER HEADER
----------------------------------------------------------------------------------------------------------------------- */
#upperHeader 				{ font-size: 11px; text-align: right; margin-right: 30px; }
#upperHeader a 				{ padding: 0 0.5em; }

/* -----------------------------------------------------------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------------------------------------------------------- */
#footer	{ /*background: url(/img/style-2.0/gen/bg.png);*/ margin-top: 0; text-align: center; font-size: 10px; padding-bottom: 25px; }
#footer ul#footer_links li { display: inline; color: #777; }
#footer ul#footer_links li a { color: #777; text-decoration: none; }
#footer ul#footer_links li a:hover { text-decoration: underline; }
#footer ul#footer_links li#webmaster_link { text-align: right; padding-right: 0.5em; border-right: 0.1em solid #777; }
#footer ul#footer_links li#contact_link { text-align: left; padding-left: 0.5em; }
#footer ul#footer_links li#language_link img { margin-left: 10px; position: relative; top: 2px; }
body#contact_page #footer ul#footer_links li#contact_link a:hover { text-decoration: none; }

/* jQuery Form Elements */
.formContent 				{ margin-top: 5px; }
.formLabel label 			{ position: relative; display: block; width: 400px; clear: both; padding: 5px 5px 5px 0; line-height: 30px; margin-bottom: 5px; font-weight: bold; }
.formLabel label.nocontent 	{ border-top: 1px solid #afafaf; border-bottom: 1px solid #afafaf; width: 99%; padding: 20px 0 23px 0; }
.formLabel label.active 	{ background-color: #dbf9C7; }
.formLabel label.error 		{ background-color: #ecd0ce; }				
.formLabel label.required 	{ background: url(/img/gen/required.gif) center left no-repeat; }	
.formLabel label.isgood 	{ background: url(/img/gen/tick.gif) center left no-repeat; }
.formLabel label input 		{ width: 200px; float: right; padding: 5px; border: 1px solid #afafaf; font-size: 14px; color: #333; }
.formLabel label input#streetnr { width: 50px; }
.formLabel .floatLeft 		{ float: left; }
.formLabel label input.active { border: 1px solid green; }
.formLabel label input.error { border: 1px solid red; }				
.formLabel #formsubmit 		{ width: 150px; } 
.formLabel .extraNote 		{ font-weight: normal; font-size: 11px; }

/* Info pop up classes */
.formLabel .infopop 	{ display: block; position: absolute; left: 413px; top: -11px; line-height: 40px; width: 230px; height: 62px; line-height: 62px; text-indent: 30px; color: #333; }
.formLabel .errorpop 	{ color: #ff0000; } 

/* -----------------------------------------------------------------------------------------------------------------------
RECYCLABLES
----------------------------------------------------------------------------------------------------------------------- */
/* Pretty table ---------- */
table.pretty 			{ border-collapse: collapse; }
table.pretty td 		{ padding: 10px; border-top: 1px solid #eeece0; margin: 0 10px 10px 0; }
.hover 					{ background-color: #f5f3e9; }

/* Pretty list ---------- */
ul.horizontal li 			{ float: left; }
.pretty ul, ul.pretty 		{ margin-bottom: 20px; }
.pretty ul li, ul.pretty li { list-style-type: square; padding: 4px; margin-left: 15px; padding-right: 20px; }
.pretty ol li, ol.pretty li { padding: 4px; margin-left: 15px; padding-right: 20px; }
.pretty input, input.pretty { width: 200px; padding: 5px; border: 1px solid #afafaf; color: #333; font-size: 12px; }

/* Text decorations ---------- */
.red 					{ color: red; }
.green 					{ color: green; }
.grey 					{ color: #545454; }
.light-grey				{ color: #b7b7b7; }

.f-right 				{ float: right; }
.f-left 				{ float: left; }
.m-top 					{ margin-top: 20px; }
.f-center 				{ margin-left: auto; margin-right: auto; }

.a-right 				{ text-align: right; }
.a-left 				{ text-align: left; }
.a-center 				{ text-align: center; }

.bold 					{ font-weight: bold; }
.u						{ border-bottom:1px dotted; }
.odd 					{ background-color: #f6f4e8; }
.border 				{ border: 1px solid #67431c; }
.no-opacity 			{ filter:alpha(opacity=100); -moz-opacity:1.0; opacity: 1.0; }

.border-round			{ -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* Message boxes ---------- */
.warning, confirm, note { font-size: 13px; color: #333; padding: 3px; width: 100%; margin: 10px 0; }
.warning 				{ border: 2px solid #fa0000; background-color: #fff; }
.confirm 				{ border: 2px solid #458924; background-color: #fff; }
.note 					{ border: 2px solid #cc0066; background-color: #fff; }

/* Font sizes ---------- */
.xxs 					{ font-size: 10px; }
.xs 					{ font-size: 11px; }
.s 						{ font-size: 12px; }
.m 						{ font-size: 13px; }
.x 						{ font-size: 15px; }
.xl 					{ font-size: 17px; }

/* Forms */
input.input-xs { width: 50px; }
input.input-s { width: 100px; }
input.input-m { width: 200px; }
input.input-l { width: 250px; }

/* Rounded buttons ---------- */
.button, input.button 	{ background: #222 url(/img/style-2.0/gen/button-overlay.png) repeat-x; display: inline-block; padding: 2px 15px 3px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); position: relative; cursor: pointer; border-color:rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35); border-style:solid; border-width:1px; }

a.button:hover 								{ color: #fff; text-decoration: none; }
.button:active 								{ top: 1px; }

/* Sizes ---------- */
.small.button 								{ font-size: 11px; }
.medium.button 								{ font-size: 13px; }
.large.button								{ font-size: 14px; padding: 8px 14px 9px; }
 
/* Colors ---------- */
.blue.button 								{ background-color: #2daebf; }
.red.button 								{ background-color: #e33100; }
.magenta.button 							{ background-color: #a9014b; }
.orange.button 								{ background-color: #ff5c00; }
.yellow.button 								{ background-color: #ffb515; }
.green.button 								{ background-color: #8fb41b; }
.purple.button 								{ background-color: #431a66; }
.grey.button 								{ background-color: #d1d1d1; color: #2c2c2c; }
.black.button 								{ background-color: #414141; }
.neutral.button 							{ background-color: #d1d1d1; color: #333; }

/* Hover colors ---------- */
.green.button, .green.button:visited		{ background-color: #91bd09; }
.green.button:hover							{ background-color: #749a02; }
.blue.button, .blue.button:visited			{ background-color: #2daebf; }
.blue.button:hover							{ background-color: #007d9a; }
.red.button, .red.button:visited			{ background-color: #e33100; }
.red.button:hover							{ background-color: #872300; }
.magenta.button, .magenta.button:visited	{ background-color: #a9014b; }
.magenta.button:hover						{ background-color: #630030; }
.orange.button, .orange.button:visited		{ background-color: #ff5c00; }
.orange.button:hover						{ background-color: #d45500; }
.yellow.button, .yellow.button:visited		{ background-color: #ffb515; }
.yellow.button:hover						{ background-color: #fc9200; }
.neutral.button, .neutral.button:visited	{ background-color: #ffffff; }
.neutral.button:hover						{ background-color: #ffffff; }

/* Buttons 2 */
.ui-button { 
	-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);
	background:url("/img/style-2.0/gen/button-overlay.png") repeat scroll 0 0 #eee;
	border-color:#999999 #999999 #888888;
	border-style:solid;
	border-width:1px;
	color:#333333;
	cursor:pointer;
	display:inline-block;
	font-size:11px;
	font-weight:bold;
	line-height:normal !important;
	padding:2px 6px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
}

.ui-button-confirm {
	background-color:#ff5c00;
	background-position:0 -48px;
	border-color:rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35);
	color:#FFFFFF;
}

/* Utilities ---------- */
.isjs 					{ display: none; }
.nojs 					{ background-color: #f1f1f1; border: 1px solid #ccc; padding: 20px; text-align: center; margin: 60px; color: #555; }
.hand 					{ cursor:	pointer; }
.clearfix:after 		{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix 				{ display: inline-block; }
						/* required comment for clearfix to work in Opera \*/
* html .clearfix 		{ height:1%; }
.clearfix 				{ display:block; }
.clear 					{ clear: both; }
.temploading, .temploadingDark	{ margin: 1px 10px; }

.hidden 				{ visibility: hidden; }
.nodisplay 				{ display: none; }

.readonly				{ opacity: .70; filter:Alpha(Opacity=70); }


/* Popup */
#popup { position:absolute; top:20px; left:100px; }
.popup-title, #popup h2 { font-size:13px; font-weight:bold; color:#67431c; margin:0; padding:5px 10px; }
.popup-wrapper { position:relative; border:1px solid #67431c; width: 314px; background-color:#fffef6; }
.popup-wrapper p { padding:5px 10px; font-size:11px; }
.popup-sep { border-bottom: 1px solid #e0e0e0; }
.popup-footer { text-align:center; border-top: 1px solid #e0e0e0; background-color: #67431c; color:#fff;}
.popup-close a { position:absolute; top: 6px; right: 8px; font-size:10px; padding: 1px 4px; }
.popup-close a:hover { background-color:#67431c; padding: 1px 4px; color:#fff; }
.popup-content li { padding: 5px 10px; }

.popup-arrow-n-w { position:absolute; top:-5px; left:5px; background: url(/img/style-2.0/gen/popup-arrow.png) no-repeat 0 -22px transparent; height:6px; width:14px; z-index: 5; }

/* flyout */
.flyout { width: 240px; padding: 4px 8px; border: 1px solid #b5b5b5; background-color: #ffffcc; z-index: 10; color: black; }

/* global messages */
#globalMessage 			{  width: 100%; background-color: #fff;  opacity: .90; filter:Alpha(Opacity=90); z-index: 10003; border-bottom: solid #474747 2px; z-index: 10003; color:#000; height: 20px; padding: 10px; top: 0; display: none; text-align: center; font-weight: bold; font-size: 14px; position: fixed; }
#globalMessage-close 	{ background: url(/img/style-2.0/gen/ruse-close.png) top left no-repeat transparent;  height: 30px; width: 30px; margin-right: 20px; margin-top: -5px; float: right; }
#globalMessage.yellow 	{ border-bottom: 2px solid #ffd700; background-color: #ffffdd; }
#globalMessage.red 		{ border-bottom: 2px solid #fb3636; background-color: #ffc1c1; }
#globalMessage.blue 	{ border-bottom: 2px solid #3b5998; background-color: #eceff5; }
#globalMessage.green 	{ border-bottom: 2px solid #237225; background-color: #d9feda; }

/* TipTip CSS - Version 1.2 */
#tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; }
#tiptip_holder.tip_top { padding-bottom: 5px; }
#tiptip_holder.tip_bottom { padding-top: 5px; }
#tiptip_holder.tip_right { padding-left: 5px; }
#tiptip_holder.tip_left { padding-right: 5px; }
#tiptip_content { font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.25); background-color: rgb(25,25,25); background-color: rgba(25,25,25,0.92); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 0 3px #555; -webkit-box-shadow: 0 0 3px #555; -moz-box-shadow: 0 0 3px #555; }
#tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px;  height: 0; width: 0; }
#tiptip_holder.tip_top #tiptip_arrow { border-top-color: #fff; border-top-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #fff; border-bottom-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_right #tiptip_arrow { border-right-color: #fff; border-right-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_left #tiptip_arrow { border-left-color: #fff; border-left-color: rgba(255,255,255,0.35); }
#tiptip_holder.tip_top #tiptip_arrow_inner { margin-top: -7px; margin-left: -6px; border-top-color: rgb(25,25,25); border-top-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px; margin-left: -6px; border-bottom-color: rgb(25,25,25); border-bottom-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_right #tiptip_arrow_inner { margin-top: -6px; margin-left: -5px; border-right-color: rgb(25,25,25); border-right-color: rgba(25,25,25,0.92); }
#tiptip_holder.tip_left #tiptip_arrow_inner { margin-top: -6px; margin-left: -7px; border-left-color: rgb(25,25,25); border-left-color: rgba(25,25,25,0.92); }
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content { padding: 4px 8px 5px 8px; background-color: rgba(45,45,45,0.88); }
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { border-bottom-color: rgba(45,45,45,0.88); }
	#tiptip_holder.tip_top #tiptip_arrow_inner {  border-top-color: rgba(20,20,20,0.92);}
}