@import url(reset.css);
@import url(menu-bar.css);

.clr{ clear: both; }
a { text-decoration: none; }

body {
	/*font-family: tahoma, arial, sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height:18px;
	color: #474747;
	background-color: #fcfff4;

}

.zadania { display: none; float: right; }

.site { 
	width: 90%;
	margin: 0 auto;
}

.foto-background {
	background-image: url('../images/banner.jpg');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 1;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	z-index: -1; 
}

#site-inner {
	width: 70%;
	margin: 0 auto;
	min-height: 500px;
}

#top {
	padding: 10px; 
	
	
}
#logo {
	width: 300px;
	float: left;
}
#wsparcie {
	width: 620px;
	float: right;
	text-align: right;
}


#banner, #footer, #banner1 {
	margin: 10px auto;
	background-color: #fcfff4;
	padding: 20px;
}

#banner, #banner1 {
	text-align: center;
	font-weight: 600;
	font-size: 20px;
	height: 100px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfff4+0,dfe5d7+53,b3bead+100 */
	background: #fcfff4; /* Old browsers */
    background: -webkit-linear-gradient(#fcfff4 0%, #dfe5d7 53%, #b3bead 100%);
    background: -o-linear-gradient(#fcfff4 0%, #dfe5d7 53%, #b3bead 100%);
    background: linear-gradient(#fcfff4 0%, #dfe5d7 53%, #b3bead 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
}

#banner1 { height: 5px; }

#footer {
	height: 70px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3bead+0,dfe5d7+47,fcfff4+100 */
    background: #b3bead; /* Old browsers */
    background: -moz-linear-gradient(top, #b3bead 0%, #dfe5d7 47%, #fcfff4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b3bead 0%,#dfe5d7 47%,#fcfff4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b3bead 0%,#dfe5d7 47%,#fcfff4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */
}

#content {
	padding: 40px;
	color: black;
}

#content .widget { /* tu jest spacja, bo footer jest w innym wpisie niż widget */
	width: 200px;
	float: left;
	margin-right: 10px;
	border: 1px solid #333;
	padding: 10px;
}

#last.widget { margin-right: 0px;} /* nie ma spacji, bo box-media i widget są w tym samym */

#foto, #foto-ania {
	width: 300px;
	float: left;
	text-align: center;
}
#menuszkola {
	width: 300px;
	float: left;
}
#foto-ania {
	margin-top: -40px;
}
#text, #text-strony {
	background-color: #fcfff4;
	border: 1px solid #b3bead; 
	padding: 20px;
}

#text-strony { margin-bottom: 20px; }

#text {
	width: 600px;
	float: right;
	-webkit-box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	-moz-box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	opacity: 0.95;

}

#text p, #text-strony p { padding-bottom: 10px; }
#text { font-size: 14px; }

.first { font-weight: 600; font-size: 20px;}

#kontakt {
	float: left;
	width: 300px;
}

.slid {
	width: 50%;
	text-align: center;
}

.ramka, .kafelek { margin-top: 20px; border: 2px solid #fcfff4; padding: 8px; 
	-webkit-box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	-moz-box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	box-shadow: 10px 10px 42px 0px rgba(0,0,0,0.44);
	opacity: 0.95;
}

.panellewy, .panelprawy { float: left; }
.panelprawy { width: 30%; 
	background-color: #fcfff4;
	margin-left: 20px;
	padding: 20px;
	text-align: center;	
}

.kafelek { float: left; margin: 10px; }
.kafelek :hover {
	-webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}
.kafelek img { width: 60px; height: 60px; }

p.video, .panelprawy p { font-size: 20px; vertical-align: center; }
p.video { background-color: #fcfff4; padding: 10px; }
.kafelek2 { background-color: #ffffff; padding: 10px; margin-top: 5px; padding-left: 20px; }