/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Forms
	#Misc */
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
		
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block
}

body {
    line-height:1
}

ol,ul {
    list-style:none
}

blockquote,q {
    quotes:none
}

blockquote:before,blockquote:after,q:before,q:after {
    content:'';
    content:none
}

table {
    border-collapse:collapse;
    border-spacing:0
}

.skipnav, .skipnav a:hover, .skipnav a:visited {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow:hidden;
width:1px;
height:1px;
}

.skipnav a:active, .skipnav a:focus {
position:static !important;
width:auto;
height:auto;
outline: thin dotted black;
}

.skipnav {
	text-align:left;
}

#sitemap, .skipnav a {
	height:1px;
	left:-10000px;
	overflow:hidden;
	position:absolute;
	width:1px;
}

.skipnav a:focus, .skipnav a:active {
	height:auto;
	left:0;
	overflow:visible;
	position:static;
	text-decoration:underline;
	width:auto;
}

/* #Basic Styles
================================================== */
html {
	background-image:url('../images/bg_img.jpg');
	background-color: #1b1b1b;
    font-size:17px;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    overflow-y:scroll
}

@media (max-width: 900px) {
html {
    font-size:15px
}
}

@media (max-width: 400px) {
html {
    font-size:14px
}
}

body {
    font:1em Arial,Helvetica,sans-serif;
    font:1rem Arial,Helvetica,sans-serif;
    color:#999;
    margin:0;
}
}

.scroll-y {
    overflow-y:auto
}

/* #Typography
================================================== */
h1,h2,h3,h4,h5,h6 {
    color:#999;
    font-family:'PT Sans Narrow',Arial,Helvetica,sans-serif;
    letter-spacing:.03em;
    font-weight:400
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    font-weight:inherit
}

h1 {
    font-size:46px;
    line-height:50px;
    margin-bottom:5px;
}

h2 {
    font-size:35px;
    line-height:40px;
    margin-bottom:10px
}

h3 {
    font-size:28px;
    line-height:34px;
    margin-bottom:8px
}

h4 {
    font-size:21px;
    line-height:30px;
    margin-bottom:4px
}

h5 {
    font-size:17px;
    line-height:24px
}

h6 {
    font-size:14px;
    line-height:21px
}

.subheader {
    color:#777
}

/* Modules will scale with document */
.header {
    font-size:1rem;
}

.footer {
    font-size:.75rem
}

.sidebar {
    font-size:.85rem
}

/* Type will scale with modules */
h1 {
    font-size:2.2rem
}

h2 {
    font-size:1.7rem
}

h3 {
    font-size:1.4rem
}

p {
    font-size:.9rem;
    margin:0 0 12px
}

p img {
    margin:0
}

p.lead {
    font-size:21px;
    line-height:27px;
    color:#777
}

em {
    font-style:italic
}

strong {
	font-weight:700;
}

small {
    font-size:80%
}

.dotted,abbr[title],dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help
}

sup {
    top:-.5em
}

sub {
    bottom:-.25em
}

/*	Blockquotes  */
blockquote,blockquote p {
    font-size:17px;
    line-height:24px;
    color:#777;
    font-style:italic
}

blockquote {
    margin:0 0 20px;
    padding:9px 20px 0 19px;
    border-left:1px solid #ddd
}

blockquote cite {
    display:block;
    font-size:12px;
    color:#555
}

blockquote cite:before {
    content:"\2014 \0020"
}

blockquote cite a,blockquote cite a:visited,blockquote cite a:visited {
    color:#555
}

hr {
    border:solid #ddd;
    border-width:1px 0 0;
    clear:both;
    background-color:#000;
    color:#000;
    height:1px
}

footer {
	margin-top: 10px;
	border-top: 1px solid #666;
	
}

/* #Links
================================================== */
a,a:active,a:focus,a:hover,label {
    cursor:pointer;
    cursor:hand;
    outline:0 none;
}

a,a:visited {
    text-decoration:underline;
    outline:0
}

a:hover,a:focus {

}

p a,p a:visited {
    line-height:inherit
}

/* #Lists
================================================== */
ul,ol {
    margin-bottom:20px
}

ul {
    list-style:none outside
}

ol {
    list-style:decimal
}

ol,ul.square,ul.circle,ul.disc {
    margitopn-left:30px
}

ul.square {
    list-style:square outside
}

ul.circle {
    list-style:circle outside
}

ul.disc {
    list-style:disc outside
}

ul ul,ul ol,ol ol,ol ul {
    margin:4px 0 5px 30px;
    font-size:90%
}

ul ul li,ul ol li,ol ol li,ol ul li {
    margin-bottom:6px
}

li {
    line-height:12px;
    margin-bottom:12px
}

ul.large li {
    line-height:21px
}

li p {
    line-height:21px
}

/* #Images
================================================== */
img.scale-with-grid {
    max-width:100%;
    height:auto
}

img {
    -ms-interpolation-mode:bicubic
}

img,form {
    border:0;
    display:inline
}

/* #Buttons
================================================== */
.button,button,input[type="submit"],input[type="reset"],input[type="button"] {
    background:#eee;
/* Old browsers */
    background:#eee -moz-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
/* FF3.6+ */
    background:#eee -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,.2)),color-stop(100%,rgba(0,0,0,.2)));
/* Chrome,Safari4+ */
    background:#eee -webkit-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
/* Chrome10+,Safari5.1+ */
    background:#eee -o-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
/* Opera11.10+ */
    background:#eee -ms-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
/* IE10+ */
    background:#eee linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);
/* W3C */
    border:1px solid #aaa;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    color:#444;
    display:inline-block;
    font-size:.8em;
    font-size:.8rem;
    font-weight:700;
    text-decoration:none;
    text-shadow:0 1px rgba(255,255,255,.75);
    cursor:pointer;
    margin:10px 0;
    line-height:normal;
    padding:8px 10px;
    font-family:Arial,verdana,sans-serif
}

.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover {
    color:#222;
    background:#ddd;
/* Old browsers */
    background:#ddd -moz-linear-gradient(top,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
/* FF3.6+ */
    background:#ddd -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,.3)),color-stop(100%,rgba(0,0,0,.3)));
/* Chrome,Safari4+ */
    background:#ddd -webkit-linear-gradient(top,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
/* Chrome10+,Safari5.1+ */
    background:#ddd -o-linear-gradient(top,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
/* Opera11.10+ */
    background:#ddd -ms-linear-gradient(top,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
/* IE10+ */
    background:#ddd linear-gradient(top,rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);
/* W3C */
    border:1px solid #888;
    border-top:1px solid #aaa;
    border-left:1px solid #aaa
}

.button:active,button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active {
    border:1px solid #666;
    background:#ccc;
/* Old browsers */
    background:#ccc -moz-linear-gradient(top,rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);
/* FF3.6+ */
    background:#ccc -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,.35)),color-stop(100%,rgba(10,10,10,.4)));
/* Chrome,Safari4+ */
    background:#ccc -webkit-linear-gradient(top,rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);
/* Chrome10+,Safari5.1+ */
    background:#ccc -o-linear-gradient(top,rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);
/* Opera11.10+ */
    background:#ccc -ms-linear-gradient(top,rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);
/* IE10+ */
    background:/* W3C */
#ccc linear-gradient(top,rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%)
}

.button.full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width {
    width:100%;
    padding-left:0!important;
    padding-right:0!important;
    text-align:center
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,input::-moz-focus-inner {
    border:0;
    padding:0
}

/* #Forms
================================================== */

input {
	max-width:100%
}

fieldset {
    margin-bottom:20px
}

input[type="text"],input[type="password"],input[type="email"],textarea,select {
    border:1px solid #ccc;
    padding:6px 4px;
    outline:none;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    font:13px Arial,verdana,sans-serif;
    color:#777;
    margin:0;
    width:210px;
    max-width:100%;
    display:block;
    margin-bottom:20px;
    background:#fff
}

input.input,select.select {
    background-color:#fff;
    color:#000;
    font-size:1em;
    vertical-align:middle;
    padding:.1em
}

select {
    margin:2px 0 10px;
    background-color:#fcfcfc;
    display:block;
    padding:0
}

input[type=url],input[type=date],input[type=tel],input[type=number],input[type=text],input[type=search],input[type=email],input[type=password],input.tel,input.number,input.text,input.email,input.search,input.password {
    min-width:3em;
    color:#000;
    margin:2px 0 10px;
    background-color:#fcfcfc important!;
    display:block;
    -webkit-box-shadow:0 0 0 50px #fcfcfc inset
}

input:-webkit-autofill,input:-webkit-autofill:focus {
    color:#000;
    background-color:#fcfcfc!important;
    -webkit-box-shadow:0 0 0 50px #fcfcfc inset;
    -webkit-text-fill-color:#000
}

input[type=url]:focus,input[type=date]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=text]:focus,input[type=search]:focus,input[type=email]:focus,input[type=password]:focus,input.tel:focus,input.number:focus,input.text:focus,input.email:focus,input.search:focus,input.password:focus {
    background-color:#fcfcfc!important;
    -webkit-box-shadow:0 0 0 50px #fcfcfc inset
}

input[type="text"],input[type="search"],input[type="password"],input[type="email"],input[type="number"],input[type="tel"],input[type="date"],input[type="url"] {
    outline:solid transparent
}

input[type="text"]:focus,input[type="search"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="tel"]:focus,input[type="date"]:focus,input[type="url"]:focus {
    outline:0
}

input[type="search"] {
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}

input:-webkit-autofill {
    color:#fcfcfc!important
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border:0;
    padding:0;
    -webkit-appearance:none
}

textarea {
    color:#000;
    margin:2px 0 10px;
    background-color:#fcfcfc;
    display:block;
    font:1em Arial,Verdana,sans-serif;
    min-height:60px;
	max-width:100%
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0;
    background-color:#fcfcfc!important
}



input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus {
    border:1px solid #aaa;
    color:#444;
    -moz-box-shadow:0 0 3px rgba(0,0,0,.2);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
    box-shadow:0 0 3px rgba(0,0,0,.2)
}


label,legend {
    display:block;
    font-weight:700;
    font-size:13px
}

input[type="radio"] {
    margin:0 .5em 0 0;
    display:inline
}

input[type="checkbox"] {
    margin-right:.5em;
    display:inline
}

label span,legend span {
    font-weight:400;
    font-size:13px;
    color:#444
}

/* #Misc
================================================== */
.remove-bottom {
    margin-bottom:0!important
}

.half-bottom {
    margin-bottom:10px!important
}

.add-bottom {
    margin-bottom:20px!important
}

/* Mobile Menu
================================================== */

  #mobile { width: 100%; display: block; position: relative; }
  #mobile-open { cursor: pointer; display: block; z-index: 91; position: absolute; top: -5px; right: 0; padding: 10px; }
  #mobile-close { cursor: pointer; display: none; z-index: 91; position: absolute; top: -5px; right: 0; padding: 10px; }
  #mobile-overlay { display: none; }
  #main-menu-mobile { display: block; text-align: center; border-top: none; border-bottom: none; margin: 10px auto 10px; }

  
/* Misc
================================================== */

	.add-top { margin-top: 30px !important; }
	.add-bottom { margin-bottom: 30px !important; }
  .half-top { margin-top: 15px !important; }
  .half-bottom { margin-bottom: 15px !important; }
  .twenty-top { margin-top: 20px !important; }
  .twenty-bottom { margin-bottom: 20px !important; }
	.remove-top { margin-top: 0 !important; }
	.remove-bottom { margin-bottom: 0 !important; }
  .remove { margin: 0 !important; }
	.clear { clear: both; }
	.left { float: left !important; }
	.right { float: right !important; }
  .center { text-align: center; }
  .center p { text-align: center; }
  .padding { padding: 0 20px; }
  .mobile-only { display: none !important; }
  .screen-only { display: block !important; }
  

/* #Core
================================================== */

article {
	padding: 0 1em;
	padding: 0 1rem;
	float: right; 
}

article a {
    color:#999;
	text-decoration: underline;
}

article a:hover {
	color: #0066cc;
	text-decoration: none;
}

article p {
text-align:justify;
text-justify:inter-word;
}

#side_nav {
	background-color: #000;
	color: #FFF;
	padding: .7em .4em .4em 1em;
	padding: .7rem .4rem .4rem 1rem;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border: 2px solid #fff;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

#side_nav a, #side_nav a:visited {
	color: #FFF;
	text-decoration: none;
    opacity: 10;
    filter: alpha(opacity=100);
}

#side_nav a:hover, #side_nav a:focus {
 text-decoration: none;
	color: #0066cc;

}
#side_nav a {
	display: block;
	width: 100%;
}
	
#side_nav a:hover, .side_nav a:focus {
 	text-decoration: none;
}

#top_nav ul,#top_nav li,.top_nav li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
}

#top_nav li a:hover {
	color: #0066cc;
}

.top_nav a {
	margin-right: 3em;
	margin-right: 3rem;
	vertical-align: 70%;
}

.top_nav a img {
	margin: .5rem -.3rem 0 2rem;
	vertical-align: 0
}

#top_nav li:last-child {
	margin-right: 0;
}

#top_nav a:link,#top_nav a:visited,#top_nav a:active,#top_nav a:hover,#left-sidebar a:link,#left-sidebar a:visited,#left-sidebar a:active {
    color:#FFF;
    text-decoration:none
}

#header_nav {
	border-bottom: 2px solid #666; 
	margin-bottom: 20px;
	width: 100%;
}

header ul {
	margin-bottom: 0;
}

#main_content {
	margin-top: 2rem;
	border: 1px solid red;
	position: relative;
	float: none;
}
#social_media_wrapper, #search_wrapper {
 position:relative;
}

#social_media {
	float:right;
	position:absolute;
	margin:0 auto;
	text-align:right;
	top:1rem;
	right:-2.3rem;
	width:12rem;
	z-index:130;
	overflow: hidden;
}

#search {
	float:right;
	position:absolute;
	margin:0 auto;
	text-align:right;
	top:1rem;
	right:1.2em;	
	right:1.2rem;
	width:18em;
	width:18rem;
	z-index:130;
}

#copyright {
	display: block;
	margin: 0px 40px 5px 0;
	padding-top: 10px;
}

#social_media ul {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}

#social_media li, #social_media a:link, #social_media a:visited, #social_media a:hover, #social_media a:active {
	display:inline;
	list-style:none;
	padding:0 2px;
	overflow: hidden;
}

#social_media .twitter, #social_media .facebook, #social_media .youtube, #social_media .amazon {
	float:left;
	margin: 0 2px;
	border:none;
	height:35px;
	width:35px;	
}

#social_media .amazon {
	background:url('../images/sprites.png') no-repeat scroll -38px 2px transparent;
}

#social_media .twitter {
	background:url('../images/sprites.png') no-repeat scroll -116px 2px transparent;
}

#social_media .facebook {
	background:url('../images/sprites.png') no-repeat scroll -77px 2px transparent;
}

#social_media .youtube {
	background:url('../images/sprites.png') no-repeat scroll 2px 2px transparent;
}

#social_media .amazon {
	background:url('../images/sprites.png') no-repeat scroll -38px 2px transparent;
}

#social_media .twitter {
	background:url('../images/sprites.png') no-repeat scroll -116px 2px transparent;
}

#social_media .youtube {
	background:url('../images/sprites.png') no-repeat scroll 2px 2px transparent;
}

#social_media .facebook:hover, #social_media .amazon:hover, #social_media .twitter:hover, #social_media .youtube:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}


#social_media span {
	display: none;
}

/* Float Clearing */
.group:before, .group:after {
	content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.group:after {
	clear: both;
}
.group {
	zoom: 1;
}

#disclaimer {
	padding-top: 1.2rem;
	font-size: 90%;
}
		
#cover_image {
	width:7rem;
	float:right; 
	margin: 0 0 .8rem 1rem;
}

.still {
	padding: 0 .7rem .4rem 0;
	display: block;
	float: left;
}

.instructions {
	font-size:75%;
}

.aka {
	font-size: 80%;
	margin-top: -5px;
}

.year {
    font-size:75%;
    letter-spacing:-.02em
}

#logo {
	width: 9.1rem;
	height: 5.5rem; 
}

#dvd, #poster {
	float: left;
	padding-right: 1rem;
}


.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.link_name {
	display: block;
	margin-top: 1.2rem;
}

.link_description {
	display: block;
	font-size: 80%;
	margin: 0.8rem 0 1.6rem 0;
    font-style:italic	
}
#dvd_promo {
	clear: left;
	display: block;
	padding-top: .3rem;
	font-size: 80%;
}

.bonus_dvd {
margin: .7rem 0;
}

#special_offer {
height:8rem; 
width: 100%; 
text-align: center; 
margin: 0 auto;
}

#special_offer_banner {
padding-top: .3rem;
width:26rem;
height: 6rem;
}

#ebook_buttons {
float: right;
text-align: right;
padding-top: 1rem;
margin-right: -1rem;
}

#kindle_button {
	padding-left: 1.5rem;
}


/* Media Queries
================================================== */

  /* Standard Desktop */
  @media only screen and (min-width: 960px) {
  }

  /* Tablet Portrait */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    h3, .h3 { font-size: 1.5em; }
    .panel-grid-cell { text-align: center; }
  }

  /* Mobile Portrait */
  @media only screen and (max-width: 767px) {
    .section { margin: 0 0 15px; }
    .menu li, .sub-menu li { display: block; border-bottom: 1px solid #d3d3d3; padding: 10px 0; border-right: none; width: 100%;}
	.menu li:last-child { border: none; }
	.top_nav a { width: 100%; color: #FFF; margin: .5rem; display: block; }
    .one-third { margin-bottom: 25px !important; }
    .powered { display: none; }
    .screen-only { display: none !important; }
    .mobile-only { display: block !important; }
    .textwidget { text-align: center; }
	#social_media li, #social_media span { padding: 0; margin: 0 }
	#special_offer, #search_wrapper { display: none; visibility: hidden }
    #main-menu { border-bottom: none; padding: 0; }
  }

  /* Mobile Landscape */
  @media only screen and (min-width: 480px) and (max-width: 767px) {

  }

  @media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
    .flex-direction-nav .flex-next {opacity: 1; right: 0;}
  }


  /*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* 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; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 0; margin-right: 0; }
    .row                                        { margin-bottom: 20px; }

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

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .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; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }



/* #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; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .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: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


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

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

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

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.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: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #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 .one.columns,
        .container .two.columns,
        .container .three.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: 420px; }
    }


/* #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;
    }