/*
Theme Name: Seminarski rad-Cvjećarnica 
Author:Tina Martinović
Description:Ovo je seminarski rad koji je nastao u sklopu tečaja Web dizajna u POU Algebra-Split, za vrijeme kraja 2018. i početka 2019. godine.
Version:1.0



*/



/* CSS */
@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans');
	*{margin:0;
	 padding:0;
	 box-sizing:border-box;}
/*  ---  reset -------------------------------------------------------------*/
body{background-color:#E0C9D3;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	color:#333;
		}
	
	a{text-decoration:none;}    /*  ovdje je svim poveznicama maknuta crta ispod slova  */


/*   html   elementi -------------------------------------------------------*/
#menu{background-color:linen;
		color:#333;}
#pageFooter{background-color:linen;}
#pageHeader{background-color:#FF9933;}

#content{background-color:rgb(251, 169, 175);
		/*background-color:linen;*/
		width:75%;
		float:left;
		max-width:98%;
		margin:auto;}

#sidebar{background-color:#CBC7DE;
		width:25%;
		float:right;}

#menu,#pageHeader,#content,#sidebar,#pageFooter{padding:10px;}
/*   ----- layout --------------------------------------------------------------*/
.wrapper{ /*border:2px dashed #f00; */
		max-width:1340px;
		width:98%;
		margin:10px auto 10px auto;
		}

.clearfix:after{content:" ";
				display:block;
				clear:both;}

				
#menu ul{width:80%;
		float:left;
		list-style-type:none;}
#menu li{display:inline;
		margin-right:20px;}

#menu a{color:#A64F6F;
		text-decoration:none;
		font-size:20px;}
#menu a:visited{color:#595379;}
#menu a:hover{color:#E598B8;}
#menu a:focus{background-color:white;}
#menu a:active{color:#FF1493;}

#s{max-width:85%;}
	
/* -----------  navigacija  linkovi ----------------------------------------*/

#searchform {width:20%;
			float:right}

#search-icon{vertical-align:middle;}	/* zadrzava ikonu povecala na istom mjestu*/

#mobileButton{display:none;} /* ---stavljamo da je hamburger botune ne vidljiv-----*/	
/*  ------ -----------------------------kraj glavne navigacije ----------------------------------------------------*/



/*------------------------početak headera-----------------------------------------------------------------------*/


#pageHeader {height:453px;
			background-image:url(foto/hortenzija182.jpg);/* slika mora imati jednake ili veče dimentije od max. širine koja je definirana klasi wrapper  */
			background-repeat:no-repeat;
			background-position:center bottom;			/* ovdje je prije bilo krivo, sada je ispravljeno*/
			background-size:cover;
			color:rgba(243,188,7,0.7);}				/* ovo je boja fonta u zaglavlju, za glavni naslov i tekst ispod njega */

#pageHeader h2{
				font-family: 'Courgette', cursive;
				font-size:44px;
				font-weight:bold;				/* pokušala sam podebljati slova ali nije dalo rezultata jer font ne dopušta*/
				text-align:left;  /*  ovdje postavljam da mi se naslov web design pomakne krajnje ljevo  */
				color:black;           
				}          

					
#pageHeader .wrapper{margin:300px auto 10px auto;}				
				
				
#pageHeader p{
				font-family: 'Courgette', cursive;
				font-size:25px;
				color:black;
				text-align:left;
			
				margin-left:105px;}
/* ----------------------------------kraj headera -----------------------------------------------------------*/


/*------------------------------------početak maina naslovnice------------------------------------------------*/


.post{ border-bottom:3px solid #bbb;
		padding-bottom:25px;
		margin-bottom:15px;}
		
.post img{ width:33%;				/*   za sliku se postavlja 33% prostora ; slika se float-a i postavlja na lijevo */
			float:left;
			padding-top:20px;
			margin-left:10px;}

.post h3,.post h2{ width:64%;				/*   za naslov se postavlja preostali prostor ; on se float-a i postavlja na desno */
			float:right;}

.post p{ width:64%;
			float:right;}			/*   za paragraf se isto postavlja preostali prostor ; on se float-a i postavlja na desno */
			
.post a{ width:64%;
			float:right;			/*   za poveznicu saznajte više ... postavlja se preostali prostor ; float-a i postavlja na desno */
			text-align:right;
			color:  #00a333;
			font-size:14px;
			font-style:italic;}
			
/*------------------------------------------kraj maina naslovnica--------------------------------------------------------*/
			

			
/*-------------------------------------početak maina za proizvodi---------------------------------------------*/

	.isti {width:33.33%;
			float:left;}
	.isti img{display:block;margin:1px auto 0 auto;}		
	/*#novipro*/ h2{text-align:left; 
				font-weight:bold;
				margin-top:15px;}
	.poravnanje p{text-align:center; 
				margin:12px auto 12px auto;}
	.poravnanje a{display:block;text-align:right;color:#8D93B7;margin-right:10px;
				font-weight:bold;font-style:italic;}
	.navrh a{display:block;text-align:right;color:#8D93B7;margin-right:10px;
				font-weight:bold;font-style:italic;}			
	.clear{clear:both;}
	    /*------------------------------------kraj maina za proizvodi--------------------------------------------------*/	
				
	/*------------------------------------------pocetak maina za cjenik-------------------------------------------------*/
		table.table{width:99%;
				 margin:5px;}
	table.table caption{text-align:center;
				font-weight:bold;
				 padding: 23px;
				 border-bottom:2px solid #bbb;}
	 table.table td{text-align:center;
					padding: 8px;}
				
	table.table h3{text-align:center;
					padding:10px 7px 7px 7px;}
   table.table p{border-bottom:2px solid #bbb;
					padding-bottom:15px;}
	
	/*-----------------------------------------kraj maina za cjenik--------------------------------------------*/
	
	/*----------------------------------------početak maina za katalog----------------------------------*/
	
		
	.kat h1{/*background-color:#FBA9AF;*/
			color:#333;
			text-align:center;
			padding:5px auto 5px auto;
			margin:20px 0px 20px 0px;
			}
			
	.katalog p{text-align:center;
			color:#333;	margin:20px 0px 10px 0px;
			/*background-color:#FBA9AF;*/
			}
	.kat h3{/*background-color:#FBA9AF;*/
			color:#333;
			text-align:left;
			padding:5px auto 5px auto;
			margin:20px 0px 10px 0px;
			}
	#katalog img{width:100%;
				margin:10px 0px 10px 0px;}
	/*-------------------------------------------kraj maina za katalog----------------------------------*/
	
	
	/*------------------------------------------početak maina za kontakt--------------------------------------*/

	
  .obrazac{text-align:center;
			background-image:url(foto/hortenzija4.jpg);
			height:1020px;
			background-repeat:no-repeat;
			background-position:center bottom;			/* ovdje je prije bilo krivo, sada je ispravljeno*/			
			background-size:cover;}

	.form form {font-size:20px;
		font-weight:bolder;
		margin:10px 10px 10px 10px;}		
			
	.jao{padding:33px 10px 10px 10px;
		text-align:center;
		color:black;}	
			
	.ciao{color:black;
		padding:1px 10px 7px 10px;}
		
/*--------------------------------------------kraj maina za kontakt------------------------------------------*/	

	
	
	/*    ---------------------------------   početak asidea ----------------------------------------*/

#sidebar ul{list-style-type:none;}
#sidebar h2{margin:37px 0 19px 0;
			color:#8D93B7;}
#sidebar h3{margin:45px 0 5px 0;
			/*background-color:#CBC7DE;*/
			}
#sidebar a{color:#595379;
			font-weight:bold;
			border-bottom:1px solid #999;
			text-align:left;
			display:block;
			margin-bottom:10px;}
#sidebar a:visited{color:#595379;}
#sidebar a:hover{color:#FEEEB3;}
#sidebar a:focus{color:#E598B8;}
#sidebar video{max-width:98%;
				height:auto;
				border:6px solid #fff;
				outline:2px solid #333;}
/*----------------------------------------kraj asidea---------------------------------------------------------*/




/*     -----------------------------------------početak footera---------------------------------------------------------*/

#pageFooter h3{font-size:22px;
				font-family:"Comic Sans MS";
				padding:10px;
				border-bottom:2px solid #999;
				margin-bottom:15px;
				color:#E598B8;}
				
#pageFooter ul{width:25%;
				float:left;
				list-style-type:none;}
				
#pageFooter a{color:#999;}
#pageFooter a:visited{color:#595379;}
#pageFooter a:hover{color:#E598B8;}			
#pageFooter a:focus{background-color:whitesmoke;}

#pageFooter ul:last-of-type{text-align:right;}
#pageFooter ul:last-of-type li{display:inline;text-align:right;}

#pageFooter i.fas{font-size:25px;
				margin-right:10px;}
				
					
#pageFooter i.fab{font-size:25px;
				margin-right:10px;}
				
#pageFooter p{padding:10px;
				text-align:right;
			border-top:2px solid #999;
			margin-top:15px;}

#copyright{text-align:right;
font-style:italic;
color:#E598B8;
border-top:1px solid #999;
padding-top:10px;}

.alignleft{float:left;
			margin:5px 20px 20px 0;}

.alignright{float:right;
			margin:5px 0 20px 20px;}

.aligncenter{display:block;
			margin:5px auto 20px auto;}

promjena za video----
.mejs-controls{background-color:transparent !important;}


/*CSS prilagodba za responzivni dizajn */

/*  CSS  Media Queries  *********************************************/

	/*  za sve uređaje koji su širine do 1023px  ********************/
	@media (max-width:1023px){
		#content,#sidebar{width:100%; float:none;}		/* content i sidebar više ne mogu biti u stupcima već ih stavljamo jedan ispod drugog*/
		#pageFooter ul{width:100%; float:none;}			/* ovo je moglo biti sve u jednoj liniji, grupiranjem selektora */
		.post h3, .post img, .post h2{display:block;}
		#pageHeader{height:360px;}							/* smanjujemo visinu headera*/
		#pageHeader h2{font-size:40px; margin-right:80px;}	/* smanjujemo veličinu slova u headeru i desnu marginu za naslov*/
		#pageHeader p{font-size:20px;}
		#pageHeader .wrapper{margin:235px auto 0 auto;}		/* postavlja se wrapper (naslov i podnaslov) na novu poziciju*/
		#sidebar a, #pageFooter a{padding:10px 0;}			/*ovo stavljamo da nam linkovi budu više razmaknuti (problem-u footeru su liste inline)*/
		#pageFooter a{display:inline-block;}				/*postavimo linkovima da su block elementi ali dozvoljavaju sadržaj pored njih*/
		/*ovo dodajemo da bi prilagodili glavni izbornik*/
		#mobileButton{display:block;}						/* prikaz ikonice izbornika kao block elementa*/
		#menu ul, #searchform{width:100%; float:none; text-align:center; display:none;}	/* glavni izbornik i search idu jedan ispod drugog, u sredini*/
		#menu li{display:block; margin-bottom:10px;}		/* prije su ove liste postavljene kao inline pa se sad stave da su jedna ispod druge*/
		#menu a{display:block; padding:10px 0; border-bottom:1px solid #aaa;}	/*postavlja se razmak i donja crta*/
		
	}


@media (max-width:900px) { .post h3, .post img, .post h2{display:block;}

}

	/* za sve uređaje koji su širine do 767px *************************/
	@media (max-width:767px) {
		 .isti img, .post img, .post h3, .post p, .post a{width:100%; float:none;}	/*slika i tekst ne mogu biti u stupcu pa se stavljaju jedan ispod drugog*/
		.respon img{width:100%; float:none;}
		.post h3, .post img, .post h2{float:none;}
		.nema a{display: none;}
		/*.post h3{font-size:18px; margin:8px 0 8px 3px;}*/		/* postavljanje veličine i odmaka za naslov članka*/
		#pageHeader{height:240px;}							/* smanjujemo visinu headera*/
		#pageHeader h2{font-size:24px; margin-right:30px;}	/* smanjujemo veličinu slova u headeru i desnu marginu za naslov*/
		#pageHeader p{font-size:14px;}
		#pageHeader .wrapper{margin:150px auto 0 auto;}		/* postavlja se wrapper (naslov i podnaslov) na novu poziciju*/
	 	#novipro a, .post a{background-color:linen; display:block; width:37%; margin:10px auto; text-align:center; color:#999; padding:10px 0; border:4px solid #ddd; border-radius:20px;}								/* ovo je prikaz poveznice saznajte više... kao malog botuna*/
	 .href p{background-color:linen; display:block; width:25%; margin:10px auto; text-align:center; color:#999; padding:10px 0; border:4px solid #ddd; border-radius:20px;}
	
	}
	/* za sve uređaje koji su širine do 479px*/
	@media (max-width:479px) {
					.post img{display: none;}
				.isti img{display: none;}
				.nema a{display: none;}
		#pageHeader h2{margin-top:140px; margin-left:5px;}
		#pageHeader p{margin-left:5px;}

}