body{font-family:Arial,Helvetica,sans-serif;background-color: #003366;direction:rtl;}

/*Design*/

#middle {min-height:100px;display:block;overflow:auto;}

/* Top, Content and Menu - are all inside "middle" div */
#container {width:100%;}

#top {min-height:40px;text-align:center;font-size:14px;color:white;overflow:auto;}
#top a {text-decoration:none;color:White;}
#top #img_ydf {float:left;margin:10px;}
#top #img_pumice {float:right;margin:10px;}



div.menu {float:left;color:white;width:200px;overflow:auto;}
.menu h4 {font-size:17px;color:white;text-decoration:underline;margin:3px;}
.menu a {text-decoration:none;color:white;font-size:17px;}
.menu a:hover {text-decoration:underline;}
.menu ul {margin-top:3px;padding-right:3px;}
.menu #Side_Pictures img {margin:3px;}/*Side menu ad picture*/
#menu_button {display:none;text-align:center;background-color:white;color:blue;width:80%;text-decoration:underline;border-radius:15px;padding:10px;margin:10px auto 10px auto;}
#Mobile_Phone_Numbers {color:blue;background-color:white;padding:3px;margin:15px auto 15px auto;display:none;}
#Mobile_Phone_Numbers a {color:blue;text-decoration:underline;}

#content {margin-left:220px;padding:20px;background-color:white;color:black;border:1px black solid;}


/* Bottom print and back to top links */
div.Bottom_Print {margin:auto auto 5px 20px;text-align:left;color:white;}
div.Bottom_Print a {color:white;}





.footer {padding:6px;font-size:16px;color:white;border-top:1px white solid;}
.footer a {text-decoration:underline;color:white;}
.footer a:hover {font-weight:bold;text-decoration:none;font-size:17px;}
.bottom_links a {color:#003366;font-size:6px;text-decoration:none;}






/* Design for mobile and small screens */
@media only screen and (max-width:600px)
{
    #top, #content {margin:auto;}

    #top #img_ydf, #top #img_pumice {float:unset;display:block;margin:10px auto 10px auto;}

    div.menu {display:none;float:unset;width:100%;}
    #menu_button {display:block;}
    #Mobile_Phone_Numbers {display:block;}
    div.Bottom_Footer {margin:auto;}
    .Bottom_Footer #ydf_whatsapp {display:block;margin:auto;}

    div.Bottom_Footer {margin-left:unset;margin:auto;}
    .Bottom_Footer div.Ebuild {margin-left:unset;margin:auto;}
    .Bottom_Footer div.Blocks_Gallery {float:unset;width:unset;}
}







/* Global Elements style */

h1,h2,h3,h4 {text-decoration:underline;font-weight:bold;text-align:center;}


img { border:0px; }

/* Images float and divs */
.Img_Float_Left{float:left;margin:20px;}
.Img_Float_Right{float:right;margin:20px;}
img.Img_Center{display:block;margin-right:auto;margin-left:auto;}
div.Img_Center{text-align:center;margin:10px;}
div.Img_Center img{margin:10px auto 10px auto;}

@media only screen and (max-width: 500px)
{
    .Img_Float_Right, .Img_Float_Left {float:unset;max-width:100%;height:auto;display:block;margin-right:auto;margin-left:auto;}
    div.Img_Float_Left {text-align:center;}
    div.Img_Float_Right {text-align:center;}
    .Img_Center img, img.Img_Center, img.Img_Float_Left, img.Img_Float_Right {float:unset;max-width:100%;height:auto;display:block;margin-right:auto;margin-left:auto;}
}

/* Images sizes */
.Max_Image_Size_120 { width:120px;height:auto; }
.Max_Image_Size_140 { width:140px;height:auto; }
.Max_Image_Size_150 { width:150px;height:auto; }
.Max_Image_Size_180 { width:180px;height:auto; }
.Max_Image_Size_200 { width:200px;height:auto; }
.Max_Image_Size_240 { width:240px;height:auto; }

.Max_Image_Height_160 { height:160px;width:auto; } 
.Max_Image_Height_180 { height:180px;width:auto; } 
.Max_Image_Height_200 { height:200px;width:auto; } 
.Max_Image_Height_240 { height:240px;width:auto; } 
.Max_Image_Height_280 { height:280px;width:auto; } 
.Max_Image_Height_300 { height:300px;width:auto; } 
.Max_Image_Height_360 { height:360px;width:auto; } 
.Max_Image_Height_500 { height:500px;width:auto; } 










/****************************
**** Pages content! - updated march 2020 *********
****************************/



/*********************************************
**** index.html - unique for this website ****
*********************************************/
/* Index.html page!!! */
div.Mutagim_Index_List {overflow:auto;}
.Mutagim_Index_List div {float:right;text-align:Center;vertical-align:middle;width:120px;height:60px;padding:4px;margin:12px;border:1px grey solid;}
.Mutagim_Index_List img {max-width:100px;height:auto;max-height:100px;}

div.Shlasha_Index_Menu {overflow:auto;display:flex;flex-wrap:wrap;justify-content:space-around;}
.Shlasha_Index_Menu div {width:30%;min-width:130px;min-height:300px;padding:3px;text-align:center;border:1px grey solid;}
.Shlasha_Index_Menu div:hover {background-color:whitesmoke;}
.Shlasha_Index_Menu img {height:200px;width:auto;max-width:100%;margin:5px;}
.Shlasha_Index_Menu a {text-decoration:none;color:black;}
.Shlasha_Index_Menu h3 {text-decoration:underline;font-weight:bold;}
.Shlasha_Index_Menu p {text-align:right;}

@media only screen and (max-width:750px)
{
    div.Shlasha_Index_Menu div {width:100%;border:unset;}
}







/******************************************************************************************
******************************* Design for pages ******************************************
******************************************************************************************/


/*********************************
******* for red-block.html ******
*********************************/
.red-power-block-container {min-height:320px;overflow:auto;margin:auto;}
.red-power-block-container h4 {text-align:center;text-decoration:underline;overflow:auto;}
.red-power-block-box {width:230px;height:300px;float:right;border: 1px solid black;padding:3px;margin:5px;}
.red-power-block-box img {max-width:160px;height:auto;margin-right:auto;margin-left:auto;display:block;}

div.red_power_block_gallery {
    overflow:auto;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.red_power_block_gallery div {max-width:300px;min-width:180px;width:30%;height:auto;border:1px solid black;margin:10px;padding:10px;}
.red_power_block_gallery img {width:100%;height:auto;cursor:zoom-in;}


/*********************************
******* for mevukaim.html ********
*********************************/
div.Mevukaim_Gallery {max-width:450px;background-color:#49B5B2;text-align:center;overflow:auto;padding:5px;margin:5px auto 5px auto;}
div.Mevukaim_Gallery img {max-height:150px;height:auto;width:auto;}

#BlockBoxMevukaimLine
{
    overflow:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.BlockBoxMevukaim 
{
    padding: 5px;
    border: 1px solid black; 
    width: 150px;
    min-height: 240px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 8px;
    margin-left: 8px;
    color:black;
    overflow:auto;
}
.BlockBoxMevukaim h3
{
    color:red;
    font-size:16px;
    font-weight:bold;   
}
.Blcok_Box_Mevukaim_Title{ height:35px;text-align:center;}
.Block_Box_Mevukaim_Img{ height:130px;}
.Block_Box_Mevukaim_Content { font-size:16px;}



/*************************************************************************************
******* for karmit.html, termokir.html, sika.html, plaster.html, tit.html ************
**************************************************************************************/
/* Karmit.php and termokir.php and sika.php */
div.karmit_box_info, div.termokir_box_info
{
overflow:auto;
margin-bottom:20px;
}
.karmit_box_info div , .termokir_box_info div
{
width:45%;
float:right;
text-align:right;
padding:5px;
border:1px black solid;
margin:5px;
overflow:auto;
}
@media only screen and (max-width: 500px)
{
    .karmit_box_info div, .termokir_box_info div {float:unset;width:unset;margin-right:auto;margin-left:auto;}
}
/* Products tables */
table.karmit_products_table, table.termokir_products_table, table.sika_products_table, table.plaster_products_table
{
    border:1px solid black;
    max-width:800px;
    padding:3px;
    border-collapse:collapse;
}
.karmit_products_table td, .termokir_products_table td, .sika_products_table td, .plaster_products_table td
{
vertical-align:top;
border:1px solid black;
padding:3px;
margin:3px;
}
.karmit_products_table tr:hover , .termokir_products_table tr:hover, .sika_products_table tr:hover, .plaster_products_table tr:hover
{
    background-color:#f5f5f5;
}
.karmit_products_table img, .termokir_products_table img, .sika_products_table img, .plaster_products_table img
{
    max-width:200px;
    width:auto;
    height:auto;
    margin:3px;
    cursor:zoom-in;
}
.karmit_products_table h4, .termokir_products_table h4, .sika_products_table h4, .plaster_products_table h4
{
    color:#EA4335;
}
@media only screen and (max-width:500px)
{
    .karmit_products_table img, .termokir_products_table img, .sika_products_table img, .plaster_products_table img 
    {
        max-width:80px;
    }
}
@media only screen and (max-width:400px)
{
    .karmit_products_table img, .termokir_products_table img, .sika_products_table img, .plaster_products_table img 
    {
        max-width:60px;
    }
}
span.Karmit_White {color:white;}

/* Images gallery - which directs to the items full details in the table */
div.Sika_Gallery, div.Karmit_Gallery, div.Termokir_Gallery, div.Plaster_Gallery
{
    overflow:auto;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Sika_Gallery div, div.Karmit_Gallery div, div.Termokir_Gallery div, div.Plaster_Gallery div
{
    width:145px;
    border:1px solid black;
    padding:3px;
    margin:3px;
}
div.Sika_Gallery div:hover, div.Karmit_Gallery div:hover, div.Termokir_Gallery div:hover, div.Plaster_Gallery div:hover {background-color:#f5f5f5;}
div.Sika_Gallery img, div.Karmit_Gallery img, div.Termokir_Gallery img, div.Plaster_Gallery img {max-height:100px;max-width:100%;width:auto;height:auto;display:block;margin:auto;}
div.Sika_Gallery a, div.Karmit_Gallery a, div.Termokir_Gallery a, div.Plaster_Gallery a {text-decoration:none;color:black;}
div.Sika_Gallery h4, div.Karmit_Gallery h4, div.Termokir_Gallery h4, div.Plaster_Gallery h4 {text-align:center;font-size:16px;height:40px;margin:2px auto 3px auto;}
table.sika_products_table span.Telephone_products_table, table.karmit_products_table span.Telephone_products_table, table.termokir_products_table span.Telephone_products_table, table.plaster_products_table span.Telephone_products_table {background-color:#CC0000;color:white;float:left;margin:5px;padding:3px;}
/* tit.html - Search box for the gallery ******************
*********This page is based on the above pages! ***********/
#Tit_Gallery_Search {border:1px grey solid;display:block;width:230px;padding:3px;margin:5px auto 5px 10px;}
#Tit_Gallery_Search input {width:120px;}
#Tit_Gallery_Search span {display:none;text-align:left;color:blue;cursor:pointer;}



/********************************
******* for sn8.html ********
*********************************/
/* For the page sn8.html - the table below */
table.sn8_table {direction:ltr;margin-right:auto;margin-left:auto;}
.sn8_table tr,.sn8_table th,.sn8_table td {direction:rtl;text-align: center;padding:6px;border:1px black solid;}
.sn8_table th {background-color:#6CABC9;}
th.sn8_table_row_th {background-color:#AAE4FF;}
@media only screen and (max-width:550px) 
{
    .sn8_table tr,.sn8_table th,.sn8_table td {padding:1px;font-size:16px;}
}
@media only screen and (max-width:440px) 
{
    .sn8_table tr,.sn8_table th,.sn8_table td {padding:0px;font-size:14px;}
}


/********************************
******* for ytong.html ********
*********************************/
div.Ytong_Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Ytong_Product_Boxes_Box {padding:4px;margin:10px;border:1px solid grey;width:210px;min-height:300px;}
div.Ytong_Product_Boxes h4 {text-align:center;text-decoration:underline;}
div.Ytong_Product_Boxes_Image {width:100%;height:150px;text-align:center;}
div.Ytong_Product_Boxes_Image img {width:auto;max-width:100%;max-height:100%;}
/* Ytong midot boxes */
div.Ytong_Midot_Boxes 
{
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Ytong_Midot_Boxes div {border:1px black solid; min-width:160px;height:auto;padding:15px;margin:10px;}




/********************************
******* for caveret.html ********
*********************************/
/* Gallery products at bottom of the page. */
div.Caveret_Gallery {overflow:auto;display:flex;flex-wrap:wrap;justify-content:center;}
div.Caveret_Gallery div.Caveret_Gallery_Box{width:250px;border:1px solid black;padding:3px;margin:4px;}
div.Caveret_Gallery div.Cavert_Gallery_Pic_Div{min-height:150px;}
div.Caveret_Gallery h4 {text-align:center;}
div.Caveret_Gallery img {max-width:120px;height:auto;border-radius:10px;display:block;margin:auto;}


/********************************
******* for mamad.html ********
********************************/
div.mamad_info_box 
{
overflow:auto;
margin-bottom:20px;
}
.mamad_info_box div 
{
width:45%;
float:right;
text-align:right;
padding:5px;
border:1px grey solid;
margin:5px;
overflow:auto;
}
@media only screen and (max-width: 600px)
{
    .mamad_info_box div{float:unset;width:unset;margin-right:auto;margin-left:auto;}
}

table.mamad_products_table
{
    border:1px solid black;
    margin:3px;
    padding:3px;
    border-collapse:collapse;/*Mehaber gvulot kfulim shel table+td*/
}
.mamad_products_table td
{
vertical-align:top;
border:1px solid black;
padding:3px;
margin:3px;
}
.mamad_products_table tr:hover 
{
    background-color:#f5f5f5;
}
.mamad_products_table img
{
    max-width:100%;
    width:160px;
    height:auto;
    margin:3px;
    cursor:zoom-in;
}

div.Oref_Box {border:1px solid grey;max-width:450px;vertical-align:middle;overflow:auto;padding:5px;margin:3px auto 3px auto;}
div.Oref_Box img{float:left;}



/********************************
******* for mosdi.html ********
********************************/
/* Table with the models of all mosdi pumps */
table.Mosdi_Pump_Table
{
    border:1px solid black;
    margin-right:auto;
    margin-left:auto;
    padding:3px;
    border-collapse:collapse;/*Mehaber gvulot kfulim shel table+td*/
}
.Mosdi_Pump_Table td, .Mosdi_Pump_Table th
{
vertical-align:top;
border:1px solid black;
padding:3px;
margin:3px;
}
.Mosdi_Pump_Table tr:hover 
{
    background-color:#f5f5f5;
}
.Mosdi_Pump_Table img
{
    margin:3px;
    cursor:zoom-in;
}



/********************************
******* for pumis.html ********
********************************/
/* Style for item boxes */
div.Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Product_Boxes_Box {padding:4px;margin:10px;border:1px solid grey;width:210px;min-height:300px;}
div.Product_Boxes h4 {text-align:center;text-decoration:underline;}
div.Product_Boxes_Image {width:100%;height:150px;text-align:center;}
div.Product_Boxes_Image img {width:auto;max-width:100%;max-height:100%;}


/* THIS IS UNIQUE FOR THIS WEBSITE - IN PUMIS.HTML */
div.Product_Boxes_Box a {
    display:block;
    background-color:#0099cc;
    color:white;
    font-weight:bold;
    text-decoration:underline;
    margin:10px auto 3px auto;
    padding:3px;
    text-align:center;
    border-radius:10px;
}



/**************************************************
******* for gallery at bottom of the pages ********
***************************************************/
/* Gallery javascript!!! Important based on pumice mamad! */
#gallery_modal_box{
    display:none;
    position:fixed;
    overflow:auto;
    left:0;
    top:0;
    width:100%;
    height:100%;
    max-height:100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    z-index:2;
}
#gallery_modal_box_white {
    background-color:#F3F3F3;
    text-align:center;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    border: 1px solid #888;
    width:80%;
    display:block;
    overflow:auto;
}

#gallery_modal_box_img {max-width:90%;max-height:90%;height:auto;margin:auto;}
#gallery_modal_box_close_button{color:#aaaaaa;float:left;font-size:48px;font-weight:bold;padding-left:20px;}
#gallery_modal_box_close_button:hover, #site_menu_close_button:focus{color:#000;text-decoration:none;cursor:pointer;}
img.Enlarge_Image {cursor:zoom-in;}




/**************************
******* for ydf.html ******
***************************/
/* For the english part */
div.Ydf_English {direction:ltr;text-align:left;}



/**************************
******* for sale box ******
******* in many pages *****
***************************/
div.Sale_Box {max-width:900px;border:1px solid black;box-shadow:5px 10px 18px #888888;overflow:auto;padding:10px;margin:10px auto 30px auto;}
div.Sale_Box img {float:left;margin:10px;}
p.Sale_Box_Red {color:red;}
p.Sale_Box_Black {color:black;}
@media only screen and (max-width:500px)
{
    div.Sale_Box img {margin:3px;}
}
@media only screen and (max-width:400px)
{
    div.Sale_Box img {float:unset;margin:auto;}
}



/********************************
******* for smuya.html ********
********************************/
/* Table with the models of all smuya pumps */
#Smuya_Pump_Table_Div {padding:5px;}
table.Smuya_Pump_Table
{
    border:1px solid black;
    margin-right:auto;
    margin-left:auto;
    padding:3px;
    border-collapse:collapse;/*Mehaber gvulot kfulim shel table+td*/
}
.Smuya_Pump_Table td, .Smuya_Pump_Table th
{
vertical-align:top;
border:1px solid black;
padding:3px;
margin:3px;
}
.Smuya_Pump_Table tr:hover 
{
    background-color:#f5f5f5;
}
.Smuya_Pump_Table img
{
    width:120px;
    height:auto;
    margin:3px;
    cursor:zoom-in;
}



/********************************
******* for geves.html ********
********************************/
/* Style for item boxes */
div.Geves_Product_Boxes {
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Geves_Product_Boxes div.Geves_Boxes_Box {
    padding:4px;
    margin:10px;
    border:1px solid grey;
    width:300px;
    min-height:300px;
}
@media only screen and (max-width:630px)
{
    div.Geves_Product_Boxes div.Geves_Boxes_Box {width:230px;}
}
@media only screen and (max-width:580px)
{
    div.Geves_Product_Boxes div.Geves_Boxes_Box {width:100%;}
}
div.Geves_Product_Boxes h3 {
    background-color:unset;
}
div.Geves_Product_Boxes p, div.Geves_Product_Boxes ul, div.Geves_Product_Boxes li {
    font-size:16px;
}
div.Geves_Boxes_Box div /*Phone number buttons in every div*/
{
    background-color:#006B95;
    color:white;
    text-align:center;
    border-radius:10px;
    font-size:18px;
    font-weight:bold;
    padding:3px;
    text-decoration:none;
}



/********************************
******* for calcar.html *********
*********************************/
div.Calcar_Boxes 
{
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.Calcar_Boxes div {border:1px black solid; min-width:160px;height:auto;padding:15px;margin:10px;}
div.Calcar_Boxes div#Calcar_Argaz ul {float:right;font-weight:bold;}