/**
 * @file
 * Positioning for responsive layout .
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com -- 
 *
 * NOTE: This layout does not use Zen Grids because the outcome was too unreliable, instead it uses percentages, so it is still responsive.
 * If you would like to use Zen Grids, take a look at the responsive-sidebars - Copy.scss file in the layouts folder - Tina
 */
/*
 * Center the page and set the max-width to 960px in the content areas -------------------------------------------------------------------
 */
#wrapper, #pitt-header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#wrapper {
	background: #fff;
}
#footer-inside {
	width: 100%;
}
#main {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#header {
	width: 100%;
	background: #212656;
}
.header-wrapper {
	max-width: 1000px;
	margin: 0 auto;
}

/*Basic padding and margins to main areas --- */
#content, .right-sidebar, .left-sidebar {
  margin-bottom: 30px;
}

/* Regions inside the content area --- */
/* No Sidebars --- */
#content {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  padding: 0;
}

/* Left Sidebar Only --- */
.sidebar-first .left-sidebar {
  float: left;
  margin-left: 4%;
  width: 24.5%;
  margin-right: 2%;
}
.sidebar-first #content {
  float: left;
  margin-left: 0%;
  margin-right: 4%;
  width: 60.5%;
  padding: 0 3%;
}

/* Right Sidebar Only --- */
.sidebar-second .right-sidebar {
  float: left;
  margin-left: 60.5%;
  width: 29%;
}
.sidebar-second #content {
  float: left;
  margin-left: 0;
  margin-right: -60.5%;
  width: 58%;
  padding: 0 3% 0 5%;
}

/* Left & Right Sidebars --- */
.two-sidebars .left-sidebar {
  float: left;
  margin-left: 4%;
  width: 24.5%;
  margin-right: 2%;
}
.two-sidebars .right-sidebar {
  float: left;
  margin-left: 2%;
  width: 24.5%;
  margin-right: 4%;
}
.two-sidebars #content {
  float: left;
  width: 32%;
  margin: 0;
  padding: 0 3%;
}

/* Min-Width 960px DESKTOP  -------------------------------------------------------------------
*/
@media all and (min-width: 960px) {
  /*Set with a min-height for the background images */
  /*#header-wrapper{min-height:124px;}
  #footer-wrapper{min-height:155px;}
  #main{min-height:800px;}*/
}
/*Custom breakpoint to modify the one-column layout at 650px -- */
@media all and (max-width: 650px) {
  /* Regions inside the content area --- */
  /* No Sidebars --- */
  #content {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    padding: 0;
  }

  /* Left Sidebar Only --- */
  .sidebar-first .left-sidebar {
    float: right;
    margin-left: 5%;
    width: 90%;
    margin-right: 5%;
  }
  .sidebar-first #content {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    padding: 0;
  }

  /* Right Sidebar Only --- */
  .sidebar-second .right-sidebar {
    float: right;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  .sidebar-second #content {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding: 0;
  }

  /* Left & Right Sidebars --- */
  .two-sidebars .left-sidebar {
    float: right;
    margin-left: 4%;
    width: 92%;
    margin-right: 4%;
  }
  .two-sidebars .right-sidebar {
    float: right;
    margin-left: 4%;
    width: 92%;
    margin-right: 4%;
  }
  .two-sidebars #content {
    margin-left: 4%;
    margin-right: 4%;
    width: 89%;
    padding: 0 3%;
  }

  /*Navigation and Header--- */
  .region-navigation #block-menu-block-1 ul li {
    display: block;
  }
  .region-navigation #block-menu-block-1 ul li a {
    border: none;
    padding: 0;
    margin: 0;
  }

  .region-navigation #block-menu-block-1 ul li.first a {
    border-left: none;
    margin-left: 0;
  }

  #block-views-feature-image-story-block-1 .views-slideshow-controls-bottom {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
  }
}
/* Min-Width 480px and max-width 959px - TABLETS  -------------------------------------------------------------------
*/
/* To block older browsers from seeing an iPhone or Android phone style sheet use the keyword 'only' in front of screen --- */
/*Mobile Landscape --- */
@media only screen and (min-device-width : 321px) {
  /* Styles */
}
/*Mobile Portrait --- */
/*Mobile Portrait --- */
/* Listing of different media types:

all
    Suitable for all devices. 
braille
    Intended for braille tactile feedback devices. 
embossed
    Intended for paged braille printers. 
handheld
    Intended for handheld devices (typically small screen, limited bandwidth). 
print
    Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. 
projection
    Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media. 
screen
    Intended primarily for color computer screens. 
speech
    Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details. 
tty
    Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type. 
tv
    Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available). 

*/