/* CSS Document */
body {
  font-family: Arial, Verdana, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 15px;
  font-size: 11px;
  color: #615e56;
  background: url(/images/bg.jpg) #a4b0b0;
}

/* Svens Styleguide 
	Dunkelgrau (Bold) #37342e
	Mittelgrau (Normale Schrift) #615e56
	Hellgrau   (?) #86837a
	
	Trennlinien (nicht umrandungen):
	$Dunkelgrau oder #d0d0cb
	
	Boxenschatten: #d0d4d8

	#cfd0ca, kommt auch oft vor??? zb farbe der unteren linie bei währungsüberschrift

*/

strong { color: #37342e; }

form { margin: 0; padding: 0; font-size: 11px;}

img {
  border: none;
}

a, a:visited, a:active {
	color: #535745;
	text-decoration: none;
}

a:hover {
	color: #636559;
	text-decoration: underline;
}

.clear { clear: both; }

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

.float-left { float: left; }
.float-right { float: right; }

.fill10px { height: 10px; } /* used in profiles, to pad the last box (10px bottom-margin) to 20px) */
.fill5px { height: 5px; }

h2 {
  margin: 0px 0 8px 0;
  padding: 0px 0 7px 0;
  color: #37342e;
  font-size: 21px;
  font-weight: bold;
  border-bottom: 1px solid #86837a;
}

h3, h4 {
  font-weight: bold;
	color: #37342e;
  margin: 0 0 2px 0;
  padding: 0;
}

h3 { font-size: 13px; }
h4 { font-size: 11px; }


h3 a, h3 a:visited, h3 a:active { text-decoration: none; color: #393A35; }
h3 a:hover { text-decoration: underline; }

h2.light, h3.light, h2.dark, h3.dark {
	line-height: 23px;
	background: url(/images/box_head_1_m.gif) repeat-x #ffcc00;
	border-bottom: 1px solid #dbbc00;
	border-top: 1px solid #fffad1;
	height: 25px;
	margin: 0;
	padding: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

h2.dark, h3.dark {
	background: url(/images/box_head_2_m.gif) repeat-x #000000;
	color: white;
	border-bottom: none;
	border-top: 1px solid #828c92;
}

h2.light a, h2.light a:visited, h2.light a:active { text-decoration: none; color: white; }
h2.light a:hover { text-decoration: underline; }

h3.light, h3.dark { height: 15px; font-size: 16px; line-height: 15px; }
h3.light { background: url(/images/box_head_1_s.gif) repeat-x #ffcc00; }
h3.dark { background: url(/images/box_head_2_s.gif) repeat-x #000000; }

p { margin: 0; padding: 0; }

.heading-with-order { position: relative; padding-bottom: 5px; }

.order-by {
	position: absolute;
	top: 0; right: 0;
	height: 20px;
/*	float: right; */
	font-size: 12px;
	line-height: 20px;
	text-align: right;
	color: #615e56;
	font-weight: bold;
}

.order-by div {
	width: 120px;
	height: 20px;
	float: left;
	text-align: center;
	color: #37342e;
}

.order-by a {
	color: #615e56;
	font-weight: normal;	
}

.admin { background: #F8BAFE; border: 1px solid #63006E; font-size: 11px; }
.admin a, .admin a:active, .admin a:visited, .admin a:hover {	color: #63006E;	text-decoration: none; }
.admin a:hover { text-decoration: underline; }

.admin-editable {
	border: #c853c7 1px dashed;
}

/* when admin links are disabled through menu */
.admin-editable.invisible { border: none; }


.admin.order-details {
	padding: 10px;
	position: absolute;
}

.translation_missing {
	color: #c853c7;
}

input[type=submit], a.button {
	display: block;
	background: url(/images/btn_20.gif) #545860 repeat-x;
	outline: none;
	height: 20px;
	width: 188px;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	margin: 0; padding: 0;
	margin-bottom: 5px;
	border: 1px solid;
	border-left-color: #bac2c7;
	border-top-color: #bac2c7;
	border-right-color: #0a141d;
	border-bottom-color: #0a141d;
	text-decoration: none;
}

input[type=submit]:hover, a.button:hover {
	color: #ddd;
}

a.button.tiny {
	font-size: 9px;
	width: auto;
	height: none;
	padding: 0;
}

/* same as normal button, but bright/gray, used inside forms */
a.button.tiny.utility {
	background: url(/images/util_btn_20.gif) #ccced3 repeat-x;	
	border-left-color: #d1d7da;
	border-top-color: #d1d7da;
	border-right-color: #475258;
	border-bottom-color: #475258;
	color: #37342e;
}

a.button.tiny.utility:hover { opacity: 0.7;	filter: alpha(opacity=70); }

textarea { resize: vertical; }

input[type=text], input[type=password], textarea {
	border: 1px solid;
	
	border-top-color: #cfd0ca;
	border-left-color: #cfd0ca;

	border-right-color: #ececea;
	border-bottom-color: #ececea;
	
	background: #f6f5f4;
	margin: 0; padding: 5px;
	margin-bottom: 5px;
	width: 178px;
  font-family: Lucida Grande, Arial, Verdana, sans-serif;
  font-size: 13px;
  line-height: 20px;
}


/* will_paginate plugin-styles */

.pagination {
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: center;
}

.pagination a, .pagination span {
	height: 20px;
	border: 1px solid #d0d0cb;
	padding-left: 6px; padding-right: 6px;
	padding-top: 3px; padding-bottom: 3px;
	margin-right: 5px;
	background: url(/images/subnav_bg.gif) #fefefe repeat-x;
	text-decoration: none;
	text-align: center;
	color: #615e56;
}

.pagination a.disabled { color: #fefefe; }

.pagination span.current {	background: white; font-weight: bold; }

.pagination span.gap { background: none; border: none; padding-left: 0; padding-right: 0;}



/* styles for forms:
   use form-wide for parts where a descriptive text is right-aligned to the page */

.form-wide h2, .form-middle h2 {
	padding-top: 20px;
	padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-wide, .form-middle {
	font-size: 13px;
	line-height: 20px;
}

.form-middle {
	padding-left: 210px;
	padding-right: 140px;
}

.form-middle input[type=submit] {
	margin-top: 20px;
	width: 188px;
	margin-bottom: 20px;
}

.form-middle .checkbox {
	min-height: 45px;
}

/* used for ajax-validation on users#new (for login name) */
input.valid { background: #E2F5D5; }

input.invalid {	background: #F5AB8C; }


li.current {
	font-weight: bold;
	color: #37342e;
}

.form-wide input[type=text].wide {
	width: 458px; /* 470 - padding der eingabefelder */
}


.form-wide {
	padding-left: 70px;
	padding-right: 140px;
}

/* use this for descriptions of the fields */
.form-wide > span, .form-wide span.second {
	display: block;
	text-align: right;
	float: left;
	width: 119px;
	padding-right: 20px;
}

.form-wide .full, .form-wide .half { float: left; min-height: 45px; }
.form-wide .full { width: 470px; }
.form-wide .half { width: 190px; }

.form-wide .half select, .form-wide .full select { width: 190px; }

.form-wide .help  {	float: left; width: 260px; margin-left: 10px; padding-left: 10px; min-height: 45px; padding-bottom: 20px; }

.form-wide > span.second  {	width: 70px;	padding-left: 0; }

/* if date-helper is used, three select-boxes have to fit in one row. */
.form-wide .full.date-helper select {
	width: 61px;
}

/* used to display AGBs etc. */
.inline-text {
	height: 200px;
	width: 448px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid;

	border-top-color: #cfd0ca;
	border-left-color: #cfd0ca;
	border-right-color: #ececea;
	border-bottom-color: #ececea;
	padding: 10px;
	text-align: justify;
	font-size: 12px;
}

.inline-text.expanded {
	overflow-y: visible;
	height: auto;
}

.inline-text h1, .inline-text h2 {
	margin-top: 10px; margin-bottom: 10px;
	font-size: 16px;
	line-height: 16px;
	border: none;
}

/* additional class for important input fields (create posts, etc.) */
.no-padding {
	padding: 0;
}

/* additional styles for input-fields, added when "input description"-feature is
   enabled */
.input-description {
	color: #BABBB3;
}

#page {
  text-align: left;
  margin: auto;
  width: 860px;
  background: #e8eaed;
}

#footer {
	padding: 10px;
  margin: auto;
	margin-top: 10px;
  width: 840px;	
	background: url(/images/footer_bg.gif) repeat-x #d1d4d8;	
	text-align: center;
}


/* lightbox container, used for content editor (=no shadow) */
#content-editor-space { position: absolute; }

/* lightbox */

#lb-shadow {
	z-index: 10000;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.lb-container {
	z-index: 11000;
	text-align: left;
	top: 0;
	width: 540px;
	position: absolute;
	background: #e8ebed;
}

.lb-container > h2 {
	border-bottom: none;
	background: #d0d4d8;
	padding-left: 95px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

#header {
  width: 860px;
  height: 120px;
  background: url(/images/header_bg.gif) #ffde37;
}

#embedded { text-align: center; }
#embedded #header { width: auto; text-align: center; }
#embedded #login-field { padding-top: 20px; width: 200px; text-align: left; }
#embedded #form { padding-top: 20px; padding-bottom: 20px; }

#logo {
  margin-top: 15px;
  margin-left: 20px;
  width: 239px;
  height: 90px;
  float: left;
}

#auth {
	margin-top: 20px;
	margin-right: 20px;
	width: 140px;
/*	height: 80px;*/
	float: right;
}

#auth input[type=submit] {
	background: url(/images/btn_15.gif) #545860 repeat-x;
	width: 25px;
	height: 15px;
	font-size: 10px;
	margin: 0; padding: 0;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

#auth input[type=text], #auth input[type=password] {
	border: 1px solid;
	border-top-color: #dbbc00;
	border-left-color: #dbbc00;

	border-right-color: #fffad1;
	border-bottom-color: #fffad1;
	background: #FFFFFF;
	width: 110px;
	height: 15px;
	margin: 0; padding: 0;
	margin-bottom: 5px;
}

.field-spin {
	position: relative;
	top: -20px;
	left: 94px;
	width: 16px;
	height: 14px;
	background-image: url(/images/spin_small.gif);
}

#search-preview {

}

div#search-preview {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #d0d4d8;
  margin:0;
  padding:0;
}
div#search-preview ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
div#search-preview ul li.selected { background-color: #ECECEA;}
div#search-preview ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  height:32px;
  cursor:pointer;
}

#lcont { position: absolute; }
#langs {
	top: 10px;
	left: 20px;
	position: relative;
	
}

.flag, .flag-selected {
	margin-right: 5px;
	padding-top: 5px;
	padding-bottom: 1px;
}

.flag-selected {
	border-bottom: 1px #0A141E solid;
}

#flash-js { display: none; }

#flash-notice, #flash-error {
	margin-bottom: 20px;
	margin-left: 20px; margin-right: 20px;
	text-align: center;
	font-weight: bold;
	padding: 10px;
	border: 1px solid;
	color: #FFFFFF;
}

#flash-notice {
  background: url(/images/bg_notice.gif) #97BF0D repeat-x;
  border-top-color: #d3debb; border-left-color: #d3debb;
  border-right-color: #67971c; border-bottom-color: #67971c;
}

#flash-error { 
	background: url(/images/bg_error.gif) #B84D1F repeat-x;
  border-top-color: #eacab1; border-left-color: #eacab1;
  border-right-color: #b84d1e; border-bottom-color: #b84d1e;
}

#support-chat-container {
	position: absolute;
	width: 1px; height: 1px;
}

#VolusionLiveChat {
	position: relative;
	left: -130px;
}

#nav-to-page {
	height: 20px;
  background: url(/images/nav_to_page.gif) #e8eaed repeat-x;
}

#nav { 
  background: url(/images/tabs.gif) #ffcc00 repeat-x;
	background-position: 0 -180px;
  font-weight: bold;
	font-size: 13px;
	text-transform: uppercase;
	height: 30px;
}

#nav a, #nav a:active, #nav a:visited, #nav:hover {
  line-height: 18px;
  color: #FFFFFF;
  text-decoration: none;
}

#nav .selected a, #nav .tab-start-selected a {
  color: #37342e;
}

#nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* nav-icon */
#nav div.ni {
  width: 20px;
  height: 20px;
  background: yellow;
  margin-right: 3px;
  float: left;
}

#nav li { 
  padding: 0;
  margin: 0;
  float: left;
	text-align: center;
  padding-top: 5px;
  
  /* tab-spezifisch */
  background: url(/images/tabs.gif) #0A141E no-repeat;
  width: 108px;
  height: 25px;
/*  padding-left: 12px; das hier nur wenn der text nicht zentriert ist*/
  padding-left: 6px; padding-right: 6px;

}

#nav .prev-selected { background-position: 0 -30px; }
#nav .next-selected { background-position: 0 -60px; }
#nav .tab-start { background-position: 0 -90px; }
#nav .tab-start-next-selected { background-position: 0 -120px; }
#nav .selected, #nav .tab-start-selected { background-position: 0 -150px; }

#nav .start, #nav .start-sel, #nav .end, #nav .end-sel {
  width: 10px;
  height: 30px;
  padding: 0;
  background: url(/images/tab_corners.gif) #0A141E no-repeat;
}

#nav .start { background-position: 0 -0px; }
#nav .start-sel { background-position: 0 -30px; }
#nav .end { background-position: 0 -60px; }
#nav .end-sel { background-position: 0 -90px; }

#subnav { margin-bottom: 20px; margin-left: 20px; }
#subnav a {
	float: left;
	display: block;
	width: 118px;
	height: 22px;
	border: 1px solid #d0d0cb;
	padding-top: 3px;
	margin-right: 20px;
	background: url(/images/subnav_bg.gif) #fefefe repeat-x;
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	text-align: center;
	color: #615e56;
}

#subnav span a {
	background-position: 0 -30px;
	color: #37342e;
}

#subnav a:hover {	opacity: 0.7;	filter: alpha(opacity=70); }
#subnav a:active { 	opacity: 0.7;	filter: alpha(opacity=70);	border-color: #615e56; }


#subnav a.last {	margin-right: 0; }

textarea.content-editor {
	width: 690px;
	height: 350px;
}

textarea.content-editor.small {
	width: 510px;
	height: 300px;
}


#cms-lang-switch {
	background: #615e56;
	padding-top: 5px;
	padding-left: 5px;
}

#cms-lang-switch a, #cms-lang-switch a.sel {
	display: block;
	width: 70px;
	float: left;
	padding: 5px;
	margin-right: 5px;
	background: #cfd0ca;
	text-align: center;
	text-decoration: none;
}

#cms-lang-switch a.sel {
	background: #ffffff;
	font-weight: bold;
}

/* page with text from content management-system */
#cms, #landing {
	background: white;
	padding-top: 60px;
	padding-bottom: 45px;
	padding-left: 210px;
	padding-right: 70px;
	border-right: 1px solid #d0d4d8;
	border-bottom: 1px solid #d0d4d8;
	line-height: 20px;
	font-size: 12px;
}

#cms.preview, #landing.preview {
	padding: 0;
}

#cms p.img-left {
    float: left;
    padding: 0; margin: 0;
    margin-right: 20px;
    margin-bottom: 10px;
}

#cms p.img-right {
    float: right;
    padding: 0; margin: 0;
    margin-left: 20px;
    margin-bottom: 10px;
}


#landing {
	padding-left: 85px;
	padding-right: 85px;
	font-size: 14px;
	line-height: 20px;
}

#landing .rltv {
	position: relative;
}

#landing .rltv div {
	position: absolute;
}

#landing .b1, #landing .b2, #landing .b3 { 
	top: -190px;
	left: 30px;
	width: 200px;

}

#landing .b2 { left: 420px; }
#landing .b3 { left: 210px; top: -120px; }

#landing .explain {
	background: #e9eaee;
	padding-left: 20px; padding-right: 20px;
	text-align: justify;
}

/* use h2 inside articles, h1 is automatically used for the document title */
#landing h1, #landing h2, #cms h1, #cms h2 {
	font-size: 21px;
	font-weight: bold;
	line-height: 30px;
	color: #37342e;
	border: none;
	padding: 0; margin: 0;
	padding-bottom: 10px; 
}

#landing big { 
	font-size: 14px;
	line-height: 20px;
}

#landing a.bigbtn {
	display: block;
	height: 65px;
	background: url(/images/btn_65.gif) #2d353b;
	color: white;	
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;
	font-size: 20px;
	line-height: 65px;
	font-weight: bold;
	text-decoration: none;

	border: 1px solid;
	border-left-color: #bac2c7;
	border-top-color: #bac2c7;
	border-right-color: #0a141d;
	border-bottom-color: #0a141d;
}

#landing a.bigbtn:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}


#cms h2 {	padding-top: 15px; }
#cms h3 { padding-bottom: 10px; }
#cms h4 { font-size: 13px; }
#landing p { margin:0; padding: 0; padding-bottom: 15px; }
#cms p { margin:0; padding: 0; padding-bottom: 15px; text-align: justify; }

#cms ul { padding-left: 20px; text-align: justify; }
#cms li { padding-right: 20px; margin-bottom: 20px; }



#cms table { padding: 0; margin: 0; }
#cms table tr td { padding-right: 10px; }
#cms a { 	color: #6D8DBF; }


/*	Dunkelgrau (Bold) #37342e
	Mittelgrau (Normale Schrift) #615e56
	Hellgrau   (?) #86837a */

/* table of content-simulation */

#cms .toc {  /* taken from instruments-table */
	background: url(/images/buzz_bg.gif) repeat-x #fed01e;
	border-top: #f4f5f6 1px solid;
	border-right: #d1d4d8 1px solid;
	border-bottom: #dbbc00  1px solid;

	margin-bottom: 5px; 	padding: 10px;
}

#cms .toc a { color: #86837a; }

#cms .toc p { padding-bottom: 0; }

#cms .toc h2 { border-bottom: none; 
	font-size: 14px;
	line-height: 10px;
	padding-top: 0px;
	border-bottom: 1px solid #615e56;
	margin-bottom: 10px;
	padding-bottom: 8px;
}

a.aqua, #cms a.aqua {
	background: url(/images/content/empty_button.gif) no-repeat;
	font-size: 14px; font-weight: bold;	font-style: italic;
	text-decoration: none;	display: block;
	height: 25px;	width: 130px;
	text-align: center;	line-height: 25px;
	color: #e8ebed;	
}

a.aqua.wide, #cms a.aqua.wide {
	background: url(/images/content/empty_button_big.gif) no-repeat;
	width: 200px;
}

a.aqua:hover {
 opacity: 0.7;	filter: alpha(opacity=70);
}


/* youtube video thumbnails used in help */

.yt-thumb {
	float: left;
	width: 166px;
	min-height: 133px;
	padding-right: 19px;
}

.yt-thumb.last {
	padding-right: 0;
}

.yt-thumb div {
	text-align: center;
	background: #86837a;
	padding: 5px;
	color: #ffffff;
}

a.yt-thumb:hover {
	text-decoration: none;
}

/* styles for showing status-updates in a list  */
.tl-item {
	border-bottom: 1px solid #cfd0ca;
	border-right: 1px solid #cfd0ca;
	min-height: 40px;
}

.tl-reply-counter {
	text-align: right;
	padding: 5px;
	background: #f0f0ee;
}

.tl-menu {
	background: url(/images/ev_menu_bg.png) no-repeat;
	position: relative;
	z-index: 10;
	margin: 5px;
	padding: 5px;
	height: 30px;
	width: 70px;
	top: -50px;
	left: 380px;
}



.tl-menu a {
	text-decoration: none;
	color: #f4f5f6;
}


.tl-avatar { padding: 5px; float: left; height: 40px; width: 40px; }

.tl-order-desc a, .tl-text a {
	color: #37342e;
}

.tl-order-desc, .tl-order-summary, .tl-text, .tl-ts {
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
	min-height: 40px;
	color: #605d55;
	line-height: 13px;
}

.tl-order-desc {
	font-size: 11px;
}

.tl-text em {
	font-family: Georgia, Times New Roman, serif;
	font-size: 11px;
	font-style: italic;
}


.tl-order-desc {
	width: 200px; /* 220 - 2x10 */
}

.tl-order-summary {
	width: 110px;
}

.tl-order-desc .em-pos, .tl-order-summary .em-pos { color: #007734; }
.tl-order-desc .em-neg, .tl-order-summary .em-neg { color: #ae3621; }

.tl-order-desc.open {	background: url(/images/tl_open1.gif) repeat-x #eee9c3; }
.tl-order-summary.open {	background: url(/images/tl_open2.gif) repeat-x #e4dfbc; }
.tl-order-desc.opened {	background: url(/images/tl_opened1.gif) repeat-x #f1e179; }
.tl-order-summary.opened {	background: url(/images/tl_opened2.gif) repeat-x #e6d875; }

.tl-order-desc.close {	background: url(/images/tl_close1.gif) repeat-x #d5e0e8; }
.tl-order-summary.close {	background: url(/images/tl_close2.gif) repeat-x #cdd8e0; }
.tl-order-desc.closed {	background: url(/images/tl_closed1.gif) repeat-x #afcde1; }
.tl-order-summary.closed {	background: url(/images/tl_closed2.gif) repeat-x #a8c5d8; }



.tl-text {
	width: 330px;
	background: url(/images/tl_text.gif) #ededeb repeat-x;
}

.tl-text.bonus {
	background: url(/images/tl_bonus.gif) #d5e9bc repeat-x;
}


.tl-comment.reply {
	margin-left: 50px;
}

.tl-comment.reply .tl-text {
	width: 280px;
}

.tl-comment.reply textarea {
	width: 265px;
	height: 100px;
}

.tl-ts.reply-form {
	height: 142px;
}

.tl-btn-busy {

}

/* timestamp */
.tl-ts {
	width: 50px;
	background: url(/images/tl_ts.gif) #f0f0ee repeat-x;
}


/* Misc Toolbar-Buttons (Userlist) */
.btn-small, .btn-wide {
	display: block;
	border: 1px solid #d0d0cb;
	width: 28px;
	height: 23px;
	background: url(/images/small_buttons.gif) #f5f5f3 no-repeat;
	margin-bottom: 10px;
}

.btn-wide { background: url(/images/wide_buttons.gif) #fff no-repeat;
						width: 120px; height: 25px; padding-left: 40px; padding-top: 10px; 
						border: none; margin-bottom: 0; }

/* thinner version of the wide-buttons (but also with visible description),
   used for "inbox" "write reply" etc.*/
   
.btn-wide.thin { border: 1px solid #d0d0cb; 
								 height: 20px; 
								 padding-top: 5px;
								 padding-left: 40px;
								 width: 130px;
								 margin-right: 20px;
							}

.btn-small.last  { margin-bottom: 0; }
.btn-wide.thin.last { margin-right: 0; }

.btn-small span { display: none; }

.btn-wide span   { font-size: 16px; font-weight: bold; color: #86837a;}
.btn-wide.thin span { font-size: 13px; }

.btn-small:hover, .btn-wide:hover {	opacity: 0.7;	filter: alpha(opacity=70); text-decoration: none; }

.btn-small:active { 	opacity: 0.7;	filter: alpha(opacity=70);	border-color: #615e56; }


.btn-small.follow 		{ background-position: 0 0px; }
.btn-small.unfollow 	{ background-position: 0 -35px; }
.btn-small.message 		{ background-position: 0 -70px; }
.btn-small.italic 		{ background-position: 0 -105px; }
.btn-small.bold 			{ background-position: 0 -140px; }
.btn-small.link 			{ background-position: 0 -175px; }
.btn-small.quote 			{ background-position: 0 -210px; }
.btn-small.image 			{ background-position: 0 -245px; }

.btn-wide.no-btn 			{ padding-left: 10px; width: 320px; }
.btn-wide.no-btn:hover { opacity: 1;	filter: alpha(opacity=100); }

.btn-wide.message 		{ background-position: 0 -35px; }
.btn-wide.unfollow 		{ background-position: 0 -70px; }
.btn-wide.follow 			{ background-position: 0 -105px; }

.btn-wide.thin.write 		{ background-position: 0 -190px; }
.btn-wide.thin.inbox 		{ background-position: 0 -215px; }
.btn-wide.thin.language { background-position: 0 -240px; padding-left: 30px; width: 225px; margin-right: 0; }


/* basic box to place further elements in, with 1px shadow-lines on the outside */
.box {
	background: white;
	border-right: 1px solid #d0d4d8;
	border-bottom: 1px solid #d0d4d8;
	margin-bottom: 10px;
}

.box.no-shadow {
	border: none;
}

.pad5 {
	padding: 5px;
}

.pad10 {
	padding: 10px;
}


/* Columns (12 columns each 60px / 20px border) */
#col-small, #col-med, #col-full {
  margin-left: 20px;
  float: left;
} 

/* small: 5 columns (300 px + 20 border) */
#col-full {
  width: 820px;
  float: none;
}

/* medium: 7 columns (450 px + 20 border) */
#col-med {
  width: 471px;
  margin-left: 19px;
}

/* small: 5 columns (300 px + 20 border) */
#col-small {
  width: 331px;
  margin-left: 19px;
}







/* gauges (sg = small-gauge, ng = normal-gauge) */

.sg-frame {
	border: 1px solid #9c9c92;
	background: url(/images/gauge_small_bg.gif);
	width: 100px;
	height: 10px;
	float: left;
	margin-bottom: 0px;
}

.sg-spacer, .sg-pos, .sg-neg {	height: 10px; float: left; }
.sg-pos { background: url(/images/gauge_small_pos.gif); border-left: 1px solid #9c9c92; }
.sg-neg { background: url(/images/gauge_small_neg.gif); border-right: 1px solid #9c9c92; }

.ng-frame {
	border: 1px solid #9c9c92;
	background: url(/images/gauge_norm_bg.gif);
	width: 310px;
	height: 20px;
	float: left;
	margin-bottom: 5px;
}

.ng-spacer, .ng-pos, .ng-neg {	height: 20px; float: left; }
.ng-pos { background: url(/images/gauge_norm_pos.gif); border-left: 1px solid #9c9c92; }
.ng-neg { background: url(/images/gauge_norm_neg.gif); border-right: 1px solid #9c9c92; }

/* instrument/currecny-statistics */
table.istat {
	margin: 0; padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

table.istat td {
	margin: 0; padding: 0;
	padding-right: 10px;
}

table.istat td + td { /* alle außer dem ersten, da :first-child nicht im IE7 funzt */
	text-align: right;
}

table.istat td:nth-child(3) {
	text-align: left;
}


/* breadcrumbs, only used in groups atm */
.crumbs {
	padding-bottom: 20px;
	font-size: 14px;
}


/* Svens Styleguide 
	Dunkelgrau (Bold) #37342e
	Mittelgrau (Normale Schrift) #615e56
	Hellgrau   (?) #86837a
	
	Trennlinien (nicht umrandungen):*/

.crumbs a { color: #615e56; }
.crumbs span { color: #86837a; }

/* Emphasis-colors for performance, is used in the plusminus-helper
   and online/offline indicator */
.em-pos { color: #75951a; }
.em-neg { color: #b44d24; }
.em-neutral { color: #353631; }


/* activity-plan (trading times of a user) */
.activity {
	background: #67971c;
	width: 96px;
	height: 25px;
}

.activity div {
	background: #ececea;
	width: 4px;
	height: 24px;
	float: left;
}

.activity-range {
	width: 96px;
	text-align: center;
}

/* User list item */
.userlist-item, .messagelist-item {
	height: 70px;
	background: white;
	border-right: 1px solid #d0d0cb;
	border-bottom: 1px solid #d0d0cb;
	margin-bottom: 5px;
}


.userlist-item .col2, .userlist-item .col3, .userlist-item .col4,
.userlist-item .col5, .userlist-item .col6 {
  float: left;
  margin: 5px;
  height: 60px;
  border-right: 1px solid #d0d0cb;
}

.userlist-item .col1 {	padding: 5px;	width: 60px;	float: left; }
.userlist-item .col2 { margin-left: 0; width: 185px; }
.userlist-item .col3 { width: 80px; }
.userlist-item .col4 { width: 295px; }
.userlist-item .col5 { width: 105px; }
.userlist-item .col6 { width: 29px; 
	float: right;
  text-align: right;
  margin-right: 5px;
	border: none; 
}


/* Messages (messagelist-item basestyle is the same as for userlist, defined above! 
   TODO: maybe its better to refactor to a generic list-style w/ addons .messages oder .users */
.messagelist-item { height: 50px; }
   
.messagelist-item .col1, .messagelist-item .col2, .messagelist-item .col3,
.messagelist-item .col4, .messagelist-item .col5 {
  float: left;
  padding: 5px;
  height: 40px;
}

.messagelist-item .col1 { padding: 0; height: 50px; width: 20px; text-align: center; }
.messagelist-item .col3 { width: 190px; }
.messagelist-item .col4 { width: 505px; background: url(/images/small_list_bg.gif) #ffffff repeat-x; }
.messagelist-item .col5 { width: 23px; padding: 0; text-align: center; }

.messagelist-item.unread .col1 { background: url(/images/msg_list_unread.gif) #e4dfbc repeat-x; }
.messagelist-item.unread .col3 {	background: url(/images/tl_open1.gif) repeat-x #eee9c3; }
.messagelist-item.unread .col4 {	background: url(/images/tl_open2.gif) repeat-x #e4dfbc; }

.messagelist-item .btn {
	display: block;
	width: 25px;
	height: 25px;
	background: url(/images/msg_buttons.gif) #ffffff no-repeat;
	text-decoration: none;
}

.messagelist-item .btn.delete { background-position: 0 -25px; }

.messagelist-item .btn span { display: none; }
.messagelist-item .btn:hover  {	opacity: 0.7;	filter: alpha(opacity=70); }
.messagelist-item .btn:active { opacity: 0.7;	filter: alpha(opacity=70);	border-color: #615e56; }

/* Columns for the users list-table */

/*
.list-column  {
	margin-top: 		10px;
	margin-bottom: 	10px;
	padding-right: 	10px;
	margin-right: 	10px;
  border-right: 	1px solid #C6C6C6;
  height: 				60px;
	float: 					left;
}

.last-col {	margin-right: 0; padding-right: 0; border: none;  }
*/




/* Instruments, listing and detailed view */
.instrument-box {
	background: url(/images/instr_bg_big.gif) #c4c7cc repeat-x;
	width: 241px;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 10px;
	border: 1px solid;
	float: left;
	border-left-color: #d1d7da;
	border-top-color: #d1d7da;
	border-right-color: #475258;
	border-bottom-color: #475258;
}

.instrument-box.small {
	background: url(/images/instr_bg_small.gif) #c4c7cc repeat-x;
	width: 107px;
}

.instrument-box h2 { border-bottom: none; }

.instrument-box.big h2 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.instrument-box.small h2 {
	font-size: 19px;
	border-bottom: 1px solid #a4b0b0;
	margin-bottom: 10px;
	padding-bottom: 8px;
}

.instrument-box.small h3 {
 	margin-bottom: 10px;
}


.instrument-box.end {
	margin-right: 0;
}

.box.instruments {
	padding-bottom: 5px;
}

.box.instruments > h2 {
	border-bottom-color: #cfd0ca;
}

.tbl-instrument {
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: 10px;
	border-top: 1px solid #a4b0b0;
}

.tbl-instrument tr:first-child td { padding-top: 10px; }
.tbl-instrument tr td { width: 33%; }

.tbl-instrument tr td + td +td { text-align: right; }

#instrument-chart {
	float: left;
	width: 530px;
}

#instrument-details {
	margin-left: 20px;
	width: 230px;
	float: left; 
}

/* modification of the tbl-instrument is a bit complicated, but with this we can
   use the _instrument_details table in both the listing and the detailed view of the
   instrument. */
#instrument-details .tbl-instrument { border-top: none; border-bottom: 1px solid #d0d0cb; }
#instrument-details .tbl-instrument { padding-top: 0; margin-top: 0; }
#instrument-details .tbl-instrument:first-child tr:first-child td { padding-top: 0; }
#instrument-details .tbl-instrument tr + tr td { padding-bottom: 10px; }
#instrument-details .tbl-instrument + .tbl-instrument { margin-bottom: 20px; }


/* body p is used in misc. formattings, showing group postings as well as emails.
   redcloths uses p to separate paragraphs */
.body p {
	margin-top: 15px;
}


.body p a {
	color: #21201E;
}



/* groups */

.group.header {
	padding-bottom: 10px;
	border-bottom: 1px solid #cfd0ca; 
	margin-bottom: 20px;
}

.group.item {
	height: 141px;
}

.group .name {
	width: 260px; float: left;
}

.group .picture {
	background: #fefefe;
	padding: 10px;
	height: 84px;
	border-right: 1px solid #d0d0cb;
}

.group .details {
	width: 559px;
	float: left;
}

.group .name h2.dark a {
	color: white;
}

.group .name h2.dark, .group .details h2.light {
	border-bottom: 1px solid #d0d0cb; 
}

.group .details h2 {
	font-size: 15px;
}

.group .details h2 span {
	font-weight: normal;
	color:#615e56;
}

.group .last-comment {
	display: block;
	background: url(/images/small_list_bg35.gif) #ffffff repeat-x;
	height: 32px;
	border-bottom: 1px solid #d0d0cb;
	padding-left: 10px;
	padding-top: 2px;
}

.group a.last-comment { text-decoration: none; }
.group a.last-comment:hover { background: #ededeb; }


.box.post {
	margin-bottom: 0; /* no other way in IE7- margin is filled manually with "fill5px" */
}

.box.post .picture {
	width: 260px;
	padding: 10px;
	float: left;
}

.box.post .body, .box.post .editor-body {
	background: url(/images/msg_bg80.gif) #ffffff repeat-x;
	width: 519px;
	padding:10px;
	float: left;
}

.box.thread {
	height: 46px;
}

.box.thread .title, .box.thread .last-post, .box.thread .stats {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	float: left;
}

.box.thread .title { width: 460px; }

.box.thread .last-post { 
	width: 190px;
	background: url(/images/small_list_bg45.gif) #ffffff repeat-x;
}

.box.thread .stats {	width: 108px; }

/* formular to post messages */
.post.post .editor-body {	background: #f4f5f6; }
.post.post .editor-body input[type=text] {
	width: 508px;
	margin-top: 10px; margin-bottom: 10px;
}
.post.post .editor-body textarea {
	width: 508px;
	height: 150px;
}

.post-submit-container {
	padding-top: 10px;
	padding-left: 290px;
}

.pad10.top10 {
	padding-top: 5px; padding-bottom: 5px;
}

/* Frontpage: Top10 Users, Last Comments, Social Media Links */
.top10-item, .latest-comments-item {
	line-height: 14px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #cfd0ca;
}

.top10-item .realmoney {
	font-weight: normal;
	font-size: 11px;
	color: #615E56;
}

a.top10-item, a.latest-comments-item { display: block; text-decoration: none; }
a.latest-comments-item:hover { background: #ededeb; }

.latest-comments-item {
	background: url(/images/small_list_bg35.gif) #ffffff repeat-x;
}

.top10-item.end, .latest-comments-item.end {
	border-bottom: none;
}

/*
.top10-item h3, .latest-comments-item h3 {
	font-size: 13px;
}*/

.top10-item .column {
	float: left;
	width: 90px;
}

.top10-item .column.vcenter {
	line-height: 30px;
	height: 15px;
}

/* Messages */

.box.message-item .body h3 {
	border-bottom: 1px solid #cfd0ca;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.box.message-item .body h3 span, .message-subtitle {
	/* should be the same as the default-font */
	font-weight: normal;
	font-size: 11px;
	color: #615e56;
}

.message-subtitle { 
	display: table-cell;
	padding-top: 5px;
	width: 820px;
	height: 35px;

	margin-bottom: 10px;
	font-size: 14px; 
	vertical-align: middle;
}

.box.message-item.received {	margin-left: 79px; }
.box.message-item.sent {	margin-right: 79px; }


.box.message-item.sent .picture,
.box.message-item.received .picture {	padding: 10px; float: left; width: 60px; }
.box.message-item.received .picture { float: right; }

.box.message-item .body { 
	padding: 10px;
	float: left; 
	min-height: 60px;
	width: 640px; background: url(/images/msg_bg80.gif) #ffffff repeat-x;
}

/* used in messages (mails) and group-postings! */

.box.message-item .body > span, .box.post .body > span  {
	font-size: 12px;
	line-height: 20px;
	font-family: Georgia, Times New Roman, serif;
}



.box.message-item {
	margin-bottom: 10px;
}


#captcha {
	border: 1px solid;
	border-top-color: #cfd0ca;
	border-left-color: #cfd0ca;
	border-right-color: #ececea;
	border-bottom-color: #ececea;
	background: #f6f5f4;
	padding: 5px;
	text-align: center;
	height: 90px;
}

#captcha-reload {

	margin-bottom: 15px;
}

/* badgelist */

.badge {
	background: #eaece9;
	width: 67px;
	height: 67px;
	float: left;
	text-align: center;
	margin-right: 10px;
	padding-top: 3px;
	padding-left: 3px;
}

.badge.last { margin-right: 0; }

.badge div {
	width: 64px;
	height: 64px;
	background: url(/images/badges/coin_bronze.gif) no-repeat white;
	text-align: center;
	margin: auto;
	/*line-height: 64px;*/
	display: table-cell;
	vertical-align: middle;
}

.badge.silver div {
	background-image: url(/images/badges/coin_silver.gif);	
}

.badge.gold div {
	background-image: url(/images/badges/coin_gold.gif);	
}


.badge span {
	font-weight: bold;
}



/* Das ist die offizielle version, aber disabled für andres münzstyles

.badge {
	background: #eaece9;
	width: 54px;
	height: 70px;
	float: left;
	text-align: center;
	margin-right: 10px;
}

.badge.last { margin-right: 0; }

.badge div {
	width: 30px;
	background: white;
	text-align: center;
	margin: auto;
	margin-top: 2px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.badge span {
	font-weight: bold;
}


*/

/* Profile */

.box.profile > h2 {
	border-bottom-color: #cfd0ca;
}


/* box for status-updates */
#buzz {
	background: url(/images/buzz_bg.gif) repeat-x #fed01e;
	border-top: #f4f5f6 1px solid;
	border-right: #d1d4d8 1px solid;
	border-bottom: #dbbc00  1px solid;
	padding: 10px;
	margin-bottom: 10px;
}

#buzz p { margin-top: 10px; margin-bottom: 10px; }

#buzz h2 {
	border: none;
	padding: 0; margin: 0;
	font-size: 21px;
}

#buzz input[type=text], #buzz textarea {
	font-size: 14px;
	width: 438px;
	height: 30px;
	line-height: 20px;
	color: #615e56;
	margin-bottom: 10px;
	border-top-color: #dbbc00;
	border-left-color: #dbbc00;
	border-right-color: #fffad1;
	border-bottom-color: #fffad1;
}

#buzz input[type=submit] {
	float: right;
	margin-bottom: 0;
}

/* Box with Location, About_me attached to the picture */
#profile-facts {
	width: 139px;
	margin-left: 20px;
	float: left;
}

#profile-facts p {
	color: #7a7a7a;
	margin-bottom: 5px;
}





div.widget {
	margin-top: 10px;
	margin-bottom: 20px;
}

div.widget.last {
	margin-bottom: 0;
}


/* summary list of all available quizzes */
.quiz-list { padding-top: 10px; padding-bottom: 10px; }

.quiz-list .medal {
	width: 64px;
	height: 64px;
	float: left;
	text-align: center;
	margin-right: 10px;
}

.quiz-list .description {
	width: 380px;
	float: left;
	margin-right: 10px;
}

.quiz-list .facts {
	width: 80px;
	float: left;
	margin-right: 10px;
}

.quiz-list .facts.last {
	width: 160px;
}

.start-quiz {
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	width: 100px;
	background: #37342e;
	color: white;
}

.start-quiz a { color: white; }

/* table is used to display quiz questions */
table.quiz {
	border-collapse: collapse;
	margin-bottom: 10px;
}

table.quiz tr td { 	vertical-align: top; }

table.quiz tr td + td {
	padding-top: 4px;
	padding-bottom: 10px;
}

/* table is used for statistics + performance,
   add second-col-right for right aligned */
.tbl {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	width: 100%;
}

.tbl tr { padding: 0; margin: 0;}
.tbl td, .tbl th { border-bottom: 1px solid #cfd0ca; padding-top: 5px; padding-bottom: 5px; }
.tbl td:first-child { color: #37342e; font-weight: bold; }

.tbl tr.last td { border-bottom: none; padding-bottom: 0; }
.tbl tr.first td { padding-top: 0; }

.tbl.fav-instruments tr td + td {
	text-align: right;
}

/*
.tbl.open-positions .dashes {
	height: 40px;
	padding-left: 5px; padding-right: 5px;
	margin-left: 5px; margin-right: 5px;
	border-left: 1px solid #cfd0ca;
	border-right: 1px solid #cfd0ca;
}*/

.tbl.open-positions tr th { text-align: right; }
.tbl.open-positions tr th:first-child { text-align: left; }
.tbl.open-positions tr td:first-child {	width: 100px; }
.tbl.open-positions tr td + td + td {	text-align: right; }

.tbl.open-orders tr th { text-align: right; }
.tbl.open-orders tr th:first-child { text-align: left; }
.tbl.open-orders tr td:first-child {	width: 100px; font-weight: normal; color: inherit; }
.tbl.open-orders strong { color: #37342e; font-weight: bold; }
.tbl.open-orders tr td + td + td {	text-align: right; }


.tbl.depot-history tr th { text-align: right; }
.tbl.depot-history tr th:first-child { text-align: left; }
.tbl.depot-history tr td:first-child { font-weight: normal; color: inherit; }
.tbl.depot-history strong { color: #37342e; font-weight: bold; }
.tbl.depot-history tr td + td + td {	text-align: right; }

tr.hl {
	background: #EEEEE8;
}

tr.hl-green {
	background: #C4FFDE;
}


.avatar-large {
	width: 100px;
	height: 100px;
	background: #F3F2F1 url(/images/default_avatar.gif);
	float: left;
}

.avatar-medium {
	width: 60px;
	height: 60px;
	background: #F3F2F1 url(/images/default_avatar_60.gif);
	float: left;
  margin-right: 10px;
}

.avatar-thumb {
	width: 40px;
	height: 40px;
	background: #F3F2F1 url(/images/default_avatar_40.gif);
	float: left;
}

.avatar-small {
	width: 30px;
	height: 30px;
	background: #F3F2F1 url(/images/default_avatar_30.gif);
	float: left;
  margin-right: 10px;
}

/* kasten mit infos auf der startseite (cms) */
#fpbox {
	background: url(/images/content/frontpagebox_bg.gif) #e5e7e6 repeat-x;
	border-top: 2px solid #a4b0b0;
	border-bottom: 2px solid #a4b0b0;
	margin-bottom: 20px;
}

#fpbox h1 {
 font-size: 32px;
 color: #615e56;
 margin: 0; padding: 0;
 margin-bottom: 9px;
 line-height: 45px;
 font-weight: bold;
}

#fpbox .maskot {
	width: 225px;
	height: 198px;
	float: left;
	margin-right: 35px;
}

#fpbox .video {
	width: 320px;
	float: left;
	margin: 10px;
}

#fpbox li { margin-left: -20px;}
#fpbox ul { margin-top: 9px; margin-bottom: 6px; }

#fpbox .inner, #fpbox .inner-to-video {
	font-size: 14px;
	line-height: 18px;
	color: #37342e;
	width: 560px;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
}

#fpbox .inner-to-video {
	width: 460px;
}

#modal-dialog-close {
	display: block;
	float: right;
	height: 20px;
	line-height: 20px;
	padding: 5px;
	width: 30px;
}

.modal-form #buttons {
	width: 425px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 95px;
}

.modal-form span {
	display: block;
	width: 85px;
	height: 25px;
	padding-top: 5px;
	padding-right: 10px;
	text-align: right;
	float: left;
	font-size: 12px;
	font-weight: bold;
	color: #37342e;
}

.modal-form input[type=submit], .modal-form a.button {
	width: 125px;
}

.modal-form textarea, .modal-form input[type=text] {
	border: 1px solid;
	border-top-color: #d0d0cb;
	border-left-color: #d0d0cb;
	border-bottom-color: #ededea;
	border-right-color: #ededea;
	background: #f6f6f5;
	width: 415px;
}

/* custom-stuff for indivudal content */

#challenges {
	background: url(/images/content/challenge_box_bg.gif) no-repeat;
	padding: 20px;
	padding-bottom: 10px;
	text-align: right;
}

#challenges span {
	padding: 5px;
	background: white;
	line-height: 20px;
}

#challenges a.btn {
	display: block;
	background: url(/images/instr_bg_small.gif) #c4c7cc repeat-x;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid;
	border-left-color: #d1d7da;
	border-top-color: #d1d7da;
	border-right-color: #475258;
	border-bottom-color: #475258;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

#challenges a.btn.gold {
	background: url(/images/buzz_bg.gif) repeat-x #fed01e;
	border-top: #f4f5f6 1px solid;
	border-right: #d1d4d8 1px solid;
	border-bottom: #dbbc00  1px solid;
}

#challenges a.btn:hover { color: #888; }
#challenges a.btn.gold:hover { color: #111; }


/* misc. social media icons */
.social { width: 32px; height: 32px; margin-right: 10px; background: url(/images/social_icons.png) no-repeat; float: left; }
.social.twitter	 {	background-position: 0 0; }
.social.facebook {	background-position: 0 -32px; }
.social.blog		 {	background-position: 0 -64px; }
.social.delicious {	background-position: 0 -96px; }
.social.digg		 {	background-position: 0 -128px; }
.social.su			 {	background-position: 0 -160px; }

.fieldWithErrors input, .fieldWithErrors select, .fieldWithErrors textarea {
	border: 1px solid #B84D1F;
}

.fieldWithErrors { position: relative; }

/* only used in contracts/create at the moment */
.error-bubble { position: relative;
	border: 1px solid #B84D1F;
	background: #E3CEC5;
	padding: 10px;
	margin-bottom: 10px;
}

.errorExplanation {
	padding: 10px;
	margin: 0;
	padding-bottom: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1px solid #B84D1F;
	background: #ffe7dd;
}

.lb-container .errorExplanation {
	margin-left: 20px;
	margin-right: 20px;
}

.errorExplanation h2 {
	padding: 0; margin: 0;
	font-size: 15px;
	border-bottom: none;
}


/* text in "static" fields, used when reviewing contract data */
.sfield {
	background: #E3E3DE;
	padding: 5px;
}

.pdf {
	width: 50px;
	height: 50px;
	background: url(/images/pdf_icon.gif);
	float: left;
}

#contract-pdf {
	width: 400px;
	height: 50px;
	float: left;
	padding-left: 10px;
/*	border: 1px solid #86837a;*/
}

#preview-canvas.loading {
	background: #f6f5f4;
}

.shadow {
	width: 30px;
	height: 100px;
	position: absolute;
	background: url(/images/shdw30_lr.png) repeat-y 0 0;
}

.shadow.top, .shadow.bottom { width: 100px; height: 30px; 
		background: url(/images/shdw30_tb.png) repeat-x 0 0; 
}

.shadow.left { left: -30px; }
.shadow.right {	right: -30px; background-position: -30px 0; }

.shadow.top { top: -30px; }
.shadow.bottom {	bottom: -30px;  background-position: 0 -30px; }

.shadow.corner { 
	width: 30px;
	height: 30px;
	background: url(/images/shdw30_corners.png) no-repeat 0 0;
}

.shadow.corner.c1 { left: -30px; top: -30px; background-position: 0 0; }
.shadow.corner.c2 { right: -30px; top: -30px; background-position: 0 -30px; }
.shadow.corner.c3 { right: -30px; bottom: -30px; background-position: 0 -60px; }
.shadow.corner.c4 { left: -30px; bottom: -30px; background-position: 0 -90px; }