/* @override http://62.80.125.201/onlinespiele_org/css/master.css */

/**
    Onlinespiele.org Stylesheet
    Author: Sebastian Strauch
    Geändert: 06.12.2006
    Copyright: Dimension-Z
*/

@import "scroll.css";
@import "form.css";


/* Struktur
----------------------------------------------- */


body {
	margin: 0;
	padding: 0;
	font: 11px Arial, sans-serif;
	text-align: center;
	background: #828282 url(../images/back.gif) repeat-x left top;
}

#wrapper {
	width: 763px;
	margin: 15px auto 15px auto;
	text-align: left;
	background: #b5e7ff url(../images/wrapper.gif) repeat left top;
}

/* Header
----------------------------------------------- */

#topbar {
	width: 743px;
	padding: 5px 10px 5px 10px;
	height: 15px;
	position: relative;
}

#topbar { background: transparent url(../images/top.gif) no-repeat left top; }

#topbar a, #footer a {
	margin: 0 5px 0 5px;
	color: #b5e7ff;
	text-decoration: none;	
}

a#hilfe, div.tools  { 
	position: absolute;
	right: 10px; 
}

a#hilfe { top: 5px; }
div.tools { top: 40px; }

a { color: #0562b0; }
a:hover { text-decoration: underline; }
a.more {
	padding-right: 5px;
	background: transparent url(../images/arrow_small.gif) no-repeat right 3px;
	position: relative;
	top: -1px;
	right: 1px;
}

.pipe {
	color: #b5e7ff;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
}

#header {
	width: 733px;
	height: 98px;
	padding: 15px 15px 0 15px;
	position: relative;
	background: transparent url(../images/header.gif) no-repeat 20px 10px;
}

.frame {
	background-color: #eef6fe;
	padding: 10px;
	list-style-type: none;
	line-height: 150%;
}

.answer, .comment {
	padding-bottom: 20px;
	border-bottom: 2px solid #eef6fe;
}

.answer b a {
	font-size: 13px;
}

.comment small {
	color: #828282;
	line-height: 16px;
}

/*
#p_action #header {
	background: transparent url(../images/s_action.gif) no-repeat 180px 17px;
}
*/

#header #flash {
	top: 0px;
	left: 0px;
	position: absolute;
	z-index: 0;
	
}

#header #flash object, #header #flash embed {
	width: 763px;
	height: 98px;
}

h1 {
	font-size: 21px;
	color: #0562b0;
}

h1#logo {
	width: 238px;
	height: 58px;
	float: left;
	margin: 0;
	padding: 0;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
	background: transparent url(../images/logo.gif) no-repeat left top;
	position: relative;	
	z-index: 1;
}

h1#titel {
 font-size: 9px;
 display: inline;
 color:black;
}

#ad {
	width: 468px;
	height: 60px;
	float: right;
	background-color: white;
	border: 1px solid black;
	position: relative;	
	z-index: 1;
}

/* Navigation
----------------------------------------------- */

#menu {
	width: 735px;
	height: 16px;	
	position: relative;
	top: 15px;
	margin: 0;	
	padding: 10px 15px 5px 15px;
	background: transparent url(../images/menu.gif) no-repeat left top;
	overflow: hidden;
	position: relative;
	z-index: 1;	
}

#menu li {
	float: left;
	height: 21px;
	list-style-type: none;
	margin-right: 19px;
}

#menu li#m_action {
	padding-left: 14px;
	background: transparent url(../images/m_action.gif) no-repeat left -1px;
}

#menu li#m_arcade {
	padding-left: 13px;
	background: transparent url(../images/m_arcade.gif) no-repeat left 1px;
}

#menu li#m_abenteuer {
	padding-left: 19px;
	background: transparent url(../images/m_abenteuer.gif) no-repeat left 1px;
}

#menu li#m_brett {
	padding-left: 14px;
	background: transparent url(../images/m_brett.gif) no-repeat left top;
}

#menu li#m_geschick {
	padding-left: 11px;
	background: transparent url(../images/m_geschick.gif) no-repeat left top;
}

#menu li#m_karten {
	padding-left: 13px;
	background: transparent url(../images/m_karten.gif) no-repeat left top;
}

#menu li#m_logik {
	padding-left: 15px;
	background: transparent url(../images/m_logik.gif) no-repeat left top;
}

#menu li#m_shooter {
	padding-left: 17px;
	background: transparent url(../images/m_shooter.gif) no-repeat left top;
}

#menu li#m_sport {
	padding-left: 12px;
	background: transparent url(../images/m_sport.gif) no-repeat left 2px;
}

#menu li#m_rennen {
	padding-left: 14px;
	background: transparent url(../images/m_rennen.gif) no-repeat left 2px;
}

#menu li#m_more {}


#menu li a { 
	font-weight: bold;
	color: #0562b0;	
	text-decoration: none; 
}

#menu li.active a, #menu li a:hover { text-decoration: underline;}


#main {
	width: 735px;
	background: transparent url(../images/main.gif) repeat-y left top;
	margin: 15px 15px 0 15px;
}

#content { 
	background: transparent url(../images/content_gradient.gif) no-repeat left top;
	padding: 10px 12px 10px 8px;
}

body.rubrik #content { padding-bottom: 5px;}


#footer { 
	width: 743px;
	height: 19px;
	padding: 40px 10px 0 10px;
	background: transparent url(../images/footer.gif) no-repeat left top;
	position: relative;
}

/* Verschiedenes
----------------------------------------------- */

img { border: 0; }



/* Diverse Boxen */

.boxset { 
	width: 707px;
	height: 93px;
	padding: 5px;
	background: transparent url(../images/boxset.gif) no-repeat left top; 
}

.box {
	width: 351px;
	height: 94px;
	/*
	background: transparent url(../images/box.gif) no-repeat left top;	
	*/
}

.box2 {
	width: 348px;
	height: 112px;
	margin-bottom: 5px;
	padding: 1px 5px 5px 5px;
	background: transparent url(../images/box2.gif) no-repeat left top;
	float: left;
}

.box2.last { margin-left: 4px; }


.boxset .box { float: left; }
.boxset .box#topgames { margin-right: 5px; }

.box img.screenshot {
	width: 116px;
	height: 84px;
	margin: 5px;
	float: left;
}

.box2 img.screenshot {
	width: 106px;
	height: 76px;
	float: left;
}

.box .title {
	width: 207px;
	height: 10px;
	background: transparent url(../images/box_title.gif) no-repeat left top;
	margin: 4px 0 0 126px;
	padding: 5px 5px 5px 10px;
}

.box2 .title {
	width: 337px;
	height: 10px;
	padding: 5px;
	margin-top: 5px;
	background: transparent url(../images/box2_title.gif) no-repeat left top;
}

.box .title h2, .box2 .title h3 {
	font-weight: bold;
	margin: 0;
	padding: 0;
	display: inline;
}

.box .title h2 {
	float: left;
	font-size: 12px;
	position: relative;
	top: -2px;
}

.box2 .title h3 {
	float: left;	
	color: #0562b0;
	font-size: 11px;
	font-weight: bold;	
	line-height: 11px;
	position: relative;
	top: -1px;
	left: 1px;
} 

.box2 .info { 
	width: 222px;
	margin-left: 111px;
}
.box2 .info h2 { 
	font-size: 13px; 
	margin: 2px;
	padding-left: 2px;
}

.box2 .info img.play { 
	width: 72px;
	height: 31px;
	float: right;
}

.box .title a, .box2 .title a {
	font-size: 9px;
	line-height: 13px;
	color: black;
	float: right;
	text-decoration: none;
}

.box .content {
	width: 222px;
	height: 67px;
	float: right;
}

.box .content a { 
	color: black;
	font-size: 10px; 
	text-decoration: none;
}

.box .content .nr {
	display: block;
	width: 15px;
	float: left;
	padding-right: 2px;
	text-align: right;
}

.box .content ul {
	margin: 3px 0 0 0;
	padding: 0;
	width: 111px;
	float: left;
}

.box .content ul li {
	margin: 0;
	padding: 0;
	font-size: 9px;
	line-height: 13px;
	list-style-type: none;
	white-space: nowrap;
	overflow: hidden;
}


.box2 .content {
	/*background: transparent url(../images/dot_lines.gif) no-repeat 110px 36px;*/
}

.box2 .content h2 {
	font-weight: bold;
	color: #0562b0;
}

.box2 .content ul {
	margin: 1px 5px 5px 5px;
	padding: 0;
	float: left;
	width: 107px;
	height: 46px;
}

.box2 .content ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 12px;
	border-top: 1px dotted #5e5e5e;
}

.box2 .content ul li.last {
	border-bottom: 1px dotted #5e5e5e;
}

.box2 .content ul li a {
	font-size: 10px;
	color: #5e5e5e;
	text-decoration: none;
}

.box2 .content .screenshot {
	margin-right: 5px;
	position: relative;
	left: 1px;
	top: 1px;
}
.box2 .content .rating { margin-left: 5px; }
.box2 .content .rating strong { position: relative; top: -2px; }
.box2 .content .info { margin-top: -5px; }


/* Scrollbereich */

#ribbon {
	position: relative;
	top: 0px;
	width: 733px;
	height: 85px;
	background-color: #2075bd;
	overflow: hidden;
	padding: 9px;
}

#ribbon_nav {
	position: relative;
	top: -103px;
}

#ribbon img { position: absolute; }

#scroll_left {
	width: 36px;
	height: 120px;
	position: absolute;
	top: -17px;
	left: -29px;
	z-index: 101;
}

#scroll_right {
	width: 35px;
	height: 120px;
	position: absolute;
	top: -17px;
	right: -26px;
	z-index: 101;
}

#scroller img.play_overlay { 
	position: relative;
	top: -30px;
	left: 75px;
	z-index: 3; 
}

#games { padding: 10px 2px 10px 8px; }



/* Rubriken */



#results {
	width: 715px;
	margin: 10px 0 10px 0;
}

#results .top {
	width: 713px;
	height: 7px;
	padding-left: 2px;
	background: #fff url(../images/results_top.gif) no-repeat left bottom;
}

#results .content {
	width: 713px;
	padding-left: 2px;
	background: #0562b0 url(../images/results_content.gif) repeat-x left top;
}

#results .bottom {
	width: 713px;
	height: 8px;
	padding-left: 2px;	
	background: #fff url(../images/results_bottom.gif) no-repeat left top;
}


.page-nr {
	width: 235px;
	float: left;
	font-size: 12px;
	color: #0562b0;
}

.page-nr a{
	text-decoration: none;
}

.page-nr a:hover{
	text-decoration: underline;
}

#page-nav-frame {
	width: 280px;
	float: left;
	text-align: center;
}

.page-nav {
	height: 15px;
	margin: 0;
	padding: 0 20px 0 20px;
	list-style-type: none;	
}

.page-nav li {
	display: inline;
	line-height: 20px;
	padding-right: 10px;
	border-right: 1px dotted #91bddf;
}

.page-nav li.back {
	padding-left: 10px;
	width: 10px;
	background: transparent url(../images/page_nav_back.gif) no-repeat left top;
}

.page-nav li.item {
	padding-left: 10px;
	background: transparent url(../images/page_nav_item.gif) repeat left top;
}

.page-nav li.next {
	padding-left: 10px;
	width: 10px;
	background: transparent url(../images/page_nav_next.gif) no-repeat right top;
	border: 0;
}

.page-nav li.last { border: 0 none; }

.page-nav li a {
	font-weight: bold;
	color: #0562b0;
	text-decoration: none;
}
.page-nav li.active a, .page-nav li a:hover { color: black; }

.page-tools {
	width: 200px;
	height: 15px;
	text-align: right;
	float: right;
	margin-bottom: 5px;	
}


.box3 {
	width: 172px;
	height: 150px;
	margin: 3px;
	background: transparent url(../images/box3.gif) no-repeat left top;
	float: left;
}

.box3 h2 {
	font-size: 11px;
	font-weight: bold;
	color: #0562b0;
	margin: 4px 0 0 0;
	padding: 0;
	line-height: 16px;
	text-align: center;
	margin-bottom: 0;
}

.box3 img {
	width: 158px;
	height: 115px;
	margin: 7px;
}




/* Spiel */

#frame {
	width: 713px;
	/*	
	height: 514px;
	padding: 10px 10px 5px 10px;
	background: transparent url(../images/frame.jpg) no-repeat left top;
	*/
}

#frame .frame-top {
	height: 46px; 
	padding: 10px 0 0 10px; 
	background: transparent url(../images/frame_top.jpg) no-repeat left top;
}

#frame .frame-middle {
	height: auto;
	padding: 0 0 0 10px; 
	background: #0762b1 url(../images/frame_middle.jpg) no-repeat left top;
}

#frame .frame-bottom {
	height: 76px; 
	padding: 15px 0 0 10px; 
	background: transparent url(../images/frame_bottom.jpg) no-repeat left top;
}

.title {
	width: 683px;
	height: 20px;
	padding: 5px;
	margin-bottom: 10px;
	background: transparent url(../images/title.gif) no-repeat left top;
	text-align: center;
}

.title h1 { 
	margin: 0;
	padding: 0;
	font-size: 20px;
}


#game {
	width: 663px;
	padding: 15px;
	padding-bottom: 15px;
	background-color: white;	
	text-align: center;
}

#panel {
	width: 673px;
	height: 46px;
	padding: 10px;
	background: transparent url(../images/panel.gif) no-repeat left top;	
}

#panel .buttons {
	width: 270px;
	float: left;
	text-align: center;
}

#panel .buttons a {
	width: 128px;
	height: 17px;
	margin: 1px;
	padding-top: 5px;
	background: transparent url(../images/panel_button.gif) no-repeat left top;
	text-decoration: none;
	font-size: 11px;
	color: #b6e9fe;	
	float: right;
}

#panel .charts {
	width: 375px;
	height: 48px;
	float: right;
	background: transparent url(../images/panel_charts.gif) no-repeat left top;
	color: white;
}

.charts .info {
	width: 140px;
	padding-left: 15px;
	text-align: left;
	float: left;	
}

.charts .info h3 {
	margin: 5px 0 3px 0;
	font-size: 15px;
}

.charts .results {
	width: 120px;
	height: 39px;
	padding-top: 9px;
	float: left;
	text-align: left;
}

.charts .vote {
	width: 90px;
	float: right;
	padding: 3px;
	text-align: center;
}

.charts .vote a {
	width: 70px;
	height: 14px;
	margin: 2px;
	padding-top: 3px;
	background: transparent url(../images/panel_button_vote.gif) no-repeat left top;
	float: right;
	font-size: 10px;
	color: white;
	text-decoration: none;
}

.bar { 	
	margin-bottom: 5px;
	height: 10px; 
}

#good {
	background-color: #e5ffe4;
	border: 1px solid #c1d22e;
}

#bad {
	background-color: #ffe4e9;
	border: 1px solid #c25836;
}


#comments h2 {
	color: #0661b0;
	padding-left: 25px;
	background: transparent url(../images/icon_comments.gif) no-repeat left top;	
}

#comments .content {
	background-color: #eef6fe;
	padding: 10px;
	border: 1px dotted silver;
}

.comment .from {
	color: #0661b0;
	font-weight: bold;
	font-size: 12px;
}
.comment .date {
	
}

#comment_write h3 { 
	margin-top: 0;
	font-size: 15px; 
}

#comment_write {
	width: 360px; 
	height: 200px;
	float: right;
}

#comment_list {
	width: 320px;
	height: 200px;
	float: left;
	overflow: auto;
}


#searchform {
	width: 244px;
	height: 50px;
	position: absolute;
	top: 40px;
	padding: 10px;
	z-index: 3;
	background-image: url(../images/searchform.gif);
}

#mailform {
	width: 244px;
	height: 50px;
	position: absolute;
	top: 40px;
	padding: 10px;
	z-index: 3;
	background-image: url(../images/searchform.gif);
}


.column {
	background-color: #f6f7f8;
	width: 200px;
	float: left;
	padding: 0px 10px 10px 10px;
	margin: 8px;
	border-right: 1px dotted silver;
	border-bottom: 1px dotted silver;	
}

.column:hover {
	background-color: #e1e3e4;
}

.column.last {
	border-right: none;
}

.column ul {
	margin: 0;
	padding: 0;
}

.column li {
	list-style-type: none;
	padding: 0;
}



/* Bugfix */
.clear { clear: both; height: 1px; } 
.wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
.wrapper { display: inline-block; }
* html .wrapper { height: 1%; }
.wrapper { display: block; }