/* |-------------------------------------------------------------------------- | Tespa Global Stylesheet |-------------------------------------------------------------------------- | Version: 1.0 | Dependencies: Bootstrap 3.3.1, FontAwesome 4.2.0 | Created on: 1/6/2015 | | Author: Logan Fishel | Website: http://loganfishel.com | */ /* |-------------------------------------------------------------------------- | Fonts |-------------------------------------------------------------------------- */ /* Bebas Neue - Note 'Bold' is set to default font weight */ @font-face { font-family: BebasNeue; font-style: normal; font-weight: 400; src: url(../fonts/BebasNeueBold.woff) format('woff'); } /* Open Sans */ @font-face { font-family: OpenSans; font-style: normal; font-weight: 400; src: url(../fonts/OpenSans-Regular.woff) format('woff'); } @font-face { font-family: OpenSans; font-style: normal; font-weight: 700; src: url(../fonts/OpenSans-Bold.woff) format('woff'); } @font-face { font-family: OpenSans; font-style: italic; font-weight: 400; src: url(../fonts/OpenSans-Italic.woff) format('woff'); } /* |-------------------------------------------------------------------------- | HTML Global Element Style - ,

,
... |-------------------------------------------------------------------------- / html, body { height: 100%; } body { background: #135986; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; font-family: OpenSans; } p { word-wrap: break-word; } .page-wrap { min-height: 100%; padding-bottom: 70px; margin-bottom: -110px; } a { color: #2980b9; } a:hover { color: #1e5d87; } a:focus { text-decoration: none; } h1 { font-size: 28px; font-family: BebasNeue; font-weight: 400; letter-spacing: 1px; color: #1e5d87; text-shadow: 1px 1px 1px #d1d1d1; } h2, h3, h4, h5 { font-weight: 700; } hr { margin: 10px 0px 10px 0px; border-top: 1px solid #d1d1d1; } img { max-width: 100%; } / Bootstrap Container / .container { min-width: 750px; } / |-------------------------------------------------------------------------- | Tespa Helper Classes |-------------------------------------------------------------------------- / / Margin / .no-margin { margin: 0; } .margin-top { margin-top: 15px; } .margin-left { margin-left: 15px; } .margin-right { margin-right: 15px; } .margin-bottom { margin-bottom: 15px; } .margin { margin: 15px; } / Text / .text-bold { font-weight: 700; } .text-normal { font-weight: 400; } .text-primary { color: #1e5d87; } .text-loss { color: #bf6060; } .text-win { color: #80bf60; } .text-orange { color: #ff7d00; } .text-yellow { color: #ecd148; } .text-purple { color: #9b59b6; } .text-gray { color: #aaa; } .text-x-large { font-size: xx-large; } .text-large { font-size: x-large; } .text-small { font-size: small; } .text-x-small { font-size: x-small; } / Border / .no-border { border: none !important; } / Messages / .message a { font-weight: bold; text-decoration: underline; } .btn { -ms-transform: skew(-25deg); -webkit-transform: skew(-25deg); transform: skew(-25deg); margin: 0px 6px 0px 6px; } .btn-gray { background-color: #8c8da0; color: #ffffff } .btn-gray:hover { background-color: #818291; color: #ffffff; } .btn-lg { margin: 0px 8px 0px 8px; } .btn > span { display: inline-block; -ms-transform: skew(25deg); -webkit-transform: skew(25deg); transform: skew(25deg); padding: 0px 5px 0px 5px; } / |-------------------------------------------------------------------------- | Tespa Header |-------------------------------------------------------------------------- / / Top Tespa Navigation Row / #tespa { position: relative; z-index: 2; height: 32px; background-image: url('../img/noise/white.png'); padding: 0 15px 0 15px; min-width: 750px; } #tespa .logo { float: left; height: 30px; margin-top: -6px; } #tespa .links a { float: left; display: inline-block; height: 32px; padding: 7px 10px 7px 10px; font-size: 12px; color: #1e5d87; font-weight: bold; } #tespa .links a:hover { text-decoration: none; background-image: url('../img/noise/grey.png'); } #tespa .social a { display: inline-block; height: 32px; padding: 7px 5px 0px 5px; color: #1e5d87; } #tespa .social a:hover { text-decoration: none; background-image: url('../img/noise/grey.png'); } / Area for Portal Logo/Info / #logo { position: relative; z-index: 1; height: 150px; background-image: url('../img/noise/lightblue-transparent.png'); box-shadow: 0px 0px 3px #333 inset; } #logo .logo { max-width: initial; height: 120px; margin-top: 5px; margin-bottom: -5px; margin-left: -10px; } #logo .brackets { width: 100%; height: 150px; } #logo .subtitle { width: 250px; text-align: right; color: #fff; font-style: italic; font-weight: bold; color: #002d56; font-size: 16px; } / Main Portal Navigation / #nav { height: 92px; background-image: url('../img/noise/darkblue-transparent.png'); font-family: BebasNeue; font-size: 24px; letter-spacing: 1px; box-shadow: 0px 0px 3px #333; } #nav::before { content: ""; display: block; height: 2px; background-image: url('../img/noise/white.png'); } #nav .row { margin-left: -18px; margin-right: -18px; } #nav .right-nav a{ float: right; } #nav img { position: relative; z-index: 2; float: right; margin-right: 15px; margin-top: -1px; } #nav a { float: left; display: inline-block; height: 50px; color: #fff; padding: 8px 15px 0px 15px; text-shadow: 1px 1px 1px #333; -ms-transform: skew(-25deg); -webkit-transform: skew(-25deg); transform: skew(-25deg); } #nav a span { display: inline-block; -ms-transform: skew(25deg); -webkit-transform: skew(25deg); transform: skew(25deg); } #nav a:hover { color: #fff; box-shadow: 0px 0px 3px #133449 inset; text-decoration: none; background-image: url('../img/noise/lightblue-transparent.png'); } #nav a.active::before { content: ""; display: block; position: relative; margin-left: auto; margin-right: auto; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; margin-top: -8px; } / |-------------------------------------------------------------------------- | Content |-------------------------------------------------------------------------- / #content { margin-top: -40px; } #content .container { position: relative; z-index: 2; padding-top: 15px; background-image: url('../img/noise/white.png'); border: 1px solid #333; min-height: 250px; } .panel { box-shadow: 0px 0px 1px 1px #d1d1d1; border: none; } .flat-top { border-top-left-radius: 0px; border-top-right-radius: 0px; } / Panel Primary Changes / .panel-primary .panel-heading { background: #1e5d87; border-color: #1e5d87; } .panel-primary a .panel-heading { color: #fff; } .panel-primary a:hover, .panel-primary a.collapsed { text-decoration: none; } .panel-primary a:hover .panel-heading, .panel-primary a[aria-expanded="true"] .panel-heading { background: #2980b9; } .panel-primary a[aria-expanded="true"] .panel-heading i:before { content: "\f0d7"; } .panel-primary a[aria-expanded="false"] .panel-heading i:before { content: "\f0da"; } .panel-primary a .panel-heading i { display: inline-block; width: 15px; } / |-------------------------------------------------------------------------- | Form Control |-------------------------------------------------------------------------- / label { font-size: 16px; vertical-align: 0px; } textarea { resize: none; } .checkbox { margin-top: 6px; margin-bottom: 6px; } .checkbox input { height: 16px; width: 16px; } .form-error { font-weight: bold; font-size: 12px; margin: 0; color: #bf6060; } .form-error a { color: inherit; text-decoration: underline; } .form-optional { color: #337ab7; font-style: italic; font-weight: bold; font-size: 11px; } .form-inline { display: inline; } .form-control_search, .form-inline .input-group > .form-control_search { width: 240px; } .form-control.ng-invalid.ng-touched { border-color: #d9534f; } .form-control.ng-invalid.ng-touched:focus { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6); } / WYSIWYG / .wysiwyg-toolbar { background: #2980b9; -webkit-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; border-top-right-radius: 4px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; padding: 5px 0px 4px 0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wysiwyg-toolbar a { color: #fff; cursor: pointer; padding: 5px 7px 5px 7px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: background .2s; -o-transition: background .2s; transition: background .2s; } .wysiwyg-toolbar a:hover { background: #1e5d87; text-decoration: none; } .wysiwyg-toolbar a[aria-expanded="true"] { background: #1e5d87; text-decoration: none; } .wysiwyg-toolbar a.btn-info { background: none; background: #1e5d87; } .wysiwyg-toolbar .dropdown-menu { top: 55px; left: 15px; } .wysiwyg-toolbar .dropdown-menu a.btn-info { background: #f0f0f0; } .wysiwyg-input { min-height: 300px; overflow: auto; -webkit-border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -ms-border-top-left-radius: 0px; -o-border-top-left-radius: 0px; border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-top-right-radius: 0px; -ms-border-top-right-radius: 0px; -o-border-top-right-radius: 0px; border-top-right-radius: 0px; } .placeholderText { color: #999;} / |-------------------------------------------------------------------------- | SLIDER |-------------------------------------------------------------------------- / .range-input { overflow: hidden; width: 100%; } / slider root element / .slider { background:#337ab7; height:10px; position:relative; cursor:pointer; border: 1px solid #ccc; width: 80%; margin-right: 4%; float:left; clear:right; margin-top:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } / progress bar (enabled with progress: true) / .progress { height:9px; background-color:#C5FF00; display: none; opacity: 0.6; } / drag handle / .handle { background-color: #fff; height:24px; width:24px; top:-10px; position:absolute; display:block; margin-top:1px; border:1px solid #1e5d87; cursor:move; box-shadow: 1px 1px 3px #333; -webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } / the input field / .range { font-size: 14px; margin-left: 15px; width: 16%; text-align: center; } / |-------------------------------------------------------------------------- | Footer |-------------------------------------------------------------------------- / #footer { } #footer .container { position: relative; /z-index: 3; removing this to prevent the College Name autocomplete from being covered / } #sponsors { height: 95px; padding-top: 40px; box-shadow: 0px 0px 3px #333 inset; background-image: url('../img/noise/darkblue-transparent.png'); } #sponsors .row { margin-left: -14px; margin-right: -14px; } #sponsors a { font-family: BebasNeue; display: inline-block; height: 55px; padding: 12px 10px 0px 10px; font-size: 24px; letter-spacing: 1px; color: #fff; } #sponsors a:hover { background-image: url('../img/noise/lightblue-transparent.png'); text-decoration: none; box-shadow: 0px 0px 3px #133449 inset; } #copyright { height: 20px; background-image: url('../img/noise/black.png'); font-size: 11px; color: #aaa; padding-top: 2px; } #copyright a { margin-right: 15px; color: #fff; } / |-------------------------------------------------------------------------- | Responsive Changes |-------------------------------------------------------------------------- / / SMALL / @media (max-width: 992px) { / Styles / body { background-image: url('../img/noise/black.png'); background-repeat: repeat; background-size: initial; } } / MEDIUM / @media (min-width: 992px) { / Styles / } / LARGE / @media (min-width: 1200px) { / Styles / } / |-------------------------------------------------------------------------- | Login Form |-------------------------------------------------------------------------- */ #login_form #remember_me_label { font-weight: normal; font-size: 14px; margin-left:3px; }