/*! * IMMS - Responsive System Theme /* Developer Joseph K */ /**********BASE CONFIGURATIONS FOR IMMSystem**********/ body { background:#d70000; font-family: 'Open Sans', sans-serif; } h1 { font-family: 'Raleway', sans-serif;} h3,h4 , h5 { font-family: 'Open Sans', sans-serif; font-weight:lighter; } h2{ font-size:22px; } h3 { font-size:46px; color:#b2c831 } h5 { color:#b2c831; margin-left:5px; } /***********BLOCKS & WRAPS***********/ /*--- Dash Unit / Used in Dashboard page ---*/ .dash-unit { margin-bottom: 30px; padding-bottom:10px; border: 1px solid #383737; background-image:url('../images/sep-half.png'); background-color:#000; color:white; height:290px; border-radius: 11px; } .dash-unit:hover { background-color: #4f4f4f; -moz-box-shadow: 3px 3px 2px 0px #151515; -webkit-box-shadow: 3px 3px 2px 0px #151515; box-shadow: 3px 3px 2px 0px #151515; } .dash-unit dtitle { font-size:11px; text-transform:uppercase; color:#ffffff; margin:8px; padding:0px; height:inherit } .dash-unit hr { border: 0; border-top: 1px solid #151515; border-top-style: dashed; margin-top:3px; } .dash-unit h1 { font-family: 'Raleway', sans-serif; font-weight:300; font-size: 17px; line-height: 2px; letter-spacing: 0px; color: #ffffff; padding-top:10px; padding-left:5px; margin-top:2px; text-align:center; } .dash-unit h2 { font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 30px; line-height: 26px; letter-spacing: 0px; color: #ffffff; padding-top:10px; padding-left:5px; margin-top:2px; text-align:center; } .dash-unit h3 { font-weight:300; font-size: 15px; line-height: 2px; letter-spacing: 0px; color: #b2c831; padding-top:10px; padding-left:5px; margin-top:2px; text-align:center; } .dash-unit p { font-size: 14px; font-weight: 200; line-height: 16px; color: inherit; margin: 0 0 10px; padding:5px; } .dash-unit h4 { padding-left:5px; margin-top:2px; font-size: 13px; font-weight:lighter; line-height: 1; letter-spacing: 0px; color: #fff; } .dash-unit bold{ font-family: 'Open Sans', sans-serif; font-size:26px; font-weight:bold; color:#fff; vertical-align:middle; } /**********Half-Unit / Used in index.html**********/ .half-unit { margin-bottom: 30px; padding-bottom: 4px; border: 1px solid #383737; background-image:url('../images/sep-half.png'); background-color: #000; color:white; height:130px; border-radius: 11px; } .half-unit:hover { background-color: #4f4f4f; -moz-box-shadow: 3px 3px 2px 0px #151515; -webkit-box-shadow: 3px 3px 2px 0px #151515; box-shadow: 3px 3px 2px 0px #151515; } .half-unit dtitle { font-size:10px; text-transform:uppercase; color:#ffffff; margin:8px; padding:0px; height:inherit } .half-unit hr { border: 0; border-top: 1px solid #151515; border-top-style: dashed; margin-top:3px; } .half-unit h1 { font-family: 'Raleway', sans-serif; font-weight:300; font-size: 20px; line-height: 1; letter-spacing: 0px; color: #ffffff; padding-top:10px; padding-left:5px; margin-top:2px; text-align:center; } .half-unit h4 { padding-left:5px; margin-top:2px; font-size: 13px; font-weight:lighter; line-height: 1; letter-spacing: 0px; color: #fff; } .half-unit bold{ font-family: 'Open Sans', sans-serif; font-size:26px; font-weight:bold; color:#fff; vertical-align:middle; } /**********Styling Elements**********/ .cont { text-align:center; margin-top:30px; } .cont ok { color:#b2c831; } .cont bad { color:#fa1d2d; } .cont2 { text-align:center; margin-top:-15px; font-size:12px; line-height:7px; } .cont2 bold{ font-size:10px; font-weight:bold; color:#b2c831 } .text p { font-family: 'Open Sans', sans-serif; margin-left:8px; font-size:14px; line-height:18px; } .text grey { font-size:11px; color:silver } /***********Bootstrap Default Modifications***********/ .thumbnail { border:0px; text-align:center; -webkit-box-shadow: 0px; -moz-box-shadow: 0px; box-shadow: 0px; background: none; text-align: center; } .modal-header { background-image:url('../images/sep-half.png'); background-color: #4f4f4f; color:#fff; } input[type=submit] { font-family: 'Open Sans', sans-serif; font-size: 15px; background: #b2c831; color: #fff; border: none; padding: 8px 28px 10px 26px; *-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } input[type=text], textarea { background: #cdcbcc; font-size: 13px; display: block; width: 100%; border: none; box-shadow: none; height: 30px; line-height: 18px; padding: 0; text-indent: 18px; margin: 0 0 18px; } textarea { line-height: 18px; padding: 18px; width: 100%; text-indent: 0; } .textarea-container { margin: 0 18px; } .textarea-container textarea { margin-left: -18px; } #contact textarea { width: 100%; height: 45px; } .progress-bar { background-color: #b2c831; } /***********LineIcons Styles***********/ .info-user { text-align:center; font-size: 24px; color: #b2c831; } .fs1 { padding:5px 5px 5px 5px; position:relative; } .fs1:hover { position:relative; color: #fff; cursor:pointer } .fs2 { padding:5px 5px 5px 5px; position:relative; font-size:35px; vertical-align: text-bottom } /**********Clock Configuration**********/ digiclock { font-size: 30px; color: #fff; text-align: center; line-height: 60px; margin-left: auto } .clockcenter { text-align:center; } /**********Mail Style Configuration**********/ .framemail { cursor: default; } .framemail .window { font-size: 0; margin-top: -1px; overflow: hidden; margin-left: -18px; } .framemail .window .mail li { background-color:#3d3d3d; background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); border-top: 1px solid #888; position: relative; margin-left:-18px; } .framemail .window .mail li:first-child { border-top: none; } .framemail .window .mail li:hover { background-color: #5d5b5b; } .framemail .window .mail li:after, .framemail .window .mail li:before { border-left: 8px solid transparent; border-top: 8px solid #df6; content: ''; height: 0; position: absolute; right: 0; top: 0; width: 0; } .framemail .window .mail li:before { border-top-color: #bbb; border-width: 9px; } .framemail .window .mail li:nth-child(1):after, .framemail .window .mail li:nth-child(1):before { border: none; } .framemail .window .mail li:nth-child(2):after { border-top-color: #fa1d2d; } .framemail .window .mail li i { display: inline-block; height: 48px; width: 6px; } .framemail .window .mail li .read { background-color: #ddd; } .framemail .window .mail li .unread { background: #b2c831; } .framemail .window .mail li img { background: #819da2; border-radius: 2px; height: 36px; left: 12px; position: absolute; top: 6px; width: 36px; } .framemail .window .mail li p { font: 13px/24px sans-serif; left: 56px; position: absolute; top: 3px; } .framemail .window .mail li .sender { color: #e9e8e8; font-weight: bold; text-shadow: 0 1px 1px hsla(0,0%,100%,.5); } .framemail .window .mail li .message { color: #999; overflow: hidden; text-overflow: ellipsis; top: 21px; white-space: nowrap; } .framemail .window .mail li .message strong { color: #999; } .framemail .window .mail li .actions { height: 16px; position: absolute; right: 19px; text-align: right; top: 0; width: 96px; } .framemail .window .mail li .actions img { background: none; display: inline-block; height: 16px; margin-left: 6px; opacity: .1; position: relative; width: 16px; } .framemail .window .mail li:hover .actions img { opacity: .25; } .framemail .window .mail li .actions img:hover { opacity: .75; } /**********DONUT CHARTS STYLES**********/ #load { width: 11.313em; height: 11.313em; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1.063em; background-position: center center; margin:auto; } #space { width: 11.313em; height: 11.313em; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1.063em; background-position: center center; margin:auto; } /**********LINE AND BARS**********/ .section-graph { position: relative; height: 130px; color: #fff; background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%)); margin-bottom:20px; } .section-graph .graph-info { z-index: 99; position: absolute; font-weight: bold; margin-top: 12px; margin-left: 21px; width: 100px; } .section-graph .graph-info .graph-arrow { width: 0; height: 0; margin-top: 18px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid white; float: left; } .section-graph .graph-info .graph-info-big { font-size: 24px; float: left; margin-left: 3px; } .section-graph .graph-info .graph-info-small { margin-left: 3px; font-size: 12px; font-weight: normal; color: rgba(255, 255, 255, 0.5); clear: left; margin-left: 8px; } /* * Info Section */ .info-aapl { text-align: center; } .info-aapl ul { margin-left:30%; } .info-aapl li { margin: 0; display: block; width: 9px; height: 40px; margin-right: 6px; background-color: #f5f0ec; float:left; position: relative; } .info-aapl li span { display: block; width: 9px; height: 40px; position: absolute; bottom: 0; } .info-aapl li span.orange { background-color: #fa1d2d; } .info-aapl li span.green { background-color: #b2c831; } /**********TWITTER WIDGET **********/ #jstwitter ul li{ color:#bdbdbd; padding:.5em .75em; } #jstwitter ul{ margin-left:0; list-style:none } #jstwitter:first-child{ border-top:0 } ul#jstwitter li a{ font-size:10px; font-style:italic; color:#666; text-decoration:none } /********** CUSTOMIZED BUTTON **********/ .btnnew { display: inline-block; *border-left: 0 none #707070; border-right: 0 none #707070; border-top: 0 none #707070; border-bottom: 0 none #707070; display: inline; padding: 4px 12px; margin-bottom: 0; *margin-left: .3em; font-size: 14px; line-height: 20px; color: #b2c831; text-align: center; vertical-align: middle; cursor: pointer; background-color: #5a5a5a; *background-color: #5a5a5a; background-repeat: repeat-x; *-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, #707070, #707070);* } /********** SWITCH BUTTON **********/ .switch { position: relative; margin: 20px auto; height: 26px; width: 120px; background: rgba(0, 0, 0, 0.25); border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); } .switch-label { position: relative; z-index: 2; float: left; width: 58px; line-height: 26px; font-size: 11px; color: rgba(255, 255, 255, 0.35); text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); cursor: pointer; } .switch-label:active { font-weight: bold; } .switch-label-off { padding-left: 2px; } .switch-label-on { padding-right: 2px; } /* * Note: using adjacent or general sibling selectors combined with * pseudo classes doesn't work in Safari 5.0 and Chrome 12. * See this article for more info and a potential fix: * http://css-tricks.com/webkit-sibling-bug/ */ .switch-input { display: none; } .switch-input:checked + .switch-label { font-weight: bold; color: rgba(0, 0, 0, 0.65); text-shadow: 0 1px rgba(255, 255, 255, 0.25); -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; } .switch-input:checked + .switch-label-on ~ .switch-selection { left: 60px; /* Note: left: 50% doesn't transition in WebKit */ } .switch-selection { display: block; position: absolute; z-index: 1; top: 2px; left: 2px; width: 58px; height: 22px; background: #b2c831; border-radius: 3px; background-image: -webkit-linear-gradient(top, #b6c753, #b2c831); background-image: -moz-linear-gradient(top, #b6c753, #b2c831); background-image: -o-linear-gradient(top, #b6c753, #b2c831); background-image: linear-gradient(to bottom, #b6c753, #b2c831); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; } .switch-blue .switch-selection { background: #3aa2d0; background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0); background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0); background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0); background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0); } .switch-yellow .switch-selection { background: #fa1d2d; background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d); background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d); background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d); background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d); } /**********Gauge Chart**********/ #canvas { display: block; width: 150px; margin: 30px auto; } /**********Accordion Styling**********/ .accordion-group { border: 1px solid #222; } .accordion-heading { background-color: #5a5a5a; *background-color: #5a5a5a; background-repeat: repeat-x; *-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); background-image: linear-gradient(to bottom, #707070, #707070);* } /**********Link Styling**********/ a { color: #000; text-decoration: none; } a:hover { color: #dff948; text-decoration: none; } /**********FooterWrap Section**********/ #footerwrap { width: 100%; background:#000; background-image:url('../images/sep-half.png'); padding-top:25px; padding-bottom: 40px; border-top-style: solid; border-top-width:8px; border-top-color:#1d1d1d; text-align:center } #footerwrap p { color:white; font-size:12px; } /***********FULLCALENDAR STYLE***********/ #external-events { padding: 0 10px; border: 1px solid #8b8b8a; background-color: #8b8b8a; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #b2c831; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #b2c831; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { width:100%; } /**********Media Styles**********/ @media (max-width: 360px){ /*Calendar Adsjustments*/ .fc-header {margin-top:15px;} .fc-header-title h2{font-size:10px; } .fc-header-right {display:none} /* portrait tablet */ @media (min-width: 767px) and (max-width: 768px) { .info-aapl ul { margin-left:10px; float:left; } #load { margin-left:5px; margin-right:10px; } #space { margin-left:5px; margin-right:10px; } } /* Landscape iphone 5 and samsung galaxy */ @media (min-width: 560px) and (max-width: 685px) { .info-aapl ul { margin-left:40%; } }