@import '../style_reset.css';
@import '../tinymce_styles.css';

////////// .LESS VARIABLES: //////////
@BannerBgTopColor: #02314f;
@BannerBgBottomColor: #02314f;
@NavBgTopColor: #71afd3;
@NavBgBottomColor: #267aab;
@NavHoverBgTopColor: #18628e;
@NavHoverBgBottomColor: #023554;
@NavHeight: 30px;
@LogoBgTopColor: #ffffff;
@LogoBgBottomColor: #dddddd;
@LogoFontColor: #777777;
@ContentBgTopColor: #02314f;
@ContentBgBottomColor: #035787;
@ShadowColor: #4d4d4d;
@DefaultFont: Arial, Helvetica, sans-serif;
@FontColor: #FFF;
@HeadingFontColor: #FFF;
@BannerHeight: 100px;
@ContentWidth: 1000px;
@LeftSidebar: 147px;
@RightSidebar: 170px;
@SidebarWidth: 200px;
@ArticleColor: #267aab;

////////// .LESS FUNCTIONS: //////////
.verticalGradient(@start, @end, @stop1:0%, @stop2:100%){
	background: @start; 
	background: -moz-linear-gradient(top, @start @stop1, @end @stop2); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1,@start), color-stop(@stop2,@end));
	filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='%d', endColorstr='%d',GradientType=0 )", @start, @end));
}
.boxShadow(@horizontal:0px, @vertical:0px, @blur:5px, @color:#000000){
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}
.textShadow(@horizontal:0px, @vertical:0px, @blur:5px, @color:#000000){
	-webkit-text-shadow: @arguments;
	-moz-text-shadow: @arguments;
	text-shadow: @arguments;
}

.borderRadius(@topLeft:5px, @topRight:5px, @bottomRight:5px, @bottomLeft:5px){
	-webkit-border-radius-topleft: @topLeft;
	-webkit-border-radius-topright: @topRight;
	-webkit-border-radius-bottomright: @bottomRight;
	-webkit-border-radius-bottomleft: @bottomLeft;
	-moz-border-radius-topleft: @topLeft;
	-moz-border-radius-topright: @topRight;
	-moz-border-radius-bottomright: @bottomRight;
	-moz-border-radius-bottomleft: @bottomLeft;
	border-top-left-radius: @topLeft;
	border-top-right-radius: @topRight;
	border-bottom-right-radius: @bottomRight;
	border-bottom-left-radius: @bottomLeft; 
}
/////////////////////////////////////////////////////////////
@charset "utf-8";
/* CSS Document */
*,html,body{margin:0;padding:0;outline:none;}
html,body{width:100%;height:auto;position:relative;}
html{overflow-y:scroll;overflow-x:hidden;}
body{
	height:auto;
	font-family: @DefaultFont;	
	color: @FontColor;
	font-size: 11pt;
	.verticalGradient(@ContentBgTopColor, @ContentBgBottomColor);
}


.hide {display:none !important;}
.noStyle {list-style:none;}
.neutral {text-decoration:none;}
.text_center {text-align: center;}
.margin25{margin: 25px;}
.left {float:left;}
.right {float:right;}
.center a {text-align: center;}
.small {font-size:11px;}

img.left{margin: 0 10px 10px 0;}
img.right{margin: 0 0 10px 10px;}
img.shadow {
	box-shadow: 3px 3px 5px #888;
	margin-bottom:3px;
}

a:link, a:visited {
	text-decoration: none;
	color: @FontColor;
}

a.neutral:link, a.neutral:visited, a.neutral:active, a.neutral:hover {
	border-bottom: none !important;
}

a img {border: none;}

h1, h2, h3 {
	font-weight: normal;
	color: @HeadingFontColor;	
	padding-bottom: 5px;
	padding-right: 15px;

}
#contentWrapper h1{
	font-weight:bold;
	font-size:30px;
	margin-bottom:10px;
}
#contentWrapper h2{
	font-size:22px;
	margin-bottom:5px;
}	
#headerWrapper{
	position: relative;
	height: @BannerHeight;
	overflow: visible;
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
	height: @BannerHeight;
	.verticalGradient(@BannerBgTopColor, @BannerBgBottomColor);

}
#header {
	width: @ContentWidth;
	min-width: 700px;
	text-align:left;
	margin: 0 auto;
	position: relative;
}
#logo {
	display: block;
	position: absolute;
	top: 30px;
	left: 0;
	overflow: hidden;
}
#star {
	display: block;
	position: absolute;
	top: 5px;
	right: 0;
	overflow: hidden;
}
#nav {
	position:absolute;
	top: @BannerHeight - 20px;
	height: @NavHeight*2;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	//padding: 0 10px;
	//.verticalGradient(@NavBgTopColor, @NavBgBottomColor);
	//.borderRadius(5px,5px,5px,5px);
	
	>ol {
		li {
			list-style: none;
			display: inline-block;
			margin: 0;		
			&.active>a, &.active>a:hover {
				.verticalGradient(@NavBgTopColor, @NavBgBottomColor);	
			}
			a {
				line-height: @NavHeight;
				height: @NavHeight;
				padding: 0 25px;
				display: block;
				font-weight: bold;
				color: #ffffff;
				text-decoration: none;
				//.verticalGradient(@NavBgTopColor, @NavBgBottomColor);	
				margin-left: -4px;	
				margin-right: 5px;
				.borderRadius(5px,5px,0,0);			
				&:hover, &.active {
					.verticalGradient(@NavHoverBgTopColor, @NavHoverBgBottomColor);
					color: #FFF;
				}	
			}
			ol {
				height: @NavHeight;
				display: none;
				position: absolute; 
				bottom: 0;
				left: 0;
				font-size: 10px;
				width: @ContentWidth;
				.verticalGradient(@NavBgBottomColor, @NavBgTopColor);
				.borderRadius(5px,5px,5px,5px);		
				li {
					display: inline-block;
					a {
						padding: 0 5px;
						.borderRadius(0,0,0,0);
						margin-right: 0;
						.verticalGradient(@NavBgBottomColor, @NavBgTopColor);	
					}
					&.active a, &.active a:hover {
						color: @NavHoverBgBottomColor;
						.verticalGradient(@NavBgBottomColor, @NavBgTopColor);
					}
					&:first-child a {
						.borderRadius(0,0,0,5px);	
					}
				}
			}
			&.active ol {
				display: block;
			}
		}
	}
}
#contentWrapper {
	width: @ContentWidth;
	margin: 0 auto;
	text-align: justify;
}
#article {
	margin-top: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
	width: @ContentWidth - @RightSidebar - @LeftSidebar - 70px;
	float: left;
	padding: 15px;
	.borderRadius(5px,5px,5px,5px);
	background-color: @ArticleColor;
	p {
		line-height: 150%;
		margin-bottom: 20px;
	}
	a:link, a:visited {
		border-bottom: 1px dotted @FontColor;
		padding-bottom: 1px;
	}
	
	a:hover, a:active {
		border-bottom: 1px solid @FontColor;
	}
	img {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		
	}
}
.aside {
	font-size: 10pt;
	a:link, a:visited {
		border-bottom: 1px dotted @FontColor;
		padding-bottom: 1px;
	}
	
	a:hover, a:active {
		border-bottom: 1px solid @FontColor;
	}
	
	&#rightSide {
		width:@RightSidebar;
		float: right;		
	}
	.OnlineSpielen {
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		margin-top: 15px;
		padding-bottom: 10px; 
		.verticalGradient(#c74040, #b41414);
		li {
		margin-top:10px;
		}
	}
	.NovolineCasino {
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		margin-top:10px;
		padding-bottom: 10px;
	}
	.BookOfRaOnlineSpielen {
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		margin-top:10px;
	}
	.AutomatenOnlineSpielen {
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		margin-top:10px;
		padding-bottom: 10px;
	}
	.MerkurOnlineSpielen {
		margin-top: 10px;
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		li {
			margin-top:-20px;
		}
	}
	.NovolineOnlineSpielen {
		margin-top:10px;
		.borderRadius(5px,5px,5px,5px);
   		background-color: @ArticleColor;
		padding: 0 5px 0 5px;
		li {
			margin-top:-20px;
		}
	}
	&#leftSide {
	    width:@LeftSidebar;
		float: left;
		padding: 5px;
		li {
			
			img {
				vertical-align: -15px;
				padding-right: 5px;
			}
			a {
				color: #FFF;
			}
		}
	}
	h3 {
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 0;
		border-top: 1px dashed @FontColor; 
		&:first-child {
		border: none;
		}
	}
	.sidebarNav li {
		list-style: none;
		padding: 5px 0;	
	}
	a img {
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	img {
		max-width: @SidebarWidth;
	}
}

#MerkurGameList h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#MerkurGameList a{
	text-decoration:none;
}

#MerkurGameList ol {
    list-style: none outside none;
    margin: 0 0 5px;
    overflow: auto;
    padding: 0;
}



#MerkurGameList ol li {
    display: inline-block;
    float: left;
    font-size: 11px;
    margin-bottom: 2px;
    padding: 5px 10px;
    width: 50px;
}


////////// .BUTTONS: //////////


.buttonOrange {
	cursor: pointer;
	padding: 5px 10px !important; 
	color: #ffffff;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0 1px 1px #333;
	line-height: 150%;
	text-align: center;	
	border: none !important;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
}

.buttonOrange:active {
	outline: none;
}

.buttonOrange {
	background: url('../../assets/images/buttonOrange.png') repeat-x 0px 0px;
	background-position: 0px 0px;	
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.buttonOrange:hover {background-position: 0px -38px;}
.buttonOrange:active {background-position: 0px -76px;}


.buttonOrange a, a.buttonOrange, 
.buttonOrange a:hover, a.buttonOrange:hover {
	text-decoration: none !important;
	color: #ffffff !important;
}

a.buttonOrange {
	display: inline;
	display: inline-block;
	font-size: 13px;
}


a.buttonOrange.big {
	font-size: 15px;
}



a.buttonOrange, a.buttonOrange,  
a.buttonOrange + a.buttonOrange {
	margin-top: 5px;
}


h1 a.buttonOrange, h2 a.buttonOrange,
h3 a.buttonOrange {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;	
	font-weight: bold;
	font-size:100%;
	width: 180px;
	margin: 10px 0;
	color: #ffffff;
	font-size: 14px;
}

h1 a.buttonOrange.width100,
h2 a.buttonOrange.width100,
h3 a.buttonOrange.width100 {
	width: 100%;
}

h1 a.buttonOrange:after,
h2 a.buttonOrange:after,
h3 a.buttonOrange:after,
h4 a.buttonOrange:after{
	content: "»";
	font-size: 20px;
	font-weight: normal;
	color: #ffffff;
	position: relative;
	left: 5px;
	top: 1px;
}

h3 a.buttonOrange:after,
h4 a.buttonOrange:after{
	font-size: 16px;	
}

.buttonOrange.small {
	font-size: 12px;
}

a.buttonOrange.small {
	font-size: 10px;
	padding: 2px 3px !important;
}

.intro, .italic {
	font-style:italic;	
}