/*
 * Copy the Navigation (with dropdowns) section
 * Change .navbar margin-bottom to 0
 * In .navbar ul li > a remove rem1
 * Copy minimally the rows and button css as needed
*/
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

/* Nav hack */
div.logo img {
    height: 38px !important;
}

.navbar {
    font-family: "Open Sans";
}
#id_marking_period {
    font-family: Arial;
    font-weight: normal;
    font-size: 16px;
    
}
.row {
width: 100%;
max-width: 1300px;
min-width: 320px;
margin: 0 auto;
}
.sixteen.colgrid .row .two.columns {
width: 11.15385%;
}
.sixteen.colgrid .row .fourteen.columns {
width: 87.30769%;
}

ul li.row {
    min-width: 10px;
}
.column, .columns {
margin-left: 2.12766%;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sixteen.colgrid .row .two.columns {
width: 10.6383%;
}
.sixteen.colgrid .row .fourteen.columns {
width: 87.23404%;
}
.field {
position: relative;
max-width: 100%;
margin-bottom: 10px;
vertical-align: middle;
font-size: 16px;
}
.field .input.search {
height: 36px;
line-height: 34px;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
-ms-border-radius: 1000px;
-o-border-radius: 1000px;
border-radius: 1000px;
padding-right: 0;
}
img, object, embed {
max-width: 100%;
height: auto;
}
.field .input {
position: relative;
padding: 0 10px;
background: #fff;
border: 1px solid #d8d8d8;
height: 36px;
line-height: 34px;
font-size: 16px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.field input, .field input[type="*"], .field textarea {
max-width: 100%;
width: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
resize: none;
-webkit-appearance: none;
font-family: "Open Sans";
font-weight: 300;
font-size: 16px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}



/*=====================================================
 Navigation (with dropdowns)
 ======================================================*/
.navbar { width: 100%; min-height: 60px; display: block; margin-bottom: 20px; background: #4a4d50; }
  .navbar .column, .navbar .columns { min-height: 0; } }
.navbar.fixed { top: 0; left: 0; z-index: 99999; }
.navbar a.toggle { display: none; }
.navbar .logo { display: inline-block; margin: 0 2.12766% 0 0; padding: 0; height: 60px; line-height: 58px; }
.navbar .logo a { display: block; padding: 0 0 0 16px; overflow: hidden; height: 60px; line-height: 58px; }
.navbar ul { display: table; vertical-align: middle; margin: 0; float: none; }
.navbar ul li { display: table-cell; text-align: center; padding-bottom: 0; margin: 0; height: 60px; line-height: 58px; }
.navbar ul li > a { display: block; padding: 0 16px; white-space: nowrap; color: white; text-shadow: 0 1px 2px #191a1b, 0 1px 0 #191a1b; height: 60px; line-height: 58px; font-size: 16px; }
.navbar ul li .btn { border-color: #000101 !important; }
.navbar ul li.field { margin-bottom: 0 !important; margin-right: 0; }
.navbar ul li.field input.search { background: #191a1b; border: none; color: #f2f2f2; }
.navbar ul li .dropdown { width: auto; min-width: 0px; max-width: 320px; height: 0; position: absolute; background: #fafafa; overflow: hidden; z-index: 999; }

/**** Navbar positioning for Microsoft's browser who deserves not to be mentioned ****/
.ie7 .navbar > ul { width: auto; }

.ie7 .navbar, .ie7 .navbar > ul > li > a { display: block; }

.ie7 .navbar .logo, .ie7 .navbar ul, .ie7 .navbar ul li { float: left; display: inline-block; }

.ie7 .navbar .logo a { display: block; overflow: hidden; }

.ie7 .navbar > ul > li .field { display: block; padding: 12px 18px 0; width: 80%; }

.pretty.navbar { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b8085), color-stop(100%, #313436)); background-image: -webkit-linear-gradient(#7b8085, #313436); background-image: -moz-linear-gradient(#7b8085, #313436); background-image: -o-linear-gradient(#7b8085, #313436); background-image: linear-gradient(#7b8085, #313436); -webkit-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; -moz-box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; box-shadow: inset 0 1px 1px #7b8085, 0 1px 2px rgba(0, 0, 0, 0.8) !important; /* Remove this line if you dont want a dropshadow on your navigation*/ }
.pretty.navbar.row { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
.pretty.navbar ul li.field input.search { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #191a1b), color-stop(100%, #4f5255)); background-image: -webkit-linear-gradient(#191a1b, #4f5255); background-image: -moz-linear-gradient(#191a1b, #4f5255); background-image: -o-linear-gradient(#191a1b, #4f5255); background-image: linear-gradient(#191a1b, #4f5255); border: none; -webkit-box-shadow: 0 1px 2px #888d91 !important; -moz-box-shadow: 0 1px 2px #888d91 !important; box-shadow: 0 1px 2px #888d91 !important; /* Remove this line if you dont want a dropshadow on your navigation*/ }
.pretty.navbar > ul > li:first-child, .pretty.navbar .pretty.navbar > ul > li:first-child a:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

.navbar li .dropdown ul { margin: 0; display: block; }
.navbar li .dropdown ul > li { position: relative; display: block; width: 100%; float: left; text-align: left; height: auto; -webkit-border-radius: none; -moz-border-radius: none; -ms-border-radius: none; -o-border-radius: none; border-radius: none; }
.navbar li .dropdown ul > li a { display: block; padding: 0 20px; color: #309bbf; border-bottom: 1px solid #cccccc; text-shadow: none; height: 51px; line-height: 49px; }
.navbar li .dropdown ul > li .dropdown { display: none; background: white; }
.navbar li .dropdown ul li:first-child a { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }

.no-touch .navbar ul li:hover > a { position: relative; background: #868d92; z-index: 1000; }

.no-touch .navbar ul li:hover .dropdown, .touch .navbar ul li.active .dropdown { min-height: 50px; max-height: 561px; overflow: visible; height: auto; width: 100%; padding: 0; border-top: 1px solid #3e4043; -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); }

.no-touch .navbar ul li:hover .dropdown ul { position: relative; top: 0; min-height: 50px; max-height: 250px; height: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; min-height: 50px; max-height: 250px; height: auto; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
.no-touch .navbar ul li:hover .dropdown ul li { min-height: 50px; }

.no-touch .navbar ul li:hover .dropdown ul li { min-height: 50px; }

.no-touch .navbar li .dropdown ul > li:hover .dropdown, .touch .navbar li .dropdown ul > li.active .dropdown { border-top: none; display: block; position: absolute; z-index: 9999; left: 100%; top: 0px; margin-top: 0; }

.no-touch .navbar li .dropdown ul li a:hover { background: #f2f2f2; }

.touch .navbar a:hover { color: white !important; }

.subnav { display: block; width: auto; overflow: hidden; margin: 0 0 18px 0; padding-top: 4px; }
.subnav li, .subnav dt, .subnav dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; }
.subnav li:first-child, .subnav dt:first-child, .subnav dd:first-child { margin-left: 0; }
.subnav dt { color: #999; font-weight: normal; }
.subnav li a, .subnav dd a { color: #05390a; font-size: 15px; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
.subnav li.active a, .subnav dd.active a { background: #5dbb73; padding: 5px 9px; text-shadow: 0 1px 1px #77d58e; }



/* Nav overrides */
.navbar { margin-bottom: 0px; }



/* Form Picker Element (<select>) */
.picker { position: relative; width: auto; display: inline-block; margin: 0 0 2px 1.2%; overflow: hidden; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; font-family: "Open Sans"; font-weight: 600; height: auto; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); background-image: -webkit-linear-gradient(#ffffff, #f2f2f2); background-image: -moz-linear-gradient(#ffffff, #f2f2f2); background-image: -o-linear-gradient(#ffffff, #f2f2f2); background-image: linear-gradient(#ffffff, #f2f2f2); }
.picker:after { content: "\25BE"; z-index: 0; position: absolute; right: 8%; top: 50%; margin-top: -12px; color: #555555; }
.picker:first-child { margin-left: 0; }
.picker select { position: relative; display: block; min-width: 100%; width: 135%; height: 34px; padding: 6px 45px 6px 15px; color: #555555; border: none; background: transparent; outline: none; -webkit-appearance: none; z-index: 99; cursor: pointer; font-size: 16px; font-size: 1rem; }

.ie9 .radio.checked i, .oldie .radio.checked i { top: 2px; }
.ie9 .checkbox.checked i, .oldie .checkbox.checked i { top: 1px; }
