html { margin: 0; padding: 0; color: #666; background: #282d32; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: lighter; } body { font: 14px Arial; background: #fff; margin: 0; padding: 0; color: #999; /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/ min-height: calc(100vh - 64px); padding-bottom: 64px; } h1, h3, h4, h5, h6, p { margin: 0; } h2 { margin: 0; padding: 3px; color: #fff; background: -webkit-linear-gradient(left, #36a, #fff); /* For Safari 5.1 to 6.0 */ background: linear-gradient(to right, #36a, #fff); /* Standard syntax (must be last) */ text-indent: 5px; border-radius: 0px; font-size: 110%; font-weight: lighter; } form { margin: 1em; } /********************* popup ****************************************/ #wrapPopBox { position: absolute; top: 0; } #popUpcontainer { background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; z-index: 100; } #popUpcontainerBoxIn { display: none; position: relative; height: 300px; width: 600px; background: #FFFFFF; left: 300px; top: 150px; z-index: 100; -webkit-box-shadow: 0px 1px 5px 3px rgba(255, 255, 255, 1); -moz-box-shadow: 0px 1px 5px 3px rgba(255, 255, 255, 1); box-shadow: 0px 1px 5px 3px rgba(255, 255, 255, 1); } #popUpcontainerClose { font-size: 16px; position: absolute; right: 10px; top: 7px; cursor: pointer; } #popUpcontentBox { padding-top: 20px; } /*************** start header *******************/ .header { height: 240px; background-image: url(../images/dkh_logo250px.gif); background-position: center; background-repeat: no-repeat; border-bottom: 5px solid #ccc; background-color: #FFF; } .header:after { content: ""; display: table; clear: both; } .headerIn { border-bottom: 5px solid #ccc; background-color: #0000EE; padding: 10px; } .headerIn { text-align: center; color: #fff; padding-right: 25px; } .headerIn .menuTop { float: left; background-image: url(../images/icons/menu.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; height: 25px; width: 25px; cursor: pointer; } .headerInSub { padding: 10px; background-color: #f5f5f5; border-bottom: 1px solid #eee; } .subTitle { text-align: center; font-size: 22px; font-weight: bold; color: #aaa; } /*************** end header *******************/ nav { display: none; padding: 0; width: 100%; position: absolute; top: 62px; z-index: 9999; left: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; background-color: #0000EE; } nav ul li { display: block; position: relative; border-bottom: solid 1px #ccc; margin: 0 10px; padding: 15px 0; font-weight: bold; font-size: 20px; text-align: center; } nav ul li:last-child { border-bottom: none; } nav a { line-height: 40px; padding: 0 12px; margin: 0 12px; color: #fff; text-decoration: none; display: block; } nav a:hover, nav a:focus, nav a:active { color: #fff; } #help { float: right; background-image: url(../images/icons/help.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; height: 22px; width: 22px; cursor: pointer; } input[type='text'] { border-radius: 3px; border: 1px solid #aaa; padding: 3px; font-size: 16px; box-shadow: 1px 1px 5px #aaa; color: #555; margin: 3px; } .c { margin: 3px auto; padding: 0.8%; width: 96%; left: 1%; overflow: auto; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; } @media all and (max-width: 6in), all and (max-device-width: 640px) { html { font-size: 36px; } input, select { font-size: 100%; } } /*************** start footer *******************/ .footer-dark { padding: 10px 20px; color: #f0f9ff; background-color: #282d32; position: fixed; width: 100%; top: calc(100vh - 64px); } .footer-dark h4 { margin-bottom: 5px; font-size: 12px; } .footer-dark ul div { color: inherit; text-decoration: none; opacity: 0.6; margin-bottom: 4px; } .footer-dark ul div:hover { opacity: 0.8; } .footer-dark .item.text { margin-bottom: 5px; text-align: center; } .footer-dark .item.text p { opacity: 0.6; margin-bottom: 0; text-align: center; } .footer-dark .copyright { text-align: center; padding-top: 5px; padding-bottom: 50px; opacity: 0.3; font-size: 13px; margin-bottom: 0; } .row-gnrl { padding-left: 10px; } /*************** end footer *******************/ @media screen and (max-width:960px) { .row-gnrl .gnrl-label { width: 90%; display: block; padding: 2px; } .row-gnrl .gnrl-input { width: 100%; display: block; padding: 2px; } .row-gnrl .gnrl-input input[type='text'], .row-gnrl .gnrl-input input[type='password'] { width: 90%; padding: 2px; } } @media screen and (min-width:960px) { .row-gnrl .gnrl-label { width: 240px; display: inline-block; float: left; padding-top: 2px; padding-bottom: 2px; } .row-gnrl .gnrl-input { width: calc(100% - 240px); display: inline-block; float: left; padding-top: 2px; padding-bottom: 0px; } .row-gnrl .gnrl-input input[type='text'], .row-gnrl .gnrl-input input[type='password'] { width: 100%; max-width: 450px; } } .header .help { position: absolute; right: 10px; bottom: 10px; background-image: url(../images/icons/help.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; height: 25px; width: 25px; cursor: pointer; }