/* Customized ckEditor Classes >>> ( NOTE: This is where al ckEditor styles are stored along with in _admin/ckfinder-new/ckeditor/contents.css in _admin folder ) START */ /* IMPORTED ON css/table-responsiveness.css */ /* Customized Panels Classes END */ /* HELPTIPS example: ❮?This is the CSS tooltip showing up when you mouse over the link */ a.helptip { border-bottom: 1px dashed; text-decoration: none; color: grey; font-weight: 700; border: thin silver solid; padding: 1px 5px; background: #eee; border-radius: 3px; font-size: 90%; margin: 0 5px 0 0; } a.helptip:hover { cursor: help; position: relative; border-bottom: 1px solid; color: black; } a.helptip span { display: none; } a.helptip:hover span { font-size: 110%; border: grey 2px solid; padding: 5px 20px 5px 5px; display: block; z-index: 100; background: rgba(0,0,0,0.7); left: 0px; margin: 15px 10px; width: 250px; position: absolute; top: 10px; text-decoration: none; color: white; border-radius: 3px; font-weight: 700; } /* HELPTIPS end */ /* Buttons start */ .button a:link { border-radius: .30rem; background-color: #6caee0; color: white; } .button a:active { background-color: #6caee0; color: white; } .button a:visited { background-color: #6caee0; color: white; } .button a:hover { border-radius: .30rem; background-color: #3F69A0; color: white; } /* Buttons end */ /* links */ .WHITELINK { color:white !important; } .WHITELINK a:link { color:white !important; padding-bottom: 4px; border-bottom: silver dotted thin; } .WHITELINK a:visited { color:white !important; } .WHITELINK a:hover { color:white !important; padding-bottom: 4px; border-bottom: white dotted thin !important; } .WHITELINK a:active { color:white !important; } /* links end */ /* ckEditor style START */ /* ckEditor style for images with captions START */ .responsive_two_col_left-div figure { text-align: center; border: solid 1px #ededed; border-radius: 2px; background: rgba(0,0,0,0.01); padding: 10px; margin: 10px 0; max-width: 570px; } figure { text-align: center; border: solid 1px #ededed; border-radius: 3px; background: rgba(0,0,0,0.01); padding: 10px 10px 0 10px; margin: 10px 0; max-width: 960px; clear: both; } figure > figcaption { text-align: center; display: block; clear: both; color: #666; font-size: 10pt; line-height: 14pt; margin: 5px 0 10px 0; padding: 0; /* For IE8 */ } figure img { border-radius: 3px; height: auto; width: auto\9; /* IE8 */ } /* basic responsive img */ figure.left-image { width: none; background-color: #fafafa; float: left; display: inline-table; position: relative; margin: 0 15px 10px 0; box-shadow: none; word-wrap: break-word; } figure.left-image:hover { cursor: zoom-in; } figure.left-image img { padding: 0; border: none; margin-bottom: 10px; } figure p img.left { float: left; padding: 0; box-shadow: none; } figure.left-image p { text-align: center; word-wrap: break-word; } figure.left-image > figcaption { text-align: left; } figure.right-image { width: none; background-color: #fafafa; float: right; display: inline-table; position: relative; margin: 5px 0 10px 15px; box-shadow: none; word-wrap: break-word; } figure.right-image img { padding: 0; border: none; margin-bottom: 10px; } figure p img.right { float: right; padding: 0; box-shadow: none; } figure.right-image p { text-align: center; word-wrap: break-word; } figure.image img { max-width: 100%; } hr.line_cleared { clear: left; } img.left-image, .left-image img { float: left; margin: 0 10px 5px 0; padding: 5px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.10); max-width: -webkit-calc(100% - 10px); max-width: -moz-calc(100% - 10px); max-width: calc(100% - 10px); } img.right-image, .right-image img { float: right; margin: 0 0 5px 10px; padding: 5px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.10); max-width: -webkit-calc(100% - 10px); max-width: -moz-calc(100% - 10px); max-width: calc(100% - 10px); } img.center-image, .center-image img { margin: 0 auto; display: block; text-align: center; } img.responsive { width: 100%; height: auto; width: auto\9; /* IE8 */ } p.left { float: left; width: 140px; margin: 4px 10px 0 0; } p img.left { float: left; padding: 5px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.10); max-width: -webkit-calc(100% - 10px); max-width: -moz-calc(100% - 10px); max-width: calc(100% - 10px); } p.right { float: right; width: 140px; margin: 4px 0 0 10px; } p img.right { float: right; padding: 5px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.10); max-width: -webkit-calc(100% - 10px); max-width: -moz-calc(100% - 10px); max-width: calc(100% - 10px); } img.center { float: none; margin: 4px auto; } p.left-image { margin: 0 10px 5px 0; padding: 0; float: left; background-color: transparent; display: block; top: 0; } p.left-image img { margin: -5px 10px 0 0; float: none; } p.right-image { margin: 0 0 5px 10px; padding: 0; float: right; background-color: transparent; display: block; top: 0; } p.right-image img { margin: -5px 0 0 15px; float: none; } p.center-image { clear: both; float: none; } p.center-image img { margin: 10px auto; } .center-image { width: 100%; height: auto; width: auto\9; margin: auto; /* IE8 */ } .center-image img { border-radius: 3px; width: auto; height: auto; width: auto\9; /* IE8 */ } /* ckEditor style for images with captions END */ /* BLUE BORDER PANEL start */ .panel_blue_border { border: 2px solid #00b3e3; padding: 1em 1em 0 1em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } @media screen and (max-width: 768px) { .panel_blue_border { border: 1px solid #00b3e3; padding: 5px 5px 0 5px; width: 90%; margin-left: 10px; margin-right: 10px; } } /* BLUE BORDER PANEL end */ /* FORCE ON SINGLE LINE WHEN RESPONSIVE start */ span.force_single_line_responsive_same_size { } span.force_single_line_responsive { } @media screen and (max-width: 1020px) { span.force_single_line_responsive_same_size { display: block; width: 100%; } span.force_single_line_responsive { display: block; width: 100%; font-size: 120%; } .center-image { width: auto; height: auto; width: auto\9; margin: auto; /* IE8 */ } } @media screen and (max-width: 414px) { span.force_single_line_responsive_same_size { font-size: 90%; } } @media screen and (max-width: 320px) { span.force_single_line_responsive_same_size { font-size: 80%; } } /* FORCE ON SINGLE LINE WHEN RESPONSIVE end */ /* CUSTOM LEGEND and FIELDSETS start */ fieldset.homepage_lightblue { border: 2px solid #00b3e3; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; } fieldset.homepage_lightblue p { margin-left: 40px !important; color: black; } fieldset.homepage_lightblue legend { padding: 0.2em 2em; margin-left: 20px; border: 1px solid #00b3e3; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #00b3e3; color: white; font-weight: 700; font-size: 120%; text-align: left; } @media screen and (max-width: 1020px) { fieldset.homepage_lightblue { padding: 10px; width: 95%; } fieldset.homepage_lightblue legend { margin: auto; } fieldset.homepage_lightblue p { margin: 5px 0 !important; font-size: 10pt !important; color: black !important; } } @media screen and (max-width: 414px) { h1, h2, h3 { text-align: left; } img.left-image, .left-image img { margin: 0 auto; float: none; } img.right-image, .right-image img { margin: 0 auto; float: none; } fieldset.homepage_lightblue { border: 2px solid #00b3e3; padding: 10px; width: 300px; margin: auto; } fieldset.homepage_lightblue legend { } fieldset.homepage_lightblue p { } } @media screen and (max-width: 320px) { img.left-image { float: none !important; } .left-image img { float: none !important; } fieldset.homepage_lightblue { width: 260px; } fieldset.homepage_lightblue p { margin: 5px 0 !important; font-size: 9tp !important; } } /* CUSTOM LEGEND and FIELDSETS end */ @media screen and (max-width: 970px) { .panel_right { float: none; display: block; margin: 10px auto; width: auto; } .center-image img { width: 100%; height: auto; width: auto\9; /* IE8 */ } p.center-image img { margin: 10px auto; min-width: 100% !important; width: 100% !important; max-width: 100% !important; } /* ckEditor style for images with captions START */ figure { text-align: center; border: solid 1px #ededed; border-radius: 2px; background: rgba(0,0,0,0.05); padding: 10px; margin: 10px auto; width: auto; display: inline-block; } figure > figcaption { text-align: center; display: block; color: black; font-size: 80%; /* For IE8 */ } figure img { width: 100%; height: auto; width: auto\9; /* IE8 */ } /* basic responsive img */ /* ckEditor style for images with captions END */ } /* ckEditor style START */ /* Responsive - 2 column ckeditor START */ section.resp_two_columns { padding: 10px 0 5px 0; margin: 0; background: transparent; } .resp_two_columns_container { display: inline-block; width: 100%; margin: 0; } .resp_two_columns_container ul { padding: 1px 5px 10px 10px; border: none; width: 80%; margin: 10px auto 10px auto; background: none; vertical-align: middle; display: block; } .resp_two_columns_container li { list-style-type: none; padding: 5px 5px 5px 0; margin: 5px 0; text-indent: -1em; padding-left: 30px; line-height: 120%; min-height: 20px; } section.resp_three_columns { padding: 10px 0 5px 0; margin: 0; background: transparent; } .resp_three_columns_container { display: inline-block; width: 100%; margin: 0; } .resp_three_columns_container ul { padding: 1px 5px 10px 10px; border: none; width: 80%; margin: 10px auto 10px auto; background: none; vertical-align: middle; display: block; } .resp_three_columns_container li { list-style-type: none; padding: 5px 5px 5px 0; margin: 5px 0; text-indent: -1em; padding-left: 30px; line-height: 120%; min-height: 20px; } .ck_editor_col-xs-12, .ck_editor_col-sm-6, .ck_editor_col-sm-4 { position: relative; min-height: 1px; padding-left: 0; padding-right: 0; } .ck_editor_col-sm-6 { float: left; background: transparent; margin: 0; } .ck_editor_col-sm-4 { float: left; background: transparent; margin: 0; } .ck_editor_col-xs-12 { width: 100%; margin: 0; } @media (min-width: 768px) { section.resp_two_columns { padding: 5px 0 5px 0; margin: 0; background: transparent; } .ck_editor_col-sm-6 { float: left; background: transparent; width: 50%; margin: 0; } .ck_editor_col-sm-4 { float: left; background: transparent; width: 29.85555%; margin: 0; } } @media (max-width: 440px) { .resp_two_columns_container ul { padding: 1px 5px 10px 10px; border: none; width: 90%; margin: 5px auto; background: transparent; vertical-align: middle; display: block; } .resp_two_columns_container li { list-style-type: none; padding: 0 5px 0 0; margin: 5px 0 10px 0; padding-left: 10px; font-size: 90%; font-weight: 200; line-height: 140%; min-height: 23px; } .resp_three_columns_container ul { padding: 1px 5px 10px 10px; border: none; width: 90%; margin: 5px auto; background: transparent; vertical-align: middle; display: block; } .resp_three_columns_container li { list-style-type: none; padding: 0 5px 0 0; margin: 5px 0 10px 0; padding-left: 10px; font-size: 90%; font-weight: 200; line-height: 140%; min-height: 23px; } } /* Responsive - 2 column ckeditor END */ hr.clear {clear:both; border:none; background-color:silver; color:silver; height:1px; margin-top:5px; margin-bottom:5px;} .contentAdminPageTable { border: 2px solid gray; padding: 10px; background-color: white; } /* Table style START */ table.resp_tbl { width: -webkit-fill-available; } .datatable { margin: 10px auto 10px auto; width: 100%; border: 1px solid #777; border-collapse: collapse; background-color: whitesmoke; } .datatable caption { font: bold 110% Arial, Helvetica, sans-serif; color: #58585a; padding: 0.4em 0 0.8em 0; } .datatable th { border: 1px solid #777; background-color: #777; color: white; font-weight: bold; padding: 3px 0.3em; } .datatable td { border: 1px solid #777; padding: 3px 0.3em;vertical-align: top; } .datatable tr:nth-child(odd) { background-color: #fafafa; color: #000000; } /* Table style END */ /* THIS IS USED BY ADMIN CODE VIEWS */ #footeradminview { clear:both; padding:10px 0 0 10px; color:white; line-height:1em;} .footeradminview p { margin:5px auto 0 auto; width:100%; text-align:center;} .footeradminview a:link { color:white; text-decoration:none; } .footeradminview a:visited { color:white; } .footeradminview a:hover { color:#dde9ff; text-decoration:none; } .footeradminview a:active { color:white; } /* jQuery styles */ /* code view styles */ .elementWrapper { margin:10px 0 10px 0; } .elementWrapper img {clear:both; margin:10px auto 0 auto; display:block;} .elementWrapper img.dots {clear:none; margin: 0 5px; display:inline-block;} .readMoreButtonGreen { clear:both; width:100%; height:40px; border-top: thin silver dotted; padding: 5px 0 5px 5px; margin-bottom:5px; display: block; } .readMoreButtonGreen img { float:right; margin:5px 0 0 0; } .accordionWrapper { margin:20px 0 20px 0; } .stringBold { font-weight: bold; } /* code view styles END */ /* tooltip styles */ #resizable { width: 99%; height: 500px; padding: 0.5em 0.5em 0.5em 0.5em; } .placeholder {display:absolute; float:left; margin: 10px 5px; padding: 10px; border: thin silver solid; } .photo { width: 300px;text-align: center; } .photo .ui-widget-header { margin: 5px 0 10px 0; padding: 5px 0 0 0; } .map { width: 350px;height: 350px; } .ui-tooltip { max-width: 150px; } /* tooltip styles END */ /* --- slide show GALLERY styles START --- */ /* not a clue what this does but it seems important. Don't remove! */ .s4-ca { margin-left: 0px !important; margin-right: 0px !important; } #MSOZoneCell_WebPartWPQ3 { position: relative; width: 400px; } #holder { display:inline-block; margin: 5px 10px; position:relative; /* width: 980px; DC commented out! */ /* padding-top: 8px; */ /* removed to stop excess padding around the new EMG-MSG system */ padding-bottom: 0; /* added to add excess padding around the new EMG-MSG system */ height: 228px; /* Master Container Height */ background-color: transparent; border-bottom: transparent 10px solid; } #holder a { border: none; } #gallery { width: 231px; margin-left: auto; margin-right: auto; border: none; } #gallery .slideshow_caption { padding:0; z-index: 21; background: rgba(0000,0000,0000,0.3); color: #ffffff; /* height: 20px; */ width: 100%; position: relative; font-size: .8em; } /* --- Type and img --- */ .type_image_content { padding: 3px 5px; } #gallery img { width: 231px; height: 228px; border: none; } /* link around main image */ #gallery a { position: absolute; } #gallery a.show, /* java class used switch image */ #gallery img.show { z-index: 20; } /* Used to style caption headings*/ #gallery .slideshow_caption .content h3 { display: inline; margin: 0; padding: 0; color: #ffff00; } /* --- slide show GALLERY styles END --- */ /* THIS IS USED BY ADMIN CODE VIEWS end */