/*

This will have what some consider obvious notes, but for those starting out in responsive tweaking,
I'm hoping it'll help know what everything is actually doing.
*/

/* Table of Contents
==================================================
    ~ Base 960 Grid
    ~ Tablet (Portrait)
    ~ Mobile (Portrait)
    ~ Mobile (Landscape)
    ~ Clearing
*/



/* ~ Base 960 Grid
================================================== */

 .container  {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
 .column, .columns {
	 float: left;
	 display: inline;
	 margin-left: 10px;
	 margin-right: 10px;
 }
    .row { margin-bottom: 20px; }

/* Nested Column Classes */
 .column.alpha, .columns.alpha { margin-left: 0; }
 .column.omega, .columns.omega { margin-right: 0; }

    /* Base Grid */

	/* home page latest news column. tricks the image into being smaller without messing with wordpress' innate thumbnail size */
	.container .tiny.column {
		width: 100px;
		}

	/* contains the news excerpt on the home page */
	.container .news-col.column {
		width: 185px;
	}
	/* home page gaggle of boxes */
    .container .one.column  {
		width: 191px;
	}
    /* used in blog list */
    .container .two.columns {
        width: 195px;
    }

    /* used for related-boxes area of site */
    .container .three.columns {
        width: 213px;
    }
    /* changed to house logo */
    .container .four.columns {
        width: 239px;
        background: #fff;
    }
    /* changed for home page trio of boxes, news column on home page. styling for this is in style.css */
    .container .five.columns {
        width: 305px;
    }
    .container .six.columns                       { width: 340px; }
    .container .seven.columns                  { width: 400px; }
    /* used to split sections in half on home page */
    .container .eight.columns {
        width: 460px;
    }
    .container .nine.columns                     { width: 520px; }
    .container .ten.columns                       { width: 580px; }

    /* home page video side */
    .container .eleven.columns {
        width: 605px;
    }
    /* changed for general page right side */
    .container .twelve.columns {
        width: 720px;
    }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns               { width: 820px; }
    .container .fifteen.columns                  { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    /* used to create 2 columns sitewide, within text */
    .container .one-third.column {
        width: 290px;
    }
    .container .two-thirds.column              { width: 620px; }





/* #Tablet (Portrait)
================================================== */

 /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

		 .container {
			width: 768px;
			}
		.container .column,
		 .container .columns {
			 margin-left: 10px;
			 margin-right: 10px;
		 }
		.column.alpha, .columns.alpha {
			margin-left: 0;
			margin-right: 10px;
		}
		.column.omega, .columns.omega  {
			margin-right: 0;
			margin-left: 10px;
		}
		.alpha.omega {
			margin-left: 0;
			margin-right: 0;
		 }
		/* home page latest news column. tricks the image into being smaller without messing with wordpress' innate thumbnail size */
		.container .tiny.column {
			width: 50px;
		}

		/* contains the news excerpt on the home page */
		.container .news-col.column {
			width: 155px;
		}

        .container .one.column {
		width: 152px;
		}
        .container .two.columns {

        }
         /* used for related-boxes area of site */
        .container .three.columns {
            width: 149px;
        }
        .container .four.columns {
            width: 235px;
        }
        .container .five.columns {
            width: 242px;
        }
        .container .six.columns                       { width: 268px; }
        .container .seven.columns {
            width: 310px;
        }
        .container .eight.columns                    { width: 364px; }
        .container .nine.columns                     { width: 412px; }
        .container .ten.columns                       { width: 460px; }
        .container .eleven.columns {
            width: 480px;
        }
        .container .twelve.columns {
            width: 528px;
        }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns               { width: 652px; }
        .container .fifteen.columns                  { width: 700px; }
        .container .sixteen.columns                { width: 748px; }

        .container .one-third.column {
            width: 230px;
        }
        .container .two-thirds.column              { width: 492px; }

    }




/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

	@media only screen and (max-width: 767px) {
        .container { width: 100%; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .two.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 100%; }

        /* changes due to padding within */
        .container .three.columns {
            width: 273px;
        }
        /* adds margin to five */
        .container .five.columns {
            margin-top: 25px;
        }
        .container .two.columns { display:none;}
		.container .news-col.column { width: 200px;}
		.container .tiny.column { width: 70px; }


 }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .two.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 100%; }

        /* changes due to padding within */
        .container .three.columns {
            width: 393px;
        }
		.container .news-col.column { width: 300px; }

}


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }


  .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }