Christ College - Application Portal Styles

application-portal.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);

body {
  background: #fbfbfb;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

body.main {
  background-position: 0 88px;
}

body.main #container h1 a {
  margin: auto auto auto 10px;
}

body #container {
  color: #525F83;
  margin-top: 24px;
  width: 840px;
}

body #container h1, body #container h2, body #container h3, body #container h4, body #container h5 {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
}

body #container font,
    body #container dd,
    body #container #iwdf-control-4,
    body #container #iwdf-control-4 > * {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #525F83;
  line-height: 16px;
  font-style: normal;
}

body #container font ul, body #container dd ul, body #container #iwdf-control-4 ul, body #container #iwdf-control-4 > * ul {
  margin: 16px 0;
}

body #container font li, body #container dd li, body #container #iwdf-control-4 li, body #container #iwdf-control-4 > * li {
  margin-bottom: 16px;
}

body #container dt {
  margin-top: 24px;
}

body #container dt label {
  line-height: 18px;
}

body #container dt label:after {
  content: '*';
}

body #container dd.required {
  border: none;
  padding: 0;
}

body #container dd.required input {
  margin: 8px 0 0 6px;
  border-color: #FB6D77;
}

body #container dd.required input:focus {
  border-color: #4EA5EC;
}

body #container .reqFieldExplanation {
  font-style: italic;
  border: none;
}

body #container .reqFieldExplanation:before {
  content: '*';
}

body #container h3 {
  margin: 24px 0;
}

body #container hr {
  box-sizing: border-box;
  background: #E6E6E6;
  height: 1px;
  border: none;
  margin: 8px 0;
}

body #container p:not(:last-child) {
  margin-bottom: 24px;
}

body #container p,
    body #container label,
    body #container .forgot_password {
  font-size: 14px;
}

body #container label.error {
  margin: 8px 0 16px 0;
  display: block;
  vertical-align: top;
}

body #container a {
  color: #4EA5EC;
  cursor: pointer;
}

body #container #loginForm {
  margin-top: 20px;
}

body #container input {
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  margin: 8px 0 0 0;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
  padding: 8px;
  font-size: 16px;
  width: 100%;
}

body #container input:focus {
  border: 1px solid #4EA5EC;
}

body #container h1 a {
  background: url('/img/global/logo.png') no-repeat top center;
  background-size: contain;
  margin: auto;
}

body #container input[type="checkbox"] {
  width: initial;
  margin-right: 4px;
  cursor: pointer;
}

body #container input[type="submit"] {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 16px 8px;
  font-size: 18px;
  color: white;
  background: #4EA5EC;
  background: linear-gradient(0deg, #4EA5EC 0%, #368dd2 100%);
  cursor: pointer;
}

body #container #mainContent {
  width: auto;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: none !important;
  float: none;
}

body #container #mainContent .notice {
  border-color: #E2A826;
  background: #fff2d5;
  border-radius: 4px;
  margin: 20px 0 24px 0;
  padding: 16px;
  font-size: 14px;
  line-height: 18px;
}

body #container #mainContent .help {
  text-align: right;
  font-size: 10px;
  margin-bottom: 20px;
}

body #container #side_bar {
  border: none;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  margin-top: 28px;
}

body #container #side_bar h3 {
  line-height: 28px;
}

body #container #side_bar h3 span {
  display: block;
  text-align: center;
  margin-top: 16px;
}

body #container #side_bar .note {
  font-size: 12px;
  font-style: italic;
}

body #container #side_bar table {
  margin-bottom: 12px;
}

body #container #mainNav {
  background: none;
}

body #container #mainNav + .show #mainContent {
  padding: 10px;
  background: white;
  width: 510px;
  padding-right: 0;
  float: left;
  border-radius: 0;
  box-shadow: none;
}

body #container #mainNav .tProfile {
  background: none;
}

body #container #mainNav li a {
  background: none;
  color: white;
  text-align: center;
  position: relative;
  padding: 12px 0;
}

body #container #mainNav li a:after,
        body #container #mainNav li a:last-child:before {
  content: ' ';
  background: #757e90;
  background: linear-gradient(0deg, #8897AE 0%, #757e90 100%);
  transform: skew(30deg);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}

body #container #mainNav li a:after,
        body #container #mainNav li a:last-child:before,
        body #container #mainNav li a:last-child:after {
  background-size: 1px 200%;
  transition: background .2s ease;
}

body #container #mainNav li a:hover {
  background: none;
  color: white;
}

body #container #mainNav li a:hover:before,
          body #container #mainNav li a:hover:after {
  background-position: 100%;
}

body #container #minorNav {
  margin: 0 10px;
}

body #container #minorNav li {
  font-size: 14px;
}

body#bProfile #container #mainNav li.tProfile a,
  body#bApplication #container #mainNav li.tApplication a,
  body#bPersonalInfo  #container #mainNav li.tApplication a,
  body#bEducation #container #mainNav li.tApplication a,
  body#bEssays #container #mainNav li.tApplication a,
  body#bRecommendations #container #mainNav li.tApplication a,
  body#bTestScores #container #mainNav li.tApplication a,
  body#bExCurrActivities #container #mainNav li.tApplication a,
  body#bFamilyRelationships #container #mainNav li.tApplication a,
  body#bEvents #container #mainNav li.tEvents a {
  background: none;
  color: white;
}

body#bProfile #container #mainNav li.tProfile a:before,
    body#bProfile #container #mainNav li.tProfile a:after,
    body#bApplication #container #mainNav li.tApplication a:before,
    body#bApplication #container #mainNav li.tApplication a:after,
    body#bPersonalInfo  #container #mainNav li.tApplication a:before,
    body#bPersonalInfo  #container #mainNav li.tApplication a:after,
    body#bEducation #container #mainNav li.tApplication a:before,
    body#bEducation #container #mainNav li.tApplication a:after,
    body#bEssays #container #mainNav li.tApplication a:before,
    body#bEssays #container #mainNav li.tApplication a:after,
    body#bRecommendations #container #mainNav li.tApplication a:before,
    body#bRecommendations #container #mainNav li.tApplication a:after,
    body#bTestScores #container #mainNav li.tApplication a:before,
    body#bTestScores #container #mainNav li.tApplication a:after,
    body#bExCurrActivities #container #mainNav li.tApplication a:before,
    body#bExCurrActivities #container #mainNav li.tApplication a:after,
    body#bFamilyRelationships #container #mainNav li.tApplication a:before,
    body#bFamilyRelationships #container #mainNav li.tApplication a:after,
    body#bEvents #container #mainNav li.tEvents a:before,
    body#bEvents #container #mainNav li.tEvents a:after {
  background: #4EA5EC;
  background: linear-gradient(0deg, #4EA5EC 0%, #368dd2 100%);
}