.selectdiv:disabled { color: #222; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html, body { height: 100%; margin: 0px; padding: 0px; } html { font-size: 62.5%; } body { font-size: 1.3em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-family: 'Neue Haas Unica W1G'; font-weight: normal; font-style: normal; color: #222; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 2rem; font-weight: 300; } h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; font-weight: 900;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; font-weight: 600; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; font-weight: 500; } h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.08rem; font-weight: bold; } h5 { font-size: 1.5rem; line-height: 1; letter-spacing: 0; font-weight: 500; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; font-weight: 500; } p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #2a51a5; text-decoration: none; font-weight: 500; } a:hover { color: #0018FF; } .menuleft { color: #000000; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .round { width: 30px; height: 30px; border-radius: 16px; margin: auto; border: solid; border-width:1px; text-align: center; vertical-align: middle; line-height: 30px; font-size: 20px; color: white; float: left } .red { cursor: pointer; background-color: red; } .deepskyblue { cursor: pointer; background-color: deepskyblue; } .green { cursor: pointer; background-color: green; } .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0px 24px 2px 24px; color: #0018FF; text-align: center; vertical-align: middle; font-size: 13px; font-weight: 500; line-height: 36px; letter-spacing: 0; text-decoration: none; white-space: nowrap; background-color: #F3F3F3; border: none; border-radius: 38px; cursor: pointer; box-sizing: border-box; box-shadow: 0px 2px 6px rgba(0,0,0,0.1); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #000; outline: 0; background: #EBEBEB; box-shadow: none; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #0018FF; border: none; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #384BFF; border: none; } input[type=checkbox].custom_cb { position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input[type=checkbox].custom_cb + label.custom_cb_label { padding-left:21px; height:14px; display:inline-block; line-height:13px; background-repeat:no-repeat; background-position: 0 0; font-size:13px; vertical-align:middle; cursor:pointer; font-weight: normal; } input[type=checkbox].custom_cb:checked + label.custom_cb_label { background-position: 0 -14px; } label.custom_cb_label { background-image:url("../images/checkbox.png"); background-size: 14px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type=radio].custom_radio { position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input[type=radio].custom_radio + label.custom_radio_label { padding-left:21px; height:14px; display:inline-block; line-height:13px; background-repeat:no-repeat; background-position: 0 0; font-size:13px; vertical-align:middle; cursor:pointer; font-weight: normal; } input[type=radio].custom_radio:checked + label.custom_radio_label { background-position: 0 -14px; } label.custom_radio_label { background-image:url("../images/radio.png"); background-size: 14px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { /* height: 38px;*/ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; margin-bottom: .5rem; } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ /*ul { list-style: none inside; }*/ ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; } li { margin-left: 10px; margin-bottom: 1rem; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th { color: #0018FF; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { margin-bottom: 1rem; } input, textarea, select, fieldset { margin-bottom: 1.5rem; } pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-pull-right { float: right; } .u-pull-left { float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) {} /* Larger than desktop */ @media (min-width: 1000px) {} /* Larger than Desktop HD */ @media (min-width: 1200px) {} .rounded { display: block; margin-bottom: 20px; border: solid; width: 500px; border-width: 1px; border-color: #9cb2c4; border-radius: 15px; padding: 15px; } .lc { height: 100%; width: 300px; background: #F3F3F3; float: left; position: fixed; } .logo { padding: 0px 0px 0px 40px; height: 82px; background: #fff; border-bottom: 1px solid #E0E2E5; } .logo img { height: 22px; } .left_nav { padding: 22px 0px 0px 40px; overflow: auto; max-height: 860px; } .rc { width: calc(100% - 300px); float: left; overflow: auto; } .top_nav { height: 82px; //border-bottom: 1px solid #E0E2E5; border-bottom: 1px solid #CFCFCF; padding: 0px 0px 0px 28px; line-height: 82px; left: 300px; background: #fff; position: fixed; width: calc(100% - 300px); } .top_links { float: left; } .top_links a { display: block; float: left; width: auto; color: #4E4F55; padding: 0 12px; margin-right: 20px; } .top_links a:hover { color: #000; border-bottom: 1px solid #BDBFC3; } .top_links a.active { color: #0018FF; border-bottom: 1px solid #0018FF; } .account { float: right; margin: 0px 20px 0px 0px; font-weight: 500; } .main_content { overflow: auto; position:absolute; top: 82px; left: 300px; padding: 22px 0px 0px 40px; } .account { padding: 30px; } .account_name { display: block; height: 22px; line-height: 22px; float: left; margin-right: 20px; } .logout { float:left; display: block; width: 22px; height: 22px; background-image: url("../images/exit.svg"); background-repeat: no-repeat; background-position: center center; background-size: 22px; } .logout:hover { background-image: url("../images/exit_hover.svg"); } .left_nav h5 { cursor: pointer; } .ui-state-active { color: #0018FF; } .ui-widget * { outline: none; }​