/******************************* Modal Styles *******************************/ .ui.modal { display: none; position: absolute; z-index: 1001; top: 50%; left: 50%; margin-left: -400px; width: 800px; -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .ui.page.modal { position: fixed; } /*-------------- Close Button ---------------*/ .ui.modal > .close { cursor: pointer; position: absolute; font-size: 1.25em; color: #FFFFFF; top: -1.75em; right: -1.75em; opacity: 0.8; } .ui.modal > .close:hover { opacity: 1; } /*-------------- Header ---------------*/ .ui.modal > .header { background-color: #442359; padding: 1em 2em; -webkit-border-radius: 0.325em 0.325em 0px 0px; -moz-border-radius: 0.325em 0.325em 0px 0px; border-radius: 0.325em 0.325em 0px 0px; } .ui.modal > .header h2 { margin: 0px; font-size: 1.5em; font-weight: bold; color: #FFFFFF; } .ui.modal > .content { position: relative; overflow: hidden; padding: 2em; background-color: #FAFAFA; -webkit-border-radius: 0px 0px 0.325em 0.325em; -moz-border-radius: 0px 0px 0.325em 0.325em; border-radius: 0px 0px 0.325em 0.325em; } .ui.modal > .content .left { float: left; width: 50%; } .ui.modal > .content .right { float: right; width: 50%; } .ui.modal.fixed { position: fixed; } /* Static In-Page Modal */ .ui.modal.static { display: block; position: relative; overflow: hidden; top: 0px; left: 0px; border: 1px solid #CCCCCC; width: auto; height: auto; margin: 0px auto; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color: #555555; z-index: 2; -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } .ui.modal.static > .header, .ui.modal.static > .content { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }