/******************************************************************
Site Name: PIRC
Author: Ant Jarrett & Richard Hawkins

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the seperate functions for each media query. The base mobile
stylesheet is called in the header, so here we're working up from
there. To edit the css, just find the corresponding LESS file.
******************************************************************/
/*
Base.css contains the main mobile styles and is called in the
header. This way mobile devices get ONLY the styles that apply
to them. No muss, no fuss.
normalize.css and the mixins are also called within that base file
let's now call the FUNCTIONS for these different stylesets. This
doesn't load the CSS, the CSS is loaded insid the media queries.
*/
/******************************************************************
Site Name:
Author:

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to
481px because at 480px it would load on a landscaped iPhone.
This isn't ideal because then you would be loading all those
extra styles on that same mobile connection.

A word of warning. This size COULD be a larger mobile device,
so you still want to keep it pretty light and simply expand
upon your base.less styles.

******************************************************************/
/*
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) */
/******************************************************************
Site Name: 
Author: 

Stylesheet: Just larger than iPad

This is the desktop size. It's larger than an iPad so it will only
be seen on the Desktop. 

******************************************************************/
/* 
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) */
/******************************************************************
Site Name:
Author:

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
/*
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) */
/******************************************************************
Site Name:
Author:

Stylesheet: Super Large Monitor Stylesheet

You can add some advanced styles here if you like. This kicks in
on larger screens.

******************************************************************/
/*
wrapping styles in a function so we can call it
inside of media queries. We also do this so we can
call this function in the ie.less file. Which means
IE will get all the styles without any hefty work.
*/
/* end of the function (DO NOT DELETE) */
/******************************************************************
AVERAGE VIEWING SIZE
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/
@media only screen and (max-width: 649px) {
  /* styles in 481up.less */
  /* DO NOT DELETE */
  /*********************
GENERAL STYLES
*********************/
  #box,
  div#post-1196 {
    margin: -20px -20px 20px;
  }
  /*********************
POSTS & CONTENT STYLES
*********************/
  /* at this larger size, we can start to align images */
  .alignleft,
  .attachment-alignleft,
  img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left;
  }
  .alignright,
  img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right;
  }
  .aligncenter,
  img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both;
  }
}
/* end of media query */
/******************************************************************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 418px) and (max-width: 649px) {
  /* styles in 481to767.less */
  /* DO NOT DELETE */
  #searchform {
    margin-bottom: 30px;
  }
  .widget li.cat-item a {
    font-size: 1em;
  }
}
/* end of media query */
/******************************************************************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 650px) and (max-width: 1139px) {
  /* styles in 768to1239.less */
  /* DO NOT DELETE */
  /*********************
GENERAL STYLES
*********************/
  #main {
    margin-top: 89px;
  }
  body.search #main {
    margin-top: 113px;
  }
  h1.h2 {
    margin-left: -30px;
    margin-right: -30px;
    font-size: 2.7em;
  }
  h1 span#comment_number a {
    margin: -15px 0 0 -40px;
  }
  #container {
    max-width: 1130px;
    margin-left: 0;
  }
  /* provides max width of #main and so site centres when above - important.  sum of total size left-column + main maximum size etc. */
  #sidebar1 {
    display: none;
  }
  /* turn off right sidebar widgets */
  /* layout: */
  /* #leftside {float:left; width:250px;} */
  #leftside {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
  }
  #leftside #sidebar1 {
    display: block;
    width: 250px;
    padding: 20px 0px;
  }
  #content {
    margin-left: 290px;
    margin-right: 20px;
    min-height: 2110px;
  }
  .footer {
    margin-top: -120px;
  }
  /*********************
HEADER SYTLES
*********************/
  /*********************
NAVIGATION STYLES
*********************/
  /* .menu is clearfixed inside mixins.less */
  .menu {
    /* end .menu ul */
  }
  .menu ul {
    background: #eee;
    /* end .menu ul li */
    /* highlight current page */
    /* end current highlighters */
  }
  .menu ul li {
    float: left;
    position: relative;
    /*
				plan your menus and drop-downs wisely.
				*/
    /* showing sub-menus */
  }
  .menu ul li a {
    border-bottom: 0;
    /*
					you can use hover styles here even though this size
					has the possibility of bieng a mobile device.
					*/
  }
  .menu ul li a:hover,
  .menu ul li a:focus {
    background-color: #dedede;
  }
  .menu ul li ul.sub-menu,
  .menu ul li ul.children {
    width: 200px;
    border: 1px solid #ccc;
    border-top: 0;
    position: absolute;
    display: none;
    z-index: 8999;
    /* highlight sub-menu current page */
  }
  .menu ul li ul.sub-menu li,
  .menu ul li ul.children li {
    /*
						if you need to go deeper, go nuts
						just remember deeper menus suck
						for usability. k, bai.
						*/
  }
  .menu ul li ul.sub-menu li a,
  .menu ul li ul.children li a {
    padding-left: 10px;
    border-right: 0;
    display: block;
    width: 180px;
    border-bottom: 1px solid #ccc;
  }
  .menu ul li ul.sub-menu li:last-child a,
  .menu ul li ul.children li:last-child a {
    border-bottom: 0;
  }
  .menu ul li:hover ul {
    top: auto;
    display: block;
  }
  /* end .menu */
}
/* end of media query */
/******************************************************************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1140px) {
  /* styles in 1240up.less */
  /* DO NOT DELETE */
  /* #leftside #sidebar1 {display:none;}  */
  /*  - do not display widgets on left column */
  /* layout side columns */
  h1.h2 {
    margin-left: -30px;
    margin-right: -30px;
    font-size: 2.7em;
  }
  h1 span#comment_number a {
    margin: -15px 0 0 -40px;
  }
  #main {
    margin-top: 89px;
  }
  body.search #main {
    margin-top: 113px;
  }
  #leftside {
    position: absolute;
    top: 0px;
    left: -300px;
    width: 250px;
  }
  #sidebar1 {
    display: block;
    position: absolute;
    top: 123px;
    right: -300px;
    width: 250px;
  }
  #container {
    width: auto;
    max-width: 800px;
    margin-right: 300px;
    margin-left: 300px;
  }
  /* sets container to max width of main column */
  #content {
    min-height: 1200px;
  }
  .footer {
    margin-left: -300px;
    margin-top: -120px;
  }
  .lt-ie9 #container {
    width: 600px;
    max-width: none;
  }
}
/* end of media query */
/******************************************************************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
******************************************************************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    -ms-filter: none !important;
  }
  a,
  a:visited {
    color: #444 !important;
    text-decoration: underline;
    /* show links on printed pages */
    /* show title too */
  }
  a:after,
  a:visited:after {
    content: " (" attr(href) ")";
  }
  a abbr[title]:after,
  a:visited abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  /* hide content people who print don't need to see */
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */