@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Lobster+Two:400,700italic);
@import url(http://fonts.googleapis.com/css?family=Cinzel:400);

html {
  overflow-x: hidden;
}

body {
 background: #FFFFFF;
 color: #313131;
 text-align: left !important;
 font-size: 100%;
 font-family: 'Open Sans', sans-serif;
 margin: 0px;
 padding: 0px;
}

body #pub-wrapper {
 background: #3a0649;
 border-bottom: 1px solid #3a0649;
}

#pub-container {
 max-width: 960px;
 width: 100% !important;
 padding: 5px;
}


#wrapper {
 width: 100%;
 height: 100%;
}


#content {
 padding-bottom: 55px;
}

#backr {
 height: 465px;
 display: block;
 overflow: hidden;
 position: absolute;
 left: 0px;
 width: 100%;
} 

.container {
 max-width: 960px;
 margin: 0px auto;
}

.float-left {
 float: left;
}

.float-right {
 float: right;
}

.clear {
 clear: both;
}

.break-word {
 word-wrap: break-word;
}

.padding {
 padding: 20px;
}

p {
 line-height: 150%;
}

h1, h2, h3, h4, h5, h6 {
 margin: 0px;
 font-family: inherit;
}

td, p, li {
 font-size: 100%;
 font-family: inherit;
}

a, a:hover {
 font-size: 100%;
 font-family: inherit;
}

a:link, a:visited, a:active {
 text-decoration: none;
 color: #4C0B5F;
}

a:hover{
 text-decoration: none;
 color: #FFBF00;
}

#search {
 width: 150px !important;
 font-size: inherit !important;
 top: 0px !important;
}

.divSearchBox {
 margin: 0px !important;
 padding: 0px !important;
}

.divSearchBox input {
 height: 19px !important;
 border: 1px solid #808080;
 padding: 0px !important;
 margin: 0px !important;
}

.divSearchBox .SearchButton {
 padding: 0px !important;
}

#pub-school-dropdown {
 padding: 0px 10px 0px 0px !important;
}

#pub-translate-dropdown {
 padding: 0px 0px 0px 8px !important;
}

#userlink,
#userlink a {
 color: #FFFFFF !important;
 text-transform: uppercase;
 font-family: 'open sans', sans-serif !important;
 font-weight: 400;
 top: 5px !important;
 text-decoration: none !important;
}

#userlink a:hover {
 color: #FFBF00 !important;
 font-family: 'open sans', sans-serif !important;
 font-weight: 400;
 text-decoration: none !important;
}

#pub-links {
 width: auto !important;
 position: relative;
 top: 3px;
 padding-top: 0px !important;
}

html .PublishedLinkMenu ul.pl_more_topnav li ul.pl_more li a {
 color: #000000 !important;
}

html .PublishedLinkMenu ul.pl_more_topnav li ul.pl_more li a:hover {
 color: #FFFFFF !important
}

.PublishedLinkMenu li a:link, .PublishedLinkMenu li a:active, .PublishedLinkMenu li a:visited {
 color: #FFFFFF !important;
 text-transform: uppercase;
 font-family: 'open sans', sans-serif !important;
 font-weight: 400;
 text-decoration: none !important;
}

.PublishedLinkMenu li a:hover {
 color: #FFBF00 !important;
 font-family: 'open sans', sans-serif !important;
 font-weight: 400;
 text-decoration: none !important;
}

/* ==============================
                               COLORS
============================== */

/*** Blue ***/
.dominant-color {
 background: #4C0B5F;
}

/*** Red ***/
.secondary-color {
 background: #FFBF00;
}

/* ==============================
                           HEADER STYLES
============================== */
.row {
 margin-bottom: 0px !important;
}

#header {
 height: 170px;
background: #4C0B5F;
background: #4c0b5f;
background: -moz-linear-gradient(top, #4c0b5f 0%, #5e1773 50%, #4c0b5f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c0b5f), color-stop(50%,#5e1773), color-stop(100%,#4c0b5f));
background: -webkit-linear-gradient(top, #4c0b5f 0%,#5e1773 50%,#4c0b5f 100%);
background: -o-linear-gradient(top, #4c0b5f 0%,#5e1773 50%,#4c0b5f 100%);
background: -ms-linear-gradient(top, #4c0b5f 0%,#5e1773 50%,#4c0b5f 100%);
background: linear-gradient(to bottom, #4c0b5f 0%,#5e1773 50%,#4c0b5f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c0b5f', endColorstr='#4c0b5f',GradientType=0 );
}

#header .container {
 padding: 15px 0px;
}

#header .logo {
 background-image: url(../../Servers/Server_3020143/Templates/logo.png);
 background-repeat: no-repeat;
 background-position: top left;
 height: 138px;
 width: 60%;
}

#header .logo h1 {
 margin-top: 37px;
}

#header .logo h1 a {
 color: #FFFFFF;
 font-family: 'Cinzel', serif;
 text-transform: uppercase;
 font-size: 135%;
 font-weight: 400;
 margin-left: 100px;
 line-height: 33pt;
}

#header .logo h1 a:hover {
 text-decoration: none;
 color: #f2e1f7;
}

#header .logo h2 {
 color: #FFBF00;
 font-size: 123%;
 font-weight: 300;
 margin-left: 100px;
 line-height: 20pt;
}

#header .container .float-right {
 text-align: right;
 width: 30%;
}

#header .container .float-right .first {
 margin-top: 5px;
}

#header .container .float-right a {
 color:#FFBF00;
 font-size: 105%;;
 font-weight: 300;
 width: auto;
}

#header .container .float-right span.secondary-color {
 height: 12px;
 width: 12px;
 border-radius: 50%;
 margin: 6px 5px 0px;
 display: block;
 behavior: url(https://cdnsm5-ss5.sharpschool.com/common/resources/designportfolio/sitethemes/commonlib/scripts/PIE.htc);
}

#header .container .float-right span.secondary-color span.dominant-color {
 height: 6px;
 width: 6px;
 border-radius: 50%;
 margin: 3px auto;
 display: block;
 behavior: url(https://cdnsm5-ss5.sharpschool.com/common/resources/designportfolio/sitethemes/commonlib/scripts/PIE.htc);
}

#header .container .float-right .last {
 color: #FFFFFF;
 font-size: 85%;
 font-weight: 300;
 line-height: 16pt;
 width: 100%;
}


#header .container .float-right .last span {
 float: right;
 margin-left: 5px;
}

#header .container .float-right span.phone {
 background: url(../../../Common/resources/DesignPortfolio/SiteThemes/ace/blue/phone-icon.png);
 height: 19px;
 width: 15px;
 display: block;
 margin-bottom: 3px;
}

#header span.header-phone.address {
 margin-bottom: 0px;
 font-size: 88%;
}

#header span.header-phone a {
 color: #fff;
}

#header .container .float-right span.fax {
 background: url(../../Servers/Server_3020143/Templates/fax-icon.png);
 height: 16px;
 width: 17px;
 display: block;
 margin-bottom: 13px;
}

#header .container .float-right a.fouroneone {
 background: url(../../Servers/Server_3020143/Templates/411.png);
 height: 28px;
 width: 78px;
 display: block;
 float: right;
}
/* ==============================
                           MENU STYLES
============================== */

#menubar {
 height: 35px;
 border-bottom: 1px solid #FFBF00;
 position: relative;
 margin-bottom: 25px;
}


span.ContextBar {
 color: #4C0B5F;
 text-shadow: 1px 1px #FFBF00;
}

a.ContextBar {
 color: #4C0B5F;
}

a.ContextBar:hover {
 color: #4C0B5F;
 text-decoration: none;
}


/* ==============================
                      FOOTER STYLES
============================== */

#footer {
 height: 95px;
 border-top: 6px solid #FFBF00;
 position: relative;
 
}

#footer .first {
 height: 28px;
 padding-top: 7px;
 position: relative;
 top:-40px;
 text-align: center;
 color: #4C0B5F;
 font-weight: 300;
}

#footer .last {
 position: relative;
 top: -10px;
}

#footer .first:before {
 content: "";
 display: block;
 width: 0px;
 height: 0px; 
 border-style: solid;
 border-width: 0 0 35px 25px;
 border-color: transparent transparent #FFBF00;
 position: absolute;
 left: -25px;
 top: 0px;
}

#footer .first:after {
 content: "";
 display: block;
 width: 0px;
 height: 0px; 
 border-style: solid;
 border-width: 35px 0 0 25px;
 border-color: transparent transparent transparent #FFBF00;
 position: absolute;
 right: -25px;
 top: 0px;
}

#footer .row .float-left {
 
}

#footer .row .float-left ul {
 padding: 0px;
 margin: 0px;
}

#footer .row .float-left li {
 list-style-type: none;
 color: #FFFFFF; 
 font-size: 150%;
 text-transform: uppercase;
 font-family: 'Source Sans Pro',sans-serif;
 line-height: 16pt;
}

#footer .row .float-left li span.label_skin_corporation {
 list-style-type: none;
 color: #FFBF00; 
 font-size: 50%;
 text-transform: none;
 font-family: 'open sans', sans-serif;
}

.label_skin_corporation a {
 color: inherit;
 font-size: inherit;
}

#footer-socialmedia{
 margin: 0px auto;
 width: 200px;
}

.footer-media-links {
 float: left;	
}

.footer-media-links a:hover {
 opacity: 0.75;
}

#footer span.footer-phone a {
 color: #fff;
} 

 #footer .credits {
 margin: 8px 0px;
 font-size: 12px;
 color: #ccc;
 width: 750px;
 } 

 #footer .row .float-left .credits li {
 line-height: 12px;
}
/* ==============================
                      MOBILE MENU CSS
============================== */

#mobile-bar {
 height: 32px;
 display: none;
 position: relative; 
 top: 0px;
 width: 100%;
 z-index: 2;
 text-align: left !important;
 padding-top: 3px;
 border-bottom: 1px solid #FFBF00;
 text-shadow: 1px 1px #073937;
}

.mm-list > li > a, .mm-list > li > span{
 text-align: left;
 font-size: 100%;
 font-family: inherit;
}

a#mobile-bar:link,
a#mobile-bar:hover {
 color: #FFFFFF;
 text-decoration: none;
 font-size: 112%;
 font-family: inherit;
}

/*** LOGIN SCREEN ***/

#ctl00_ContentPlaceHolder1_divLogin .tbl {
 border-collapse: inherit !important;
}

#ctl00_ContentPlaceHolder1_tblLogin {
 border-left: none;
 border-right: none;
 border-top: 10px #ececec solid;
 border-bottom: none;
 height: 180px;
 border-collapse: inherit;
}

#ctl00_ContentPlaceHolder1_tblLogin td.tbl_header {
 background: #FFF !important;
 font-family: 'open sans', sans-serif;
 font-size: 28px;
 color: #46891F;
 font-weight: 300;
 margin: 0;
 text-align: center;
 border: none !important;
 text-transform: capitalize;
}

span#ctl00_ContentPlaceHolder1_lblLogin {
 display: none;
}

#ctl00_ContentPlaceHolder1_tblLogin td.tbl_row_data input {
 width: 50%;
 padding: 4px;
 font-size: 10pt;
 margin-left: 10px;
 border: 1px solid #CCCCCC;
}


#ctl00_ContentPlaceHolder1_tblLogin td.tbl_row_text {
 color: #333;
 font-family: 'open sans',sans-serif;
 font-size: 20px;
 font-weight: 300;
 margin: 0 0 8px;
}


#ctl00_ContentPlaceHolder1_tblLogin td.tbl_row_data .loginBtn {
 background: none repeat scroll 0 0 #3C3C3C;
 color: #FFF;
 font-family: 'open sans', sans-serif;
 font-size: 20px;
 font-weight: normal;
 letter-spacing: 0.02em;
 padding: 10px 20px;
 position: relative;
 text-decoration: none;
 border-radius: 4px;
 border: none !important;
}

#ctl00_ContentPlaceHolder1_tblLogin td.tbl_row_data .loginBtn:hover {
 color: #CCCCCC;
}

a.lkforgotpassword:link {
 color: #909090;
}

a.lkforgotpassword:hover {
 color: #7aba43;
 text-decoration: none;
}

.Login {
 height: 180px !important;
 padding: 8px !important;
 background: #ececec;
 border-radius: 10px !important;
 width: 100% !important;
}

div.Main {
 width: 50% !important;
}

/* ==============================
                      MEDIA QUERIES
============================== */

@media screen and (max-width: 950px) {
 .RadMenu_PageControls, #divMenuOffset {
  display: none;
 }

 .container {
  margin: 0px 20px;
 }

}

@media screen and (max-width: 900px) {
 #pub-wrapper {
  display: none;
 }
 
 #mobile-bar {
  display: block;
 }

 #menubar {
  display: none;
 }

 .homepage .one {
  height: 320px;
  padding-top: 125px;
 }

 .homepage .one .motto .first {
  
 }

 .three .title span:before, .three .title span:after {
  width: 30%;
 }

 .homepage .three .col {
  width: 31.5%;
 }

}

@media screen and (max-width: 850px) {
 .homepage .one .welcome-message {
  font-size: 220%;
 }
 
 .homepage .one .motto .container {
  width: 95%;
 }

 .tbl_mini_calendar {
  padding: 20px 20px;
 }
 
 #footer {
  height: auto;
 }

 #footer .row .float-left {
  width: 65%;
 }

 #footer .row .float-left li span.label_skin_corporation {
  line-height: 7pt;
 }
}

@media screen and (max-width: 800px) {
 #header {
  height: 160px;
 }

 #header .container {
  padding: 11px 0px;
 }

 #header .logo h1 a {
  font-size: 135%;
 }

 #header .logo h2 {
  font-size: 123%;
 }

 #header .container .float-right {
  width: 35%;
 }
 
 .featured-photo {
  height: 140px;
 }

}

@media screen and (max-width: 768px) {
 .featured-photo {
  height: 125px;
 }
 
 .tbl_mini_calendar {
  padding: 10px 0px;
 }

 .featured-photo {
  height: 150px;
 }

 .featured-photo img {
 }

 .subpage #sidebar {
  width: 35%;
 }

 .subpage #main-content {
  width: 65%;
 }
}


@media screen and (max-width: 700px) {

 #backr {
  height: 390px;
 }

 #header {
  height: 145px;
 }

 #header .logo {
  background-size: 53px;
  background-position: 0px 5px;
  height: 95px;
 } 

 #header .logo h1 a {
  font-size: 100%;
  margin-left: 66px;
 }

 #header .logo h2 {
  font-size: 88%;
  line-height: 12pt;
  margin-left: 66px;
 }

 #header .container .float-right {
  width: 40%;
 }

 .homepage .one {
  padding-top: 55px;
  height: 310px;
 }

 .homepage .one .welcome-message {
  font-size: 175%;
 }

 .homepage .one .motto .container {
  font-size: 87%;
 }

 .three .title span:before, .three .title span:after {
  width: 23%;
 }
 
 .quicklinks ul li {
  margin: 10px 20px;
 }

 .homepage .three .first {
  float: none !important;
  width: 100%;
  margin-bottom: 20px;
 }

 .homepage .three .middle {
  margin: 0px 20px 0px 0px;
  width: 47%;
 }

 .homepage .three .last {
  margin: 0px;
  width: 47%;
 }

 .tbl_mini_calendar {
  padding: 10px 20px;
 }

 #footer .first:after, #footer .first:before {
  display: none;
 }

 #header .logo h1 {
  margin-top: 0px;
 }
 
}

@media screen and (max-width: 640px) {
 #header {
  height: auto;
 }

 #header .container .float-right a {
  font-size: 82%;
  margin-bottom: 5px;
 }

 .quicklinks {
  width: 70%;
  margin: 0px auto;
 }

 .quicklinks ul li {
  margin: 10px 5px;
 }

 
 #footer .container {
  margin: 0px;
 }

 #footer .first {
  height: auto;
  padding: 7px 20px;
  top: 0px;
  position: initial;
  font-size: 90%
 }

 #footer .last {
  width: 95%;
  margin: 0px auto;
  padding: 10px 0px;
  top: 0px;
  position: initial;
 }

 #footer .row .float-left {
  width: 50%;
  padding: 0px 10px 0px 10px;
 }
}

@media screen and (max-width: 550px) {
 #header .container {
  padding: 15px 0px;
 }
 
 #header .container .float-right .first {
  margin-top: 0px;
 } 

 #header .container .float-right {
  display: none;
 }

 #header .logo {
  background-image: none !important;
  height: auto;
 }

 #header .logo h1 a {
  font-size: 120%;
  margin-left: 0px;
 }
 
 #header .logo h2 {
  font-size: 100%;
  position: relative;
  top: -8px;
  margin-left: 0px;
 }
 
 #header .logo {
  float: none;
  width: 100%;
 }

 #header .container .float-right {
  width: 100%;
 }

 .homepage .one {
  padding-top: 10px;
  height: 355px;
 }

 .homepage .one .welcome-message {
  font-size: 200%;
 }

 .homepage .one .motto .container {
  font-size: 94%;
 }

 .quicklinks {
  width: 90%;
 }

 .subpage #sidebar {
  display: none;
 }

 .subpage #main-content {
  width: 100%;
  float: none;
 }

 .margin-left {
  margin-left: 0px;
 }


}

@media screen and (max-width: 480px) {
 .homepage .one {
  padding-top: 25px;
  height: 290px;
 }

 .homepage .one .welcome-message {
  display: none;
 }
 
 .quicklinks {
  width: 100%;
 }

 #backr {
  height: 340px;
 }

 .featured-photo {
  height: 100px;
 }

 .featured-photo img {
  width: 100%;
 }

 .featured-summary {
  display: none;
 }

 .three .title span:before, .three .title span:after {
  display: none;
 }

 .homepage .three .middle,
 .homepage .three .last {
  width: 100%;
 }

 .homepage .four .float-left,
 .homepage .four .float-right  {
  width: 100%;
  float: none;
 }
 
 #footer .last {
  width: 100%;
 }

 #footer .row .float-left {
  width: auto;
  float: none;
 }

 #footer-socialmedia {
  float: none;
  margin: 10px auto;
 }

 #breadcrumbs a {
  background: none transparent;
  color: #093349;
  text-decoration: underline;
  display: inline-block
 }
 
 #breadcrumbs a:hover {
  background: none transparent;
  color: #093349;
  text-decoration: none;
 }
 
 #breadcrumbs a:after {
  display: none;
 }

}
