/*-------------------*/ /* GENERAL RESET */ /*-------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none; } ol, ul { list-style:none; } h1, h2, h3, h4, h5, h6, li { line-height:100%; } blockquote, q { quotes:none; } q:before, q:after { content: ''; } table { border-collapse:collapse; border-spacing:0; } input, textarea, select { vertical-align:middle; padding:0; margin:0; font-family: inherit; font-size: inherit; } input:focus, textarea:focus { outline: none; } form, fieldset { border-style:none; } html, body { margin:0; padding:0; min-height:100%; } /*-------------------*/ /* FONTS */ /*-------------------*/ @font-face { font-family: 'Vazir'; src: url('Vazirmatn-FD-Regular.eot'); src: local('☺'), url('Vazirmatn-FD-Regular.eot?#iefix') format('embedded-opentype'), url('Vazirmatn-FD-Regular.woff2') format('woff2'), url('Vazirmatn-FD-Regular.woff') format('woff'), url('Vazirmatn-FD-Regular.ttf') format('truetype'), url('Vazirmatn-FD-Regular.otf') format('opentype'), url('Vazirmatn-FD-Regular.svg') format('svg'); font-weight: normal; font-style: normal; } /*-------------------*/ /* GENERAL SETTINGS */ /*-------------------*/ html { --usual_font_size: 20px; --img_dimensions: 200px; --img_bg_color: #f3f3f3; } a { text-decoration: none; } a:hover { font-weight: bolder; } body { height:100%; color: #000; font-family: 'Vazir', Tahoma; font-weight: normal; font-size: var(--usual_font_size); background: url('../image/bg.jpg') repeat #fff; padding: 10px; /* */ } table { width: 800px; margin: 0 auto; } #fade-effect { position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,1)); pointer-events: none; display: none; /* hidden by default, shown when more results available */ z-index: 10; } #results-container { position: relative; /* so fade overlay can be absolute inside */ width: 100%; } #search_page_div{ flex-direction: row; flex-wrap: wrap; } #search_page_div, .img_caption_container, .img_container{ display: flex; align-items: center; justify-content: space-around; } #wrapper-top { background:url('../image/content-top.jpg') no-repeat scroll center top #FFFFFF; height:18px; width:994px; } #wrapper { width: 994px; overflow: hidden; align-content: center; align-items: center; text-align: center; margin: 60px auto 0; background:url("../image/content-bg.jpg") repeat-y scroll center center #FFFFFF; } #wrapper-bottom { background:url("../image/content-bottom.jpg") no-repeat scroll center top #FFFFFF; height:61px; width:994px; clear: both; } .container { display: flex; align-items: center; justify-content: center; /* box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4); */ } .container_new { width: 800px; display: flex; align-items: center; flex-direction: column; /* justify-content: center; */ box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4); } .cleaner1px{ clear: both; width: 100%; height: 1px; } .cleaner100px{ clear: both; width: 100%; height: 100px; } .img_caption_container{ width: 200px; /* it can't be percentage */ height: 20px; /* with percentage, text goes down */ overflow: hidden; text-align: center; line-height: 20px; /* necessary for aliging text vertically */ background-color: white; text-overflow: ellipsis; white-space: nowrap; display: inline-block; /* necessary for ellipsis */ } .img_container{ width: 100%; height: 90%; overflow: hidden; } .item_container{ width: 200px; /* var(--img_dimensions); */ height: 200px; /* var(--img_dimensions); */ margin: 10px; background-color: var(--img_bg_color); } .img_properties{ clear: both; margin: auto; background-color: cornsilk; width: 80%; padding: 5px; } .leftbar{ float: left; padding: 10px; width: 70%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .properties_caption{ display: inline-block; background-color: darkturquoise; font-family: Tahoma; font-size: 12px; font-style: oblique; padding: 5px; margin: 5px; width: 25%; } .properties_value{ display: inline-block; background-color: darkturquoise; font-family: Tahoma; font-size: 13px; font-style: normal; padding: 5px; margin: 5px; width: 65%; } .rightbar{ float: right; border-left: solid 1px gray; padding: 10px; line-height: 40px; width: 25%; } .searchOpts{ display: flex; justify-content: space-between; padding: 5px; flex-direction: row; width: 100%; font-size: 75%; } /*-------------------*/ /* SEARCH BUTTON */ /*-------------------*/ /* From Uiverse.io by Cornerstone-04 - Customized by abgeeneh.ir */ .box { width: 100px; height: auto; float: left; transition: .5s linear; position: relative; display: block; overflow: hidden; padding: 5px; text-align: center; margin: 0 5px; background: transparent; text-transform: uppercase; font-family: 'Vazir', Tahoma; font-size: 23px; } .box:before { position: absolute; content: ''; left: 0; bottom: 0; height: 4px; width: 100%; border-bottom: 4px solid transparent; border-left: 4px solid transparent; box-sizing: border-box; transform: translateX(100%); } .box:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 4px; border-top: 4px solid transparent; border-right: 4px solid transparent; box-sizing: border-box; transform: translateX(-100%); } .box:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .box:hover:before { border-color: #262626; height: 100%; transform: translateX(0); transition: .3s transform linear, .3s height linear .3s; } .box:hover:after { border-color: #262626; height: 100%; transform: translateX(0); transition: .3s transform linear, .3s height linear .5s; } button { color: black; text-decoration: none; cursor: pointer; outline: none; border: none; background: transparent; } /* Responsive adjustments for smaller screens */ @media(max-width: 768px){ body { padding: 10px; } } /* Small devices (phones) */ @media (max-width: 600px) { /* Styles for small screens */ } /* Medium devices (tablets) */ @media (min-width: 601px) and (max-width: 1024px) { /* Styles for tablets */ } /* Large devices (desktops) */ @media (min-width: 1025px) { /* Styles for desktops */ }