/*
================================
layout.css

projekteins.ch - solgan:
people too weak to follow their
own dreams, will always find a
way to discourage yours!

Murten, � 2011 / ch
================================
*/

/*@import url(color.css);*/
@import url(typo.css);

/* Normalisieren  (margin, padding) */
body, div, dl, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td {
	margin: 0;
	padding: 0;
	} 

/* Normalisieren  (�berschriftsgr�ssen) */
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	}
	
/* Normalisieren  (list-style) */
ol, ul {
	list-style: none;
	}
	
/* Normalisieren  (font-style, font-weight) */
adress, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
	}

/* Normalisieren  (list-style) */
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
	
/* Normalisieren  (border) */
fieldset, img {
	border: 0;
	}

/* Normalisieren (Linksausrichtung) */
caption, th {
	text-align: left;
	}

/* Normalisieren (Anf�hrungszeichen) */
q:before, q:after {
	content:'';
	}


/* Zweispalten Layout */
html {
}
	

body {
	background-color: #DCDBD9;
	padding: 0;
text-align:center;
	background: #ffffff url(../images/union_bg.jpg) top left no-repeat;
	color: #2C2C2C;
	font: normal 100% Arial, Helvetica, sans-serif;
}
	
	
#page {
	max-width: 1024px;
	margin: auto;
text-align:center;
}

.content {
	margin: 2% auto 4%;
	width: 89.75%; /* 900px / 960px */
}

.content .top {
	width: 100%;
	height: 100px;
	padding: 10px 0 10px 0;
}

.top .figure {
	float: left;
	text-align:left;
	z-index: 100;
	margin-left: 4%;
	margin-bottom: 0.5em;
	width: 44.7341772%; /* 231px / 474px */
}

.top img.full, object.full, .main img, .main object {
	max-width: 100%;
	}

.logo {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/union-logo.png", sizingMethod="scale");
}

.top .toplinks {
	font-size: 60%;
	border-radius: 10px;
	/*background: #ccc; /* Fallback IE 6-8 */
    /*background: rgba(203, 218, 247, .5);*/
	width: 50.7341772%; 
	height: 100px;
	color: #00477f;
	overflow: hidden;
	text-align: right;
}

#top-logos {
	margin-top: 2%;
}

#top-logos li {
	display: inline;
}

#top-logos a img {
	border: none; 
	opacity: 0.2;
	margin-left: 6%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE 8 hack */ 
	filter: alpha(opacity = 20); /* IE 5-7 hack */ 
}

#top-logos a:hover img, #top-logos a:focus img {
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
	filter: alpha(opacity = 70); /* IE 5-7 hack */ 
}



.content .menu {
	margin-top: 18px;
	padding: 1.5% 0 1.5% 0;
	width: 100%;
	background: #00477f;
	border-radius: 7px;
}


.menu ul {
	padding: 0;
	margin: 0;
	}
	
.menu ul li {
	margin:0;
	padding: 0;
	display: inline;
	list-style:none;
	}

.menu ul li a.cederholm {
	padding: 1.5% 2%;
	margin: 0;
	width: 100%;
	font-size: 100%;
	text-decoration:none;
	color:#ffffff;
	/*text-shadow: 1px 1px 2px #999;*/
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border: none;
}
	
.menu ul li a.cederholm:hover,
.menu ul li a.cederholm:focus {
	color: #e7464d;
	/*text-shadow: 1px 1px 2px #f4bcbe;*/
	/*background: url(../images/union-menu.png) top center no-repeat;*/
	}
	
.content .main {
	margin-top: 18px;
	width: 100%;
	border-radius: 7px;
	background: #ffffff;
	height: auto;
}


/*------ falls zweispaltig ------*/
.content .left {
	float: left;
	width: 47%; 
	margin-left: 2%;
}

.content .right {
	float: right;
	width: 47%; 
	margin-right: 2%;
}
	
form { 
	/*margin: 0 0 10px 0;*/ 
	text-align: left;
	padding:4%;
	padding-top: 0;
}

label { 
	display: block; 
	font-weight: bold; 
	font-size: 72%;
	line-height: 1.4;
	color: #00477f; 
	color: rgba(0, 71, 127); 
	text-shadow: 0 1px 1px #fff; 
}

fieldset:last-child { 
	margin: 0; 
}

dd input[type="text"] { 
	width: 95%; 
	padding: 5px 8px;
	margin-bottom: 4%;
 	color: #00477f; 
	border: none; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#d5dde6)); 
	background-image: -moz-linear-gradient(0% 12% 90deg, #d5dde6, #999);
	background-color: #d5dde6; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
}

dd textarea { 
	width: 95%; 
	padding: 5px 8px;
	margin-bottom: 4%;
 	color: #00477f; 
	border: none; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#d5dde6)); 
	background-image: -moz-linear-gradient(0% 12% 90deg, #d5dde6, #999);
	background-color: #d5dde6; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
}

dd input[type="text"]:focus { 
	-webkit-box-shadow: 0 0 12px rgba(142, 171, 196, 0.5); 
	-moz-box-shadow: 0 0 12px rgba(142, 171, 196, 0.5); 
	box-shadow: 0 0 12px rgba(142, 171, 196, 0.5);
}

dd input[type="textarea"]:focus { 
	-webkit-box-shadow: 0 0 12px rgba(142, 171, 196, 0.5); 
	-moz-box-shadow: 0 0 12px rgba(142, 171, 196, 0.5); 
	box-shadow: 0 0 12px rgba(142, 171, 196, 0.5);
}


input[type="submit"] {
	padding: 8px ;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #00477f; 
	border: none; 
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d5dde6)); 
	background-image: -moz-linear-gradient(0% 100% 90deg, #bbb, #fff); 
	background-color: #fff;
	-webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

input[type="submit"]:hover, input[type="submit"]:focus {
-webkit-animation: pulse 1.5s infinite ease-in-out; 
}


ul.gallery {
	list-style: none;
	line-height:150%;
	margin: 4%;
	font-size: 72%;
	color: #00477f;

}

ul.gallery li {
	float: left;
	display: inline-block; 
   width:110px; 
   height:170px; 
    vertical-align: top;
    margin: 0% 1% 4% 0%; 
	padding: 0%;
	border: 0px solid #ddd; 

	text-align: center;
	}
ul.gallery li img {
		margin-bottom: 5%;
}
 /* -------- inline block hack, thanks to http://www.ruzee.com/ you rock!----------- 
ul.gallery li { 
	display:-moz-inline-box; -moz-box-orient:vertical;
    display:inline-block; vertical-align*/:top; word-wrap:break-word;
    text-align: left; 
 } 
 
  * html .gallery li { display:inline; }
  * + html .gallery li { display:inline; }
  .gallery li > * { 
  	display:table; table-layout:fixed; }/*
* html .gallery li { width:80px; }   /* for IE 6 */
/*.gallery li > * { width:80px; }      /* for all other browser */
/* end hack */
	
/*ul.gallery li a img {  
text-align: left;
	width: 75px;
	margin-bottom: 5%;
	-webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

ul.gallery li a:hover img {
	-webkit-transform: scale(2);
	-moz-transform: scale(2); 
	-o-transform: scale(2); 
	transform: scale(2); 
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
div.galleryreihe {
		margin: 0 4% 4% 4%;;

	}*/




.bildname {
	display: inline;
	text-align: left;
	font-size: 100%;
	margin: 0 0 2% 0;

	font-weight: bold;
	
}
.bilddaten {
text-align: left;
	font-size: 90%;
	font-weight: normal;
	
}
/* Ausstattung platzieren */
	
h2 {
	margin-top:1%;
	margin-bottom:2%;
	font-size:120%;
	color: #00477f;
	font-weight:bold;
	letter-spacing:1px;
	}

h1, h3, h4 {
	margin: 0;
	padding: 4%;
	font-size:120%;
	color: #00477f;
	font-weight:bold;
	line-height: 1em;
	letter-spacing:0.4em;
	dixplay:block;
	text-align:left;
	}

h5 {
	display:none;
	}

.main p {
	display: inline-block;
	padding:4%;
	padding-top: 0;
	padding-bottom: 2%;
	line-height:150%;
	font-size: 72%;
	color: #00477f;
	text-align: justify;
	width: 92%;
	}


/*p.contact1 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;
		background: url(../kadersfl/sr/Wermelinger_Daniel.jpg) top left no-repeat;
		background-size:contain;
}
p.contact2 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;
		background: url(../kadersfl/sr/Studer_Stephan.jpg) top left no-repeat;
		background-size:contain;
}
p.contact3 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;
		background: url(../kadersfl/sr/Kever_Sascha.jpg) top left no-repeat;
		background-size:contain;
}
p.contact4 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;		
		background: url(../kadersfl/sr/Bieri_Alain.jpg) top left no-repeat;
		background-size:contain;
}
p.contact5 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;		
		background: url(../kadersfl/assi/Arnet_Matthias.jpg) top left no-repeat;
		background-size:contain;
}
p.contact6 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;		
		background: url(../kadersfl/assi/Zeder_Rafael.jpg) top left no-repeat;
		background-size:contain;
}
p.contact7 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;
		background: url(../kadersfl/sr/Gremaud_Ludovic.jpg) top left no-repeat;
		background-size:contain;
}
p.contact8 {
		padding-left: 12%;
		margin-bottom: 1%;
		margin-left: 4%;
		background: url(../kadersfl/assi/Helbling_Charles.jpg) top left no-repeat;
		background-size:contain;
}
*/
.auswahl {
	text-align: left;
	/*padding: 0 4% 1% 0%;*/
}

.auswahl select, .auswahl input {
	padding: 8px ;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-bottom: 2%;
	line-height: 1;
	color: #00477f; 
	border: none; 
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#d5dde6)); 
	background-image: -moz-linear-gradient(0% 100% 90deg, #bbb, #fff); 
	background-color: #fff;
	-webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px; border-radius: 23px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.anzeigejahr p {
	padding: 0;
	margin: 0;*
	}

table.text {
	width: 100%;
	padding:4%;
	margin-left: 4%;
	padding-top: 0;
	line-height:150%;
	font-size: 72%;
	color: #00477f;
	text-align: justify;
	margin-bottom: 4%;
}
table#zellespiele {
	width: 92%;
	border-bottom: 1px solid #e7eef3;
	margin-bottom: 2%;

}

table#zellespiele td {
		width: 31%;
		vertical-align: top;
		padding-right: 2%;
}

.main p img {
	float: left;
	margin: 0 6% 4% 0;
	width: 48%;
}

hr {
	background-color:#e7eef3; /* Mozilla 1.4 */
	color:#e7eef3; /* IE 6 */
	border: #e7eef3; /* Opera 7.11 */
	height: 1px; /* in Opera f�r die Anzeige n�tig, in Mozilla f�r die einheitliche H�he */
	}
	
.copyright {
	clear:both;
	margin-top: 8%;
	padding:4%;
	line-height:150%;
	font-size: 62%;
	color: #c0c5cb;
	}
	
.footer-logos {
	float: clear;
	margin-top: 2%;
	text-align: center;
}

.footer-logos a img {
	border: none; 
	opacity: 0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE 8 hack */ 
	filter: alpha(opacity = 20); /* IE 5-7 hack */ 
}
.footer-logos a:hover img, .footer-logos a:focus img {
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 hack */
	filter: alpha(opacity = 70); /* IE 5-7 hack */ 
}
.main p img.cupfinal {
	width: 14%; important!
	}
	
	
.imagelarge img {
	width: 100%;
	}	

	
@media all and (min-width: 1px) and (max-width: 799px) {

html {
	width: 100%;
	}

body {

	font: normal 135% Arial, Helvetica, sans-serif;
}
	
#page {
	max-width: 720px;
	width: 98%;
	margin: auto;
	text-align:center;
}

.content .left {
	float: left;
	width: 98%; 
	margin-left: 1%;
	margin-right: 1%;
}

.content .right {
	float: right;
	width: 98%; 
	margin-left: 1%;
	margin-right: 1%;
}

.top .figure {
	float: left;
	text-align:center;
	z-index: 100;
	margin-left: 0%;
	margin-bottom: 0.5em;
	width: 100%; /* 231px / 474px */
}
.content .menu {
	margin-top: 0;
}
.menu {
	font: normal 100% Arial, Helvetica, sans-serif;
	line-height: 150%;
}

#top-logos {
	display: none;
	}


h1, h2, h3, h4 {

	font: bold 120% Arial, Helvetica, sans-serif;
}
.main p {
	line-height:150%;
	text-align: left;
	width: 92%;
	}
	
ul.gallery {
	list-style: none;
	line-height:150%;
	margin: 4%;
	font-size: 72%;
	color: #00477f;
	width: 92%;

}

ul.gallery li {

   width: 92%; 
   height: auto;
    vertical-align: top;
    margin: 0% 1% 4% 0%; 
	padding: 0%;
	border: 0px solid #ddd; 

	text-align: center;
	}
	
.bildname {
	float: left;

	display: block;
	width: 30%;
	text-align: left;
	font-size: 120%;
	margin: 0 0 6% 8%;

	font-weight: bold;
	
}
.bilddaten {
	float: left;
	display: block;
	width: 30%;
	text-align: left;
	font-size: 90%;
	margin: 0 0 6% 8%;
	font-weight: normal;
	
}
ul.gallery li img {
		float: left;
		margin-bottom: 5%;
		width: 75px;
}

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

html {
	width: 100%;
	}

body {

	font: normal 150% Arial, Helvetica, sans-serif;
}
	
#page {
	width: 96%;
	margin: 2%;
	padding: 0;
text-align:center;
}

.content {
	margin: 0;
	width: 100%; /* 900px / 960px */
}
.content .left {
	float: left;
	width: 98%; 
	margin-left: 1%;
	margin-right: 1%;
}

.content .right {
	float: right;
	width: 98%; 
	margin-left: 1%;
	margin-right: 1%;
}

.top .figure {
	float: left;
	text-align:center;
	z-index: 100;
	margin-left: 0%;
	margin-bottom: 0.5em;
	width: 100%; /* 231px / 474px */
}
.content .menu {
	margin-top: 0;
	
}
.menu {
	font: bold 170% Arial, Helvetica, sans-serif;
	line-height: 175%;
}

#top-logos {
	display: none;
	}

h1, h2, h3, h4 {

	font: bold 180% Arial, Helvetica, sans-serif;
}
.main p {
	line-height:200%;
	text-align: left;
	width: 92%;
	}
}



/*end css projekteins.ch */