.wrapper{
	max-width:800px;
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
	border-top:#7f85b2 14px solid;
	border-bottom:#1737ae 25px solid;
}
tr,td {
  margin-right:6px;
}
#help i {
  padding:2px;
  background-color:#E5F4FF;
}
#h2help {
  font-size:22px;
  color: #3A81C3;
  padding:8px;
}
.header_top{
	width:100%;
	margin:0 auto;
	position:relative;
}	
.formula_field{		
	width:100%;
	padding:10px 0px;			
}	
.formula_field h1{
	font-size:24px;
	color:#010524;
	font-family:'Open sans', sans-serif;
	font-weight:600;
	text-align:left;
	line-height:30px;
	height:30px;		
}	
.formula_tools{		
	width:100%;		
}
.formula_label{	
	width:70%;
	float:left;
	padding:5px;
}
.formula_delete_tools{		
	width:25%;
	float:right;
}
.delete{		
	float:left;
}	
.reset{		
	float:left;
	font-size:18px;
	color:#010524;
	font-family:'Open sans', sans-serif;
	font-weight:600;
	text-align:center;
	line-height:18px;
	height:18px;
	padding:5px 7px;
	border:#ebebeb 1px solid;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	-moz-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	cursor:pointer;
	margin:0px 0px 0px 13px;		
}
.drag_area{
	width:94%;
	min-height:60px;
	border:1px solid #bebebe;
	position:relative;
	color:#000;
	float:left;
	margin:2% 5px;
}
.drag_area ul{ list-style:none; margin:0px; padding:0px;}
.field_add_delete{
	float:right;			
}
.field_add{
	width:52px;
	height:52px;
	float:left;
	padding:5px 7px;
	cursor:pointer;
	display:block;
	background:url(../images/add.jpg) no-repeat center center;
}
.field_delete{
	width:52px;
	height:52px;
	float:left;
	padding:5px 7px;
	cursor:pointer;
	display:block;
	background:url(../images/delete.jpg) no-repeat center center;
}	
.num_area{
	width: 100%;
	position: relative;
	float:left;
}
.numbers{
	width:100%;
	height:80px;
	float:left;		
}		
.num_area ul{ list-style:none; float:left; margin-left:0px; padding-left:0px;margin-top:-4px}
.num_area ul li{ float:left;}
.num{
	margin:5px 5px;
	height:45px;
	display:block;
	padding:3px 7px;
	cursor:pointer;
	background-color:#fff;
	/*background-image:linear-gradient(to top , #fff, #ccc );
	background:-moz-linear-gradient(to top , #fff, #ccc  );*/
	border:#ebebeb 1px solid;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	-moz-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	cursor:pointer;
	font-size:20px;
	font-family:'Open Sans Condensed', sans-serif;		
	text-align:center;
	line-height:20px;
	font-weight:normal;
	float:left;		
}	
.num3{
	margin:5px 5px;
	height:45px;
	display:block;
	padding:3px 7px;
	cursor:pointer;
	background-color:#fff;
	/*background-image:linear-gradient(to top , #fff, #ccc );
	background:-moz-linear-gradient(to top , #fff, #ccc  );*/
	border:#ebebeb 1px solid;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	-moz-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	cursor:pointer;
	font-size:20px;
	font-family:'Open Sans Condensed', sans-serif;		
	text-align:center;
	line-height:40px;
	font-weight:normal;
	float:left;		
}			
.vars{
	width:100%;
	height:210px;
	position:relative;
	margin-bottom:20px;
}
.num2{
  margin:0px 5px;
	height:45px;
	display:block;
	padding:5px 9px;
	cursor:pointer;
	background-color:#fff;
	/*background-image:linear-gradient(to top , #fff, #ccc );
	background:-moz-linear-gradient(to top , #fff, #ccc  );*/
	border:#ebebeb 1px solid;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	-moz-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	cursor:pointer;
	font-size:40px;
	font-family:'Open sans', sans-serif;
	text-align:center;
	line-height:40px;
	font-weight:600;
	float:left;
}	
.drag{
	width: 95%;
	margin: 0 auto;
	position: relative;
	top: 200px;
	background-color: #999;
}			
.drag_button{
	margin:14px;
	height:40px;
	display:block;
	padding:5px 50px;
	float:left;
	cursor:pointer;
	background-color:#fff;
	border:#999 solid 1px;
	background-image:linear-gradient(to top , #fff, #ccc  );
	background:-moz-linear-gradient(to top , #fff, #ccc  ) ;
}
.drag_area li{
	margin:5px 5px;
	height:45px;
	display:block;
	padding:3px 7px;
	cursor:pointer;
	background-color:#fff;
	/*background-image:linear-gradient(to top , #fff, #ccc );
	background:-moz-linear-gradient(to top , #fff, #ccc  );*/
	border:#ebebeb 1px solid;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	-moz-box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	box-shadow: 0px 0px 4px 1px rgba(185,133,245,0.6);
	cursor:pointer;
	font-size:16px;
	font-family:'Open Sans Condensed', sans-serif;		
	text-align:center;
	line-height:40px;
	line-height:40px;
	font-weight:normal;
	float:left;
}
.drag_area li.placeholder{
	margin:5px 5px;
	height:20px;
	display:block;
	padding:0px 0px;
	cursor:pointer;
	background-color:#fff;
	/*background-image:linear-gradient(to top , #fff, #ccc );
	background:-moz-linear-gradient(to top , #fff, #ccc  );*/
	border:#ebebeb 0px solid;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(185,133,245,0);
	-moz-box-shadow: 0px 0px 0px 0px rgba(185,133,245,0);
	box-shadow: 0px 0px 0px 0px rgba(185,133,245,0);
	cursor:pointer;
	font-size:20px;
	font-family:'Open sans', sans-serif;
	text-align:center;
	line-height:20px;
	font-weight:600;
	float:left;
}

	.submit_data{ width:100%; position:relative;}
	.submit_data input[type="button"]{ width:150px; height:40px; color:#fff; background:#010524; margin:30px auto; border:none; font-size:18px; font-family:'Open sans', sans-serif; text-align:center; line-height:40px; font-weight:600; display:block; cursor:pointer;}

@media(max-width:700px){
		.wrapper{
			height:1200px;}
			
		
}
@media(max-width:480px){
		
			
		.num2 p{
		font-size:27px;}
		
}
@media(max-width:420px){
		.wrapper{
			height:1480px;}
			
		.numbers,.vars_content{
			width:100%;
			height:280px;
			margin:0;}
		.drag{
			top: 160px;	}
			
		.num2 p{
		font-size:26px;}
		.header_top p{
		font-size:18px;
		padding-top:2%;}
}

@media(max-width:380px){
		.wrapper{
			height:1500px;}
			
		.numbers,.vars_content{
			width:100%;
			height:300px;
			margin:0;}
		.drag{
			top: 180px;	}
		.num2 p{
		font-size:24px;}
		.header_top p{
		font-size:16px;
		padding-top:3%;}
		
}
@media(max-width:320px){
		.wrapper{
			height:1600px;}
			
		.numbers,.vars_content{
			width:100%;
			height:300px;
			margin:0;}
		.num2 p{
		font-size:22px;}
		.header_top p{
		font-size:15px;}
		.num p{
		font-size:28px;}
		
		
}
@media(max-width:280px){
		.wrapper{
			height:1600px;}
			
		.numbers,.vars_content{
			width:100%;
			height:300px;
			margin:0;}
		.drag{
		width: 95%;
		margin: 0 auto;
		position: relative;
		top: 60px;
		background-color: #999;
}
		.drag{
			top: 200px;	}
			
		.num p{
		font-size:25px;}
		
}
@media(max-width:240px){
		.wrapper{
			height:2100px;}
			
		.numbers,.vars_content{
			width:100%;
			height:500px;
			margin:0;}
		
		.drag{
			top: 80px;	}
}



/* Table Configs */
/* tr:hover { background: #E3EFFF; } bringt nichts, da abweselnd farbig */ 



/* Width Table listings */
@media(min-width:380px){
  .empty {}  
  .tablewidth {width:110px;}
}
@media(min-width:480px){
  .empty {}
  .tablewidth {width:200px;float:left;}
}
@media(min-width:768px){
  .empty {}
  .tablewidth {width:440px;float:left;}
}
@media(min-width:1024px){
  .empty {}
  .tablewidth {width:740px;float:left;}
}
@media(min-width:1200px){
  .empty {}
  .tablewidth {width:800px;float:left;}
  .calcrent {
    width: 250px;
    position: absolute;
    left: 50%;
    top: 290px;
    margin-left: 310px;
  }
}
@media(min-width:1400px){
  .empty {}
  .tablewidth {width:900px;float:left;}
  .calcrent {
    width: 250px;
    position: absolute;
    left: 50%;
    top: 290px;
    margin-left: 310px;
  }
}


#footer2 {
  margin-left: 0px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 0px;
  background-color: #ffffff;
}

.scroll {
  background: #ffffff;
  height: 200px;
  overflow: scroll;
  width: 100%;
  border: 1px solid #d0d0d0;
  padding: 10px;
}

.tr-hover
{  
  background-color:#fefefe;
}



.imgresize {
    position: relative;
    float: left;
    width:  100%;
    height: 100px;
    margin-bottom: 8px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}