@media (min-width: 301px) and (max-width: 767px) {
  .overflow-125 { height: 75px; overflow: hidden; }
  .overflow-100 { height: 55px; overflow: hidden; }

  header { border-top: 15px solid #e30c00; 
    position:relative;
    z-index:50;
	}
	.uofcheader { margin-top: -15px; }
    .pagetop {  min-height: 250px; }
    .picturehead {padding-top: 50px; padding-left: 15px;}
}
@media (min-width: 768px) and (max-width: 991px) {
  .overflow-125 { height: 125px; overflow: hidden; }
  .overflow-100 { height: 100px; overflow: hidden; }
  
  div.red-border-right, div.panel-body.red-border-right { border-right: 2px solid #e30c00; }
  
  header { border-top: 30px solid #e30c00; 
    position:relative;
    z-index:50;
	}
  .uofcheader { margin-top: -30px; }
  .pagetop {  min-height: 100px; }
  .picturehead {padding-top: 0px; padding-left: 15px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .overflow-125 { height: 125px; overflow: hidden; }
  .overflow-100 { height: 100px; overflow: hidden; }
  
  div.red-border-right, div.panel-body.red-border-right { border-right: 2px solid #e30c00; }
  
  header { border-top: 30px solid #e30c00; 
    position:relative;
    z-index:50;
	}
  .uofcheader { margin-top: -30px; }
  .pagetop {  min-height: 180px; }
  .picturehead {padding-top: 25px; padding-left: 15px;}
}

@media (min-width: 1200px) {
  .overflow-125 { height: 125px; overflow: hidden; }
  .overflow-100 { height: 100px; overflow: hidden; }
  
  div.red-border-right, div.panel-body.red-border-right { border-right: 2px solid #e30c00; }
  
  header { border-top: 30px solid #e30c00; 
    position:relative;
    z-index:50;
	}
  .uofcheader { margin-top: -30px; }
  .pagetop {  min-height: 250px; }
  
  .picturehead {padding-top: 50px; padding-left: 15px;}

}

body { font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 16px;  background-color: #c4c3bb; }

hr.dotted-rule {
  width: 100%;
  border: 0;
  border-bottom: 3px dotted #8d827a;
}

p { font-size: 16px; }
  
.panel p {   font-size: inherit;
  font-family: inherit;
  font-weight: lighter;
}

.panel { font-family: inherit; }
.panel h1 { font-size: 36px; font-weight: bold; }
.panel h2 { font-size: 30px; font-weight: bolder; }
.panel h3 { font-size: 24px; }
.panel h4 { font-size: 18px; }
.panel h5 { font-size: 14px; }
.panel h6 { font-size: 12px; }

.item-desc p {font-size: inherit; font-weight: light;}

.panel-heading.panel-white { background-color: #ffffff; }

    Rules
    Computed
    Animations
    Fonts

*::before, *::after {

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
element {

}
* {

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}
a.text-primary:hover, a.text-primary:focus { color:#f47c00; }

/* override panel styling */

.panel-heading h3, .panel-heading .h3, .panel-heading hr, .panel-heading h4, .panel-heading .h4 { margin-top:10px; margin-bottom: 10px; }

.btn-default {color: #e30c00; border-color: #e30c00; }
.btn-default:hover {color: #ffffff; border-color: #f47c00; background-color: #f47c00;}


.header-reverse { color: white; background-color: #7b7f77; }
.header-outage { color: white; background-color: #e30c00; }
.header-news { color: white; background-color: #fca311; }

/* override UCalgary pre-footer margins */
#pre-footer { margin-left: -15px; margin-right: -15px; }

/* widget filter styling */

.uc-itemfilter a { color:#e30c00; }
.uc-itemfilter a:hover { color:#f47c00; } 

.uc-itemfilterstatic { color:#7b7f77; }

.uc-itemfilter-selected a { font-weight: bold; border-bottom: 4px solid #e30c00;}
.uc-itemfilter-selected a:hover { border-bottom: 4px solid #f47c00; }

div.uc-itemfilter { margin-bottom: 15px; }

/* handled in media queries above
.overflow-125 {
    height: 125px;
    overflow: hidden;
} 
*/

/* widget list styling */
.uc-cat-list-item { padding: 10px; } 
.uc-cat-list-item-selected { font-weight:bold; color: #ffffff; background-color: #e30c00; padding: 10px; }

.uc-cat-list-item a { color: #6F6258; }
.uc-cat-list-item a:hover { color: #f47c00; }

.uc-cat-list-item-selected a { font-weight:bold; color: #ffffff; } 
.uc-cat-list-item-selected a:hover { color: #ffffff; } 

.toggle-info:before {
    font-family: "Glyphicons Halflings";
    content: "\e114";
    margin-right: 10px;
}
// Icon when the collapsible content is hidden 
//.toggle-info.collapsed:after {
//    content: "\e080";
//  }


.opacity-80 { opacity: 0.9; }
.opacity-none { opacity: 1.0; }


button.btn.btn-search { border: none; background-color: white; color: #e30c00; }
button.btn.btn-search:hover { background-color: #fca311; color: white; }

.panel-grey { background-color: #e4e4e4; border-radius: 25px; }
.panel-small-top { padding-top: 5px; }
.panel-small-bottom { padding-bottom: 5px; }


h1, h2 { color:white; }
.roundedtop { border-top-left-radius: 25px; border-top-right-radius: 25px; }
.roundedbottom { border-bottom-left-radius: 50px; border-bottom-right-radius:50px; }
.rowoffset { padding-top: 10px; }

.page-width { max-width: 1200px; }
.rowbottomoffset { padding-bottom: 25px; }
.rowoffset-50 { padding-top: 25px; }
.rowtopoffset { padding-top: 25px; }

.page-top { margin-top:50px; }
.page-bottom { margin-bottom:50px; }


.whiterow { background-color: #ffffff; }

section.padding-top { padding-top: 0px; }

sp-page-row > div.row { background-color: white; margin-left: -5px; margin-right: -25px; }
sp-page-row > div.row.picture { background-color: transparent; }
sp-page-row > div.row.home-search { background-color:#f47c00; }

sp-page-row > div.row.roundedtop { border-top-left-radius: 50px; border-top-right-radius:50px; }
sp-page-row > div.row.roundedbottom { border-bottom-left-radius: 50px; border-bottom-right-radius:50px; }

/* handled in media queries above
header { border-top: 30px solid #e30c00; 
    position:relative;
    z-index:50;
}
*/

section.page {
  position:relative;
  z-index:30;
}


//div.popover { width: 100px; }

.pagination { margin: 0px; }
.pagination > li.active a {color:white; border-color: #e30c00; background-color: #e30c00;}

div.panel-heading.header-outage { color: white; background-color: #e30c00; }
div.panel-heading.header-news { color: white; background-color: #fca311; }