html {
	font-size: 95%;
}

body {
	line-height: 1.5em;
	font-family: 'Arial', 'Helvetica', sans-serif;
	color: #444;
	/*background-attachment: fixed;*/
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100%;
}


#container {
	/*max-width: 1130px;*/
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: white;
	/*opacity: 0.92;*/
}

div#introduction-container {
	float: left;
}

header {
	position: fixed;
	height: 60px;
	padding: 0;
	width: 100%;
    /*margin-bottom: 5px;*/
	background: #65944A;
    /*box-shadow: 5px 5px 5px 0px #999;
    -moz-box-shadow: 5px 5px 5px 5px #999;
	-webkit-box-shadow: 5px 5px 5px 5px #999;*/
}

div#horziontal_bar {
	width: 100%;
}

header div#siteName {
	display: block;
	margin: 0;
	float: left;
	font-weight: normal;
	padding: 5px 20px;
	color: #FFF;
	font-size: 2.125em;
	line-height: 1.5em;
	font-family: 'Arial';
    width: 20%;
}


header img#logo{ 
	height:50px; 
	width: 50px;
	float: left;
	margin: 5px 10px;
	display: block;
}

header a#loginName {
    display: block;
    float: right;
    padding: 5px 30px 5px;
    color: white;
    text-decoration: none;
}

header img.flag {
	float: right;
	height: 15px;
	width: auto;
	display: block;
	padding: 5px 30px 2px 5px;
	cursor: pointer;
	text-decoration: none;
}

header img.flag#germany {
	clear: right;
}

#toggleNavMain {
	display: none;
}


/* 1130px layout, 15px margin, 16 50px columns, gutter 20px */
#navMain {
	float: left;
	width: 21.49532710280374%;
	margin-right: 4.6728972%;
	padding-top: 80px;
}

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

nav li {
	float: left;
	width: 100%;
}

nav li a {
	display: block;
	text-decoration: none;
	margin: 4% 0 0 0;
	padding: 7% 7% 7% 7%;
	font-size: 1em;
	font-weight: bold;
	color: #333;
}

nav li:nth-of-type(1) a {
	margin: 0;
}

nav li:nth-of-type(1) a {
    color: #861318;/*#FFED00;*/
}

nav li:nth-of-type(2) a {
    color: #00ADB0;
}

nav li:nth-of-type(3) a {
    color: #3D990F;   
}

nav li a:hover, nav li a:active, nav li a:focus {
	background: #d1dfc9;
	border: 1px solid #BBB;
}

nav ul.subMain {
	padding: 0 0 0 10%;
	margin-top: 0;
}

.js #navMain ul.subMain {
	display: none;
}

nav ul.subMain li {
	float: left;
	width: 100%;
	background: white;
}

nav ul.subMain li a {
	border-left: 3px solid #bdb587;
	margin: 2% 0 0 0;
	font-size: 0.8em;
}

nav ul.subMain li a:hover, nav ul.subMain li a:active, nav ul.subMain li a:focus {
	background: #b1d4d0;
}

#content {
	float: left;
	width: 73.8317757%;
	padding: 80px 0 0 0;
	margin-bottom: 0;
}

#content figure {
	margin-bottom: 4%;
}

#content h1 {
	font-size: 1.25em;
	margin-top: 1em;
	margin-bottom: 0em !important!;
}

#content h2 {
	font-size: 1.125em;
	margin-top: 1em;
	margin-bottom: 0em !important!;
}

#content img {
	max-width: 100%;
	height: auto;
}

#content section {
	float: left;
	padding-bottom: 1%;
	margin: 0 0 5% 0;
	width: 100%;
}


#content section.side:nth-of-type(1),
#content section.side:nth-of-type(2) {
	width: 46.835443%;
}

#content section.side:nth-of-type(1) {
	margin-right: 6.329114%;
}

#content section.Block {
	border-bottom: 1px solid #65944A;
	margin: 0;
	padding: 5%;
}


#content section a {
	color: #65944A;
	text-decoration: none;
    cursor: pointer;
}

#content a:hover, #content a:focus, #content a:active {
	text-decoration: underline;
	background: #d1dfc9;
}

#content ul.wunschlisten {
	list-style: none;
}

#content ul.wunschlisten a {
	display: block;
	width: 50%;
	padding: 2%;
	margin: 0;
	text-align: center;
	border: 1px solid #65944A;
    box-shadow: 5px 5px 5px 5px #999;
    -moz-box-shadow: 5px 5px 5px 5px #999;
	-webkit-box-shadow: 5px 5px 5px 5px #999;
}

ul.listoverview{
	padding-left: 0;
	/*list-style: none;*/
    list-style-image: url("../img/list85.png");
    list-style-position: inside;
}

#content ul.listoverview li {
	/*display: block;*/
	width: 84.2534801%; /* 330px /(1130px * widthpercentagecontent * widthpercentagesectionside) -0.2% because of padding */ /* 5*50px+4*20px */
	margin-right: 5.1185392733%; /* 20px /(1130px * widthpercentagecontent * widthpercentagesectionside) */
	padding: 1em 1%;
	border: 1px solid #DDD; /*#65944A;*/
	font-style: normal;
	/*font-size: 1.2em;*/
	color: #444; /*#861318; /*#555;*/
	text-align: center;
	/*border-radius: 5px;*/
}

#content ul.listoverview li a{
	float: right;
	width: 100%;
	font-style: normal;
	color: #444; 
}

#content ul a:hover li, #content ul a:focus li, #content ul a:active li {
	text-decoration: none;
	background: #d1dfc9;
}

#content ul.personoverview{
	padding-left: 0;
    list-style-image: url("../img/users95.png");
    list-style-position: inside;
}

#content ul.personoverview li {
	width: 84.2534801%; /* 330px /(1130px * widthpercentagecontent * widthpercentagesectionside) -0.2% because of padding */ /* 5*50px+4*20px */
	margin-right: 5.1185392733%; /* 20px /(1130px * widthpercentagecontent * widthpercentagesectionside) */
	padding: 1em 1%;
	border: 1px solid #DDD; /*#65944A;*/
	font-style: normal;
	color: #444; /*#861318; /*#555;*/
	text-align: center;
}

#content ul.personoverview li a {
	float: right;
	width: 100%;
	font-style: normal;
	color: #444; 
}

#content ol.allowedpersons{
	list-style: none;
}

#content ol.allowedpersons li {
	font-style: normal;
	width: 84.2534801%; /* 330px /(1130px * widthpercentagecontent * widthpercentagesectionside) -0.2% because of padding */ /* 5*50px+4*20px */
	margin-right: 5.1185392733%; /* 20px /(1130px * widthpercentagecontent * widthpercentagesectionside) */
	padding: 1em 1%;
	border: 1px solid #DDD;/*#00ADB0;*/
	display: block;
	color: #444;/*#00ADB0;*/
	text-align: center;
}

#content ol {
    padding: 0;
    margin: 0;
    /*background: url("../img/christmaspresent11.png");
    background-repeat: no-repeat;*/
    /*list-style: none;*/
    list-style-image: url("../img/christmaspresent11.png");
}

#content ol li {
    /*display: block;*/
    width: 100%;
    /*padding: 2% 2% 2% 0;*/
    margin: 10px 10px 10px 0;
    /*background: white;*/
    /*border-radius: 5px;*/
    	float: left;
	width: 81.50554498%;
	/*margin: 0 2.397221911% 3em 0;*/
}

#content textarea.new {
	resize: none;
	color: #222;
    border: 1px solid #DDD;
    padding: 0.4em;
    width: 84.2534801%; /* 330px /(1130px * widthpercentagecontent * widthpercentagesectionside) -0.2% because of padding */
    margin: 0.4em 5.118392733% 0.4em 0; /* 5.118392733% */
    /*font-size: 1em;
	width: 90%;
    color: #111;*/
}

#content div.hiddenInfo {
    width: 90%;
    float: left;
    padding: 0 0 10px;
    color: #E47911;
    border-radius: 5px;
}

#content div.hiddenInfo p {
    margin: 0;   
}

#content article#my h1, #content article#my h2 {
    color: #861318;
}

#content article#addmember h1, #content article#addmember h2 {
    color: #00ADB0;
}

#content article#their h1 {
    color: #3D990F;   
}

#content article#their h2 {
	color: #444;
}

#content article#their h2#anlass {
	color: #3D990F;  
}

#content article#my ol li {
	list-style: none;
	padding-right: 1.797916433%;
	display: block;
	width: 98.20208357%;
	margin-right: 0;
}

section#login {
	width: 100%;
	padding: 0.5em;
	margin: 60px 0 0;
	font-size: 0.9em;
	text-align: center;
	/*box-shadow: 5px 5px 5px 5px #999;
    -moz-box-shadow: 5px 5px 5px 5px #999;
	-webkit-box-shadow: 5px 5px 5px 5px #999;*/
	background: white;
}

section#introduction {
	width: 20.79646018%;
	padding: 20px 20px;
	margin: 2em 1.327433628% 0 0 ;/*34.57943925233645% 0;*/
	text-align: left;
	box-shadow: 5px 5px 5px 5px #999;
    -moz-box-shadow: 5px 5px 5px 5px #999;
	-webkit-box-shadow: 5px 5px 5px 5px #999;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0 5px 5px 0;
	background: rgba(255,255,255,0.9);
}

section#introduction h1, section#introduction h2 {
	font-size: 1.25em;
}


section#login h1 {
	font-size: 1.25em;
	margin-top: 1em;
	margin-bottom: 0em !important!;
}
section#login h2 {
	font-size: 1.125em;
	margin-bottom: 0em !important!;
	margin-top: 0em !important!;
	display: none;
}

section#login a#fb-button {
  color: #ffffff;
  padding: 0.3em 0.8em;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #2b4b90;
  *background-color: #133783;
  background-image: -moz-linear-gradient(top, #3b5998, #133783);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
  background-image: -webkit-linear-gradient(top, #3b5998, #133783);
  background-image: -o-linear-gradient(top, #3b5998, #133783);
  background-image: linear-gradient(to bottom, #3b5998, #133783);
  background-repeat: repeat-x;
  border-radius: 5px;
  font-family: helvetica;
  border-color: #133783 #133783 #091b40;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

section#login a#fb-button:hover,
section#login a#fb-button:focus,
section#login a#fb-button:active,
section#login a#fb-button.active,
section#login a#fb-button.disabled,
section#login a#fb-button[disabled] {
  color: #ffffff;
  background-color: #133783;
  *background-color: #102e6d;
}

.btn-facebook:active,
.btn-facebook.active {
  background-color: #0d2456 \9;
}


section a {
	color: #65944A;
	text-decoration: none;
}

section a:hover, section a:focus, section a:active {
	text-decoration: underline;
	background: #d1dfc9;
}

div#present {
	text-align: center;
	background: white;
	margin-top: 75vh;
	padding-top: 1em;
}


div#present div.img {
	background: white;
    margin: 1em 1%;
    padding: 2em;
    border: 3px solid #ccc;
    float: left;
    width: 23%;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div#present div.img:hover {
    border: 3px solid #65944A;
}

div#present div.img img {
	height: 128px;
    width: 128px;
}

div#present div.desc {
    padding: 15px;
    text-align: center;
}


#content section#register {
	float: left;
	width: 73.8318%;
}

#content img.present {
	max-width: 100%;
	margin: 0;
	padding: 10px 10px 10px 0;
	border: 1px solid #333;
}

div#amznWidget {
	display:block;
}



footer {
	clear: both;
	color: #333;
	text-align: center;
	font-size: 0.75em;
}

footer a {
	color: #333;
	text-decoration: none;
}

footer a:hover, footer a:focus, footer a:active {
	text-decoration: underline;
}


h1, h2, h3 {
	font-weight: bold;
	color: #333;
}

h1 {
	font-size: 2.250em;
	line-height: 1.5em;
}

h2 {
	font-size: 1.625em;
	line-height: 1.5em;
}

h3 {
	font-size: 1.375em;
	font-weight: normal;
}

input {
    color: #222;
    border: 1px solid #DDD;
    padding: 0.4em;
    width: 27.43458505%; /* (120-2*0.4*16) / widthofsectionside  */
    margin: 0.4em 5.118392733% 0.4em 0; /* 5.118392733% */
    font-size: 1em;
}

input[type="submit"] {
    /*font-size: 1em;*/
    width: 68.07462335%; /* (140px + 120px + 6px border - 2*0.4*16) / widthsectionside */
    /*width: 56.30232007%;*/
    padding: 0.4em;
    margin-right: 5.118392733%;
	text-align: center;
}

input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:focus, input[type="submit"]:active {
	background: #65944A;
}

input[type="submit"].delete {
    /*height: 23px;*/
    width: 33.333333%;
    padding: 0.2em 0;
	margin: 0;
	float: left;
	font-size: 0.75em;
	/*width: 23px;
    padding: 0px;*/
	/*background: #d60a0a;
	/*margin-top: 3px;*/
    color: #d60a0a;
    font-weight: bold;
    /*float: right;*/
    /*border-radius: 5px;*/
}

input[type="submit"].delete#memberDelete {
	float: right;
	padding: 0.3em;
	width: 1.725em;
}


input[type="submit"].edit {
    width: 66.6666666666%; /*33.333333333%;*/
    padding: 0.2em 0;
	margin: 0;
	float: left;
	font-size: 0.75em;
    /*height: 23px;
	width: auto;
    padding: 1px 3px;*/
	/*background: #369;*/
    color: #369;
	/*margin: 3px 3px 0 0;
    float: right;*/
    /*border-radius: 5px;*/
}

input[type="submit"].move {
    width: 100%;
    padding: 0.2em 0;
	margin: 0;
	float: left;
	font-size: 0.75em;
    /*height: 23px;
	width: auto;
    padding: 1px 3px;*/
	/*background: #663;*/
    color: #663;
	/*margin: 3px 3px 0 0;
    float: right;*/
    /*border-radius: 5px;*/
}

ol li div.wishText {
	float: left;
	width: 81.50554498%;
	margin: 0 2.397221911% 3em 0;
}

ol li div.edit {
	float: left;
	width: 16.09723311%;
}


input[type="text"], input[type="email"], input[type="password"] {
	width: 64.76333418%; /* (140px + 120px + 6px border - 2*0.4*16) / widthsectionside */
}


input[type="radio"] {
    /*width: 14px;
    margin: 0;
    height: 1em;
    cursor: pointer;
    background-color: #444;
    /*display: block;
    clear: left;
    float: left;*/
}


/* test*
 **/
input[type="radio"] {
    display:none;
    width: 14px;
    margin: 0;
    padding: 0;
    border: 0;
}
input[type="radio"].movewish {
	display:inline;	
	margin-right:4px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    border: 1px solid #444;/*#65944A;*/
    cursor:pointer;
}
input[type="radio"]:checked + label span {
    /*background:#65944A;*/
    /*border: none;*/
    background: url("../img/christmaspresent11.png");
    background-repeat: no-repeat;
}

input[type="radio"].addPerson:checked + label span {
    /*background:#65944A;*/
    /*border: none;*/
    background: url("../img/social-network14.png");
    background-repeat: no-repeat;
}
/* test end */


div#introduction-container input[type="text"],div#introduction-container input[type="email"],div#introduction-container input[type="password"], div#introduction-container input[type="submit"] {
	width: 15em;
	font-size: 0.95em;
	padding: 0.2em 0.5em;
	height: 1.65em;
	margin: 0.2em 0;
}

div#introduction-container input[type="submit"] {
	width: 15em;
	font-size: 0.95em;
	padding: 0.2em 0.5em;
	height: 2.15em;
	margin: 0.2em 0;
}


form{
	font-size: 1em;
	color: #444;
}

form label {
	padding: 0.5em 0.1em;
	display: block;
	margin-left: 0;
	margin: 0;
}

ul {
	/*font-size: 1.1em;*/
	color: #444;
	/*list-style: none;*/
    list-style-image: url("../img/christmaspresent11.png");
	/*padding-left: 0;*/
}
/*
label {
    margin: 15px;   
}*/

img.miniImg {
	width: 15px;
	height: 15px;
	margin: 3px 2px 0 2px;
}

img.showInfo {
    cursor: pointer;
}




@media only screen and (max-width:60em) {/*(max-width:910px) {*/
	#navMain, #content {
		width: 100%;
		padding-top:  60px;
	}
	
	#navMain li {
		width: 20%;
		text-align: center;
	}
	
	#navMain li a {
		margin: 4% 7% 0 0;
	}
	
	#navMain ul.subMain {
		position: absolute;
		margin: 0 7% 0 0 ;
		padding: 0;
		width: 30%;
	}
	
	#navMain ul.subMain li {
		text-align: center;
		z-index: 999;
		width: 100%;
		margin-right: 7%;
	}
	
	#navMain ul.subMain li a {
		margin-top: 1%;
	}
	
	/*
	section#login {
		width: 50%;
		margin: 5% 25%;
		border: 0;
	}
	
	*/

	
	section#login h2 {
		display: block;
	}
	
    #content ul.listoverview li a {
        padding: 20px 10px 0;
    }
    
    section#introduction {
		width: 90%;
		margin: 2em;
		padding: 2ems;

	}
	
	/*
	div#introduction-container input[type="text"],div#introduction-container input[type="email"],div#introduction-container input[type="password"], div#introduction-container input[type="submit"] {
		width: 80%;
		font-size: 0.95em;
	}*/
	
	#content ul.listoverview li a {
		width: 80%;
	}
	
	div#present div.img {
		width: 48%;
	}

	
}

@media only screen and (max-width:40em) {/*(max-width:640px) {*/
	#container {
		padding: 0 25px 5px;
	}
	
	#content {
		padding: 20px 0 0;
	}
	
	#logo > img{
		padding-top:0; 
	}
	
	#content section.side:nth-of-type(1),
	#content section.side:nth-of-type(2) {
		width: 100%;
	}

	#content section.side:nth-of-type(1) {
		margin-right: 0;
	}
	
	#content .firstArtImg {
		padding: 5%;
		width: 50%;
		height: auto;
	}
	
	#content section.artikel img.mainImg {
		padding: 5%;
		width: 55%;
		height: auto;
	}
	
	#content ul.wunschlisten a {
		width: 40%;
	}
	
	
	input[type="submit"].delete {
		width: 33.333333%;
	}

	input[type="submit"].edit {
		width: 33.3333333%
	}

	input[type="submit"].move {
		width: 33.333333%
	}

	ol li div.wishText {
		width: 100%;
		margin-bottom: 0.2em;
	}

	ol li div.edit {
		width: 100%;
		margin-bottom: 2em;
	}
	
	section#introduction {
		margin: 0;
		width: 100%;
		background: white;
		box-shadow: 0px 0px 0px 0px #999;
		-moz-box-shadow: 0px 0px 0px 0px #999;
		-webkit-box-shadow: 0px 0px 0px 0px #999;
	}
	
	/*
	section#introduction {
		width: 90%;
		margin: auto;
	}*/
	
	div#present {
		margin-top: 1em;
	}

	div#present div.img {
		width: 80%;
		margin-right: 10%;
		margin-left: 10%;
	}


}

@media only screen and (max-width:40em) { /*(max-width: 520px) {*/
	#container {
		/*padding: 0 2% 2%;*/
		padding: 0;
		margin-left: 0;
		margin-right: 0;
	}
	
	#content { 
		padding: 0 2% 2%;
		width: 96%;
	}
	
	header {
		position: static;
		width: 100%;
		height: 70px;
		/*background: white;*/
		border: 0;
		padding: 0;
		margin: 0 0 2px 0;
		font-size: 1.25em;
		border-bottom: 1px solid #bdb587;
        box-shadow: 0 0 0 0 #fff;
        -moz-box-shadow: 0 0 0 0 #fff;
	   -webkit-box-shadow: 0 0 0 0 #fff;
	}
	
	header div#siteName {
		display: none;
	}
    
    header a#loginName {
        display: none;
    }
    
    
    section#login {
		margin: -2px 0;
		position: static;
	}
	

	div#introduction-container input[type="text"],div#introduction-container input[type="email"],div#introduction-container input[type="password"], div#introduction-container input[type="submit"] {
		width: 80%;
		font-size: 0.95em;
	}
	
	
	#logo > img {
		margin: 2% 0 2% 0;
		width: 40%;
		max-width: 115px; 
		height: auto;
	}
	
	.js #navMain {
		display: none;
	}
	
	#toggleNavMain {
		display: block;
		float: right;
		text-align: center;
		/*margin: 2% 0 2% 5%;*/
		margin: 0 0 2% 5%;
		width: 30%;
		/*color: #65944A;*/
		color: white;
		/*padding: 7% 3%;*/
		padding: 1.5em 3%;
		font-size: 0.9em;
		font-weight: bold;
		cursor: pointer;
	}
	
	
	#navMain {
		padding-top: 0;
	}
	
	#navMain li {
		width: 100%;
	}
	
	#navMain li a {
		margin: 2% 0 0 0;
		padding: 4%;
	}
	
	#navMain li a:nth-of-type(1),
	#navMain li a:nth-of-type(2) {
		margin-right: 0;
	}
	
	#navMain ul.subMain {
		position: static;
		margin: 0 7% 0 0 ;
		padding-left: 10%;
		width: 90%;
	}
	
	#navMain ul.subMain li {
		text-align: center;
		z-index: 999;
		width: 100%;
		margin-right: 7%;
	}
	
	#navMain ul.subMain li a {
		margin-top: 1%;
	}
	
	#content section {
		margin-bottom: 50px;
	}
	
	#content ul.wunschlisten a {
		width: 75%;
	}
	
	#content section#register > figure {
		display: none;
	}
	
	#content textarea.new {
		width: 90%;
	}
	
	div#amznOptLinks {
		display: none;
	}
	
	div#amznWidget {
		display: block;
	}
	
	header img.flag {
		float: left;
		height: 15px;
		width: auto;
		display: block;
		padding: 2px 5px 5px 5px;
		cursor: pointer;
		text-decoration: none;
		margin-top: 35px;
	}
	
}