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 .logo { background-image:url(../images/dkhlogo.png); background-position:center; background-repeat:no-repeat; height:49px; width:200px; margin-bottom:9px; } .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; } .headerInSub .subTitle { text-align:center; font-size:16px; font-weight:bold; color:#aaa; } /*************** end header *******************/ .regButton { padding: 8px 0px; background-color:#0088EE; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: inset 0px 0px 5px #666, 2px 2px 3px #333; cursor:pointer; color:#fff; margin:8px 5px; font-size:14px; font-weight:bold; text-align:center; max-width:350px; margin: auto; } .contentSplash { color:#fff; background: #0000EE; padding:50px 15px; height: 450px; margin: 0 auto; } .contentSplash .splashPageTxt { padding-bottom:20px; text-align:center } .contentSplash h1 { text-align:center } nav { display:none; padding:0; width:100%; /*max-width:768px;*/ position:absolute; top:62px; z-index:9999; left:0; } nav ul { list-style-type:none; margin:0; padding:0; /*border:1px solid #ccc; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:1em; border-bottom-left-radius:1em;*/ 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; } /*********************** From elements **************************/ 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; } /*********************** End From elements **************************/ /************************* Gnrl elements ****************************/ .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%;} } /*********************** End Gnrl elements **************************/ /*************** start footer *******************/ .footer-dark { padding:10px 20px; color:#f0f9ff; background-color:#282d32; position: fixed; width: 100%; top: calc(100vh - 64px); } .footer-dark h3 { margin-top:0; margin-bottom:12px; font-weight:bold; font-size:16px; } .footer-dark h4 { padding:0px 0px 0px 10px; margin-bottom:2px; font-weight:normal ; font-size:12px; } .footer-dark ul { padding:0; list-style:none; line-height:1.6; font-size:14px; margin-bottom:0; } .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 .col-footer { display:inline-block; text-align:left; vertical-align: top; margin-right: 20px; color:#fff; opacity:0.75; } .footer-dark .devRoll { padding:0px 10px 0px 0px; display:inline-block; vertical-align: top; } .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: 100%; 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: 100%; 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; }