@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css); @import url(https://fonts.googleapis.com/css?family=Tangerine); .asset_img_tb{ width:100%; border:1px solid #999999; margin-bottom:10px; } .asset_img_tr{ width:100%; background-color:#e6e6e6; } .asset_img_01{ width:98%; height:212px; border-radius:5px; box-shadow: 2px 2px #888888; margin-top:10px; transition: .5s ease; } .container { position: relative; } .middle { transition: .9s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%) } .asset_img_01:hover { opacity: 0.5; } .container:hover .middle { opacity: 1; } .text { background-color: #888888; color: white; font-size: 16px; padding: 10px 16px; border-radius:5px; } .image_open_line{ text-decoration: none; } .image_open_line:visited{ text-decoration: none; } .image_open_line:hover{ text-decoration: none; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; max-width: 1400px; } .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } .close { margin-right: 250px; margin-left: 250px; font-size: 80px; font-weight: bold; transition: 0.3s; } .close:hover,.close:focus { color: #ffffff; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } .asset_img_td{ font-size:16px; } .control_buttons{ margin-top:20px; margin-left:25px; margin-right:25px; } .submit_bnt{ border:none; width:70px; font-size:16px; background-color:#267371; color:#ffffff; border-radius:5px; margin-left:10px; margin-right:10px; } .submit_bnt:hover{ background-color:#194d4b; } .cancel_a{ text-decoration: none; margin-left:10px; margin-right:10px; } .cancel_a:visited{ text-decoration: none; } .cancel_a:hover{ text-decoration: none; color:#800000; } .add_img_a{ text-decoration: none; background-color:#267371; color:#ffffff; padding:4px; margin-left:10px; margin-right:10px; border-radius:5px; } .add_img_a:visited{ text-decoration: none; } .add_img_a:hover{ text-decoration: none; color:#ffffff; background-color:#194d4b; } #preview{ width: 100%; height: 300px; display:none; overflow: hidden; } #attachment_remove_icon{ color:#cc0000; font-size:20px; margin-right:2px; margin-left:2px; border-radius:30px; box-shadow: 1px 3px 3px #808080; } #attachment_remove_icon:hover{ color:#990000; box-shadow: 1px 3px 3px #595959; } .add_img_form_tb_1{ width:100%; } .add_img_form_tr_1{ width:100%; } .add_img_form_td_1{ width:30%; } .add_img_form_td_2{ width:70%; background-color:#ffffff; border:1px solid #cccccc; } .img_field_value{ width:100%; border:none; height:40px; font-size:16px; } #image_file{ width:100%; border:none; height:40px; font-size:16px; }