/* Top div & menu */
#Top_Div
{
color:black;
background-color:white;
font-size:34px;
text-align:center;
}
#Top_Div img {max-width:100%;height:auto;}
#Top_Div h1 {color:black;text-decoration:none;font-weight:bold;font-size:35px;padding:0px;margin:3px auto 3px auto;}
#Top_Div a {color:black;text-decoration:none;}

.Top_Menu
{
    overflow:auto;
    clear:both;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.Top_Menu div
{
    float:right;
    background-color: #2f669c;
    list-style-type: none;
    margin: 2px 5px 2px 5px;
}
@media only screen and (max-width: 380px)
{
    .Top_Menu div {float:unset;width:90%;border-radius:15px;border:1px solid black;}
}
.Top_Menu a
{
    font-size:24px;
    letter-spacing:2px;
    line-height:40px;
    color:white;
    text-decoration:none;
    padding-right:5px;
    padding-left:5px;
}
.Top_Menu a:hover
{
    background-color:white;
    color:red;
}
/* DEISGN FOR THE JS MENU ITSLEF - ON TOP OF HTE PAGES! */
.Menu{
    background-color:#F1F1F1;
    padding-bottom:15px;
    padding-right:100px;
    padding-left:100px;
    overflow:auto;
    display:none;/* The JS makes it dipslay:flex when presented - important for the boxes! */
    flex-wrap: wrap;
    justify-content: right;
}
.Menu h2{color:black;text-decoration:none;font-size:18px;padding-top:2px;padding-bottom:2px;padding-right:5px;}
@media only screen and (max-width: 500px)
{
    .Menu {padding-right:10px;padding-left:10px;}
}






/* Main page structure divs. */
#Body_Main
{
width:100%;

}
#Body_Div
{
width:auto;
margin-left:200px;/* Affected from the Side_Menu_Right width - the tag is in the file ./style/style_menu_side_right.css on that directory! */
padding:20px;
}
@media only screen and (max-width: 500px)
{
    #Body_Div {margin-left:unset;padding:5px;}
}
#Body_Text
{
margin:auto auto 20px auto;/*Center the div*/
width:auto;
background-color:white;
min-height:200px;
}








/* Left Side Menu*/
#Side_Menu_Left
{
width:200px;
float:left;
padding:2px;
}
@media only screen and (max-width: 500px)
{
    #Side_Menu_Left {float:unset;display:none;visibility:hidden;}
}

div.Side_Menu_Left_Box
{
border: 1px solid black;
text-decoration:none;
margin:10px;
padding:3px;
}
.Side_Menu_Left_Box h3
{
text-align:center;
background-color:#2f669c;
color:white;
margin:0px;
}
.Side_Menu_Left_Box A
{
color:black;
text-decoration:none;
}



/* Bottom DIVs - Telephone and Botoom! */
#Bottom_Telephone
{
font-size:20px;
text-align:center;
background-color:#161C23;
margin:auto;/*Center the div*/
text-decoration:none;
color:black;
padding:5px;
}
.Bottom_Telephone a
{
text-decoration:none;
color:white;
}
.Bottom_Telephone h3
{
font-size:25px;
color:white;
padding:5px;
margin:0px;
}

#Bottom_Div
{
font-size:13px;
background-color:#36475a;
padding:5px;
margin-bottom:20px;
color:white;
margin:auto;/*Center the div*/
}
#Bottom_Div p
{
font-size:13px;
}
.Bottom_Div_Links a
{
color:white;
text-decoration:none;
}
.Bottom_Div_Links a:hover
{
font-weight:bold;
}

#Hyper_Links {overflow:auto;margin:auto;}
#Hyper_Links a {font-size:7px;color:white;text-decoration:none;}



/******************************************************************************************
******************************* Global Elemetns style *************************************
*******************************************************************************************/

/* Global Elements style */

body
{
direction:rtl;
background-color:white;
margin:0px;
font-family:Arial,Helvetica,sans-serif;
}

h2 { text-align:right;color:#161C23;font-weight:bold;padding-right:15px;padding-left:15px;border-bottom: 1px #161C23 solid; } 

p { font-size:16px;padding-right:10px;padding-left:10px; }

img { border:0px; }

span.No_Wrap {white-space:nowrap;}

/* 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; } 






/******************************************************************************************
************************* UNIQUE DESIGNS FOR THIS WEB *************************************
******************************************************************************************/




/**************************************
******* for the bottom JS menu ********
***************************************/
/* Main page Coloumns structure divs. - Menu with javascript near bottom of the page!  */
#Col_Div
{
overflow:auto;
padding:10px;
border-top:1px #161C23 solid;
}

#Col_Panel
{
min-height:200px;
padding: 20px 2px 30px 2px;
margin: auto;
overflow:auto;
clear:both;/* No floating from the left or the right of the Col_Panel. */
}


/* Links of the menu - which chooses between box. */
#Col_Box_Links
{
    width:100%;
    min-height:50px;
}
.Col_Box_Links_Button
{
    float:right;
    min-width:100px;
    min-height:30px;
    padding:3px;
    margin:3px;
    color:white;
    text-align:center;
    font-size:18px;
    background-color:#161C23;
    vertical-align: middle;
    cursor:pointer;
}
.Col_Box_Links_Button:hover
{
 color:#161C23;
 background-color:white;   
}
#Col_Box_Links_Text_Title
{
    font-size:13px;
    overflow:auto;    
}


/* Col Box itself - the box with text and image of the menu.  */
.Col_Box
{
float:right;
width:180px;
height:220px;
padding:1px;
margin:5px;
border: 1px solid #ccc;
background-color:white;
display: none;/*HIDE THE BOXES BY DEFAULT - used in javascript. for more details see menu.html file*/
/*Inside text and links style*/
text-decoration:none;
color:black;
}
.Col_Box:hover 
{
border: 1px solid red;
}
@media only screen and (max-width:500px)
{
    .Col_Box {width:120px;height:160px;}
}

/* Elements in the Col Boxes! */
.Col_Box a {text-decoration:none;color:black;}
.Col_Box img { width:100%;height:auto; }
.Col_Box h3 { min-height:50px;text-align:center;text-decoration:none;color:black;margin-top:2px;padding:0px; }





/******************************************************************************************
******************************* 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%;}



/********************************
******* 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;

    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%;}



/**************************************************
******* 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;
}