| /* #Reset & Basics |
| ================================================== */ |
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| font-size: 100%; |
| font: inherit; |
| vertical-align: baseline; |
| } |
| input, select, textarea, button { |
| outline: none; |
| } |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { |
| display: block; |
| } |
| body { |
| line-height: 1; |
| } |
| ol, ul { |
| list-style: none; |
| } |
| blockquote, q { |
| quotes: none; |
| } |
| blockquote:before, blockquote:after, q:before, q:after { |
| content: ''; |
| content: none; |
| } |
| table { |
| /*border-collapse: collapse;*/ |
| border-spacing: 0; |
| } |
| a { |
| text-decoration: none; |
| } |
| img { |
| border: 0; |
| } |
| /* #Clearing |
| ================================================== */ |
| |
| /* Self Clearing Goodness */ |
| .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } |
| |
| /* Use clearfix class on parent to clear nested columns, |
| or wrap each row of columns in a <div class="row"> */ |
| .clearfix:before, |
| .clearfix:after, |
| .row:before, |
| .row:after { |
| content: '\0020'; |
| display: block; |
| overflow: hidden; |
| visibility: hidden; |
| width: 0; |
| height: 0; } |
| .row:after, |
| .clearfix:after { |
| clear: both; } |
| .row, |
| .clearfix { |
| zoom: 1; } |
| |
| /* You can also use a <br class="clear" /> to clear columns */ |
| .clear { |
| clear: both; |
| display: block; |
| overflow: hidden; |
| visibility: hidden; |
| width: 0; |
| height: 0; |
| } |
| /* #TYPO |
| ================================================== */ |
| @font-face { |
| font-family: 'helvetica'; |
| src: url('../fonts/Helvetica.eot'); |
| src: url('../fonts/Helvetica.woff') format('woff'), |
| url('../fonts/Helvetica.ttf') format('truetype'), |
| url('../fonts/Helvetica.svg') format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| /* #common styles |
| ================================================== */ |
| body { |
| font-family: 'helvetica'; |
| } |
| html, body { |
| height: 100%; |
| } |
| .page-wrap { |
| min-height: 100%; |
| /* equal to footer height */ |
| margin-bottom: -70px; |
| } |
| .page-wrap:after { |
| content: ""; |
| display: block; |
| } |
| .site-footer, .page-wrap:after { |
| height: 70px; |
| } |
| .site-footer { |
| background: #000; |
| text-align: center; |
| color: #FFF; |
| line-height: 70px; |
| font-size: 24px; |
| } |
| .container { |
| width: 940px; |
| margin: 0 auto; |
| position: relative; |
| } |
| .top_bar { |
| background-color: #eee; |
| padding: 15px 0; |
| margin-bottom: 20px; |
| } |
| .top_bar figure img { |
| float: left; |
| margin-right: 15px; |
| } |
| .top_bar figure figcaption { |
| font-size: 24px; |
| margin-top: 13px; |
| float: left; |
| } |
| .user { |
| background: url('../images/icons.png') no-repeat -11px 0; |
| position: absolute; |
| right: 0; |
| top: 19px; |
| padding-left: 25px; |
| font-size: 18px; |
| } |
| .user span { |
| color: #666; |
| } |
| .user a { |
| color: #005C3E; |
| } |
| a.logout { |
| background: url('../images/icons.png') no-repeat -7px -26px; |
| padding-left: 20px; |
| border-left: 1px solid #666; |
| margin-left: 4px; |
| color: #666; |
| } |
| a.logout:hover { |
| color: #005C3E; |
| text-decoration: underline; |
| } |
| |
| |
| .selectedCam { |
| background-color: #005C3E !important; |
| border-color: #005C3E !important; |
| color: white !important; |
| |
| } |
| .selectedCam:hover { |
| background-color: #005C3E !important; |
| border-color: #005C3E !important; |
| color: white !important; |
| } |
| |
| h3 { |
| font-size: 24px; |
| color: #005C3E; |
| border-bottom: 1px solid #cecece; |
| padding-bottom: 15px; |
| margin-bottom: 20px; |
| } |
| /* #pages styles |
| ================================================== */ |
| .login-strip { |
| background: #eee; |
| padding: 20px 0; |
| position: absolute; |
| top: 25%; |
| width: 100%; |
| } |
| .loginBox { |
| width: 250px; |
| margin: 0 auto; |
| } |
| .loginBox img { |
| float: left; |
| margin-right: 10px; |
| } |
| .loginBox figcaption { |
| margin-bottom: 20px; |
| } |
| .loginBox figcaption { |
| font-size: 18px; |
| line-height: 23px; |
| } |
| .loginBox label, .loginBox label input { |
| float: left; |
| width: 100%; |
| margin-bottom: 8px; |
| } |
| .loginBox label input { |
| margin-bottom: 0; |
| margin-top: 8px; |
| padding: 5px; |
| font-family: 'helvetica'; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| border: 1px solid #d0d0d0; |
| border-radius: 4px; |
| } |
| .loginBox input[type=submit] { |
| float: right; |
| background-color: #005C3E; |
| padding: 7px 20px; |
| border: 0; |
| color: #FFF; |
| border-radius: 3px; |
| font: 18px 'helvetica'; |
| margin-top: 12px; |
| } |
| .left_side, .right_side { |
| float: left; |
| width: 50%; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| padding-right: 20px; |
| } |
| .right_side { |
| padding-right: 0; |
| padding-left: 20px; |
| border-left: 1px solid #cecece; |
| } |
| .left_side img { |
| width: 100%; |
| height: 100%; |
| } |
| .status { |
| float: right; |
| } |
| .left_side video { |
| width: 100%; |
| background: #000; |
| } |
| .right_side li { |
| border-bottom: 1px dashed #DDD; |
| color: #005C3E; |
| padding: 10px 0; |
| font-size: 18px; |
| overflow: hidden; |
| } |
| /*change wn float*/ |
| .right_side li div {/*float: left;*/} |
| .right_side li i {float: left; margin-right: 10px;} |
| .lamp { |
| background: url('../images/icons.png') no-repeat -13px -68px; |
| width: 13px; |
| height: 24px; |
| } |
| .socket { |
| background: url('../images/icons.png') no-repeat -11px -126px; |
| width: 15px; |
| height: 15px; |
| } |
| .siren { |
| background: url('../images/icons.png') no-repeat -12px -174px; |
| width: 16px; |
| height: 16px; |
| } |
| .smokeDetector { |
| background: url('../images/icons.png') no-repeat -11px -217px; |
| width: 17px; |
| height: 18px; |
| } |
| .valve { |
| background: url('../images/icons.png') no-repeat -13px -264px; |
| width: 12px; |
| height: 17px; |
| } |
| .flood { |
| background: url('../images/icons.png') no-repeat -11px -308px; |
| width: 17px; |
| height: 19px; |
| } |
| .zigbee { |
| background: url('../images/zigbee.jpg'); |
| width: 17px; |
| height: 19px; |
| } |
| .circle { |
| width: 20px; |
| height: 20px; |
| float: right; |
| border-radius: 25px; |
| background: #df3b3a; |
| } |
| .circle.green , .circle.true { |
| background: #64BD63; |
| } |
| .circle.red , .circle.false{ |
| background: #df3b3a; |
| } |
| .opened, .closed { |
| background: url('../images/icons.png') no-repeat -9px -359px; |
| width: 21px; |
| height: 20px; |
| float: right; |
| } |
| .closed { |
| background-position: -10px -415px; |
| } |
| @media only screen and (max-width: 767px) { |
| |
| /* Smartphones (portrait and landscape) ----------- */ |
| .container { |
| width: 90%; |
| } |
| .left_side, .right_side {width: 100%; min-height: auto; padding: 0; border: 0} |
| .right_side {margin-top: 20px; min-height: auto !important; padding-bottom: 20px;} |
| .right_side li div { |
| width: 70%; |
| } |
| .user { |
| position: static; |
| float: left; |
| width: 90%; |
| margin-top: 20px; |
| font-size: 16px; |
| } |
| .top_bar figure figcaption { |
| float: none; |
| } |
| } |
| |
| @media only screen |
| |
| and (min-device-width : 768px) |
| |
| and (max-device-width : 1023px) |
| |
| and (orientation : portrait) { |
| |
| /* iPads (portrait) ----------- */ |
| .container { |
| width: 717px; |
| } |
| } |
| |
| .adjustSwitch { |
| position: relative; |
| |
| } |
| |
| .tdSmall { |
| width: 40px; |
| } |
| |
| |
| .spinner { |
| |
| z-index: 1; |
| margin: 0 0 0 0; |
| border: 4px solid #f3f3f3; |
| border-radius: 50%; |
| border-top: 4px solid #005C3E; |
| /* border-left: 4px solid #005C3E; |
| border-bottom: 4px solid #005C3E; */ |
| width: 25px; |
| height: 25px; |
| -webkit-animation: spin 2s linear infinite; |
| animation: spin 2s linear infinite; |
| } |
| |
| @-webkit-keyframes spin { |
| 0% { -webkit-transform: rotate(0deg); } |
| 100% { -webkit-transform: rotate(360deg); } |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .backgroundRed { |
| background:#F00; |
| } |
| |
| .backgroundGray { |
| background:gray; |
| } |