.notmobile {float:left; width:640px;}
.notmobile iframe {
	width:640px;
	height:600px;
	margin:10px;
	border:1px dashed #666;
}
.container                                  {position:relative; width:960px; margin:0 auto; padding:0;}
.container .column, .container .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 */
.container .one.column,
.container .one.columns                     {width:40px; }
.container .two.columns                     {width:100px;}
.container .three.columns                   {width:160px;}
.container .four.columns                    {width:250px;}
.container .five.columns                    {width:270px;}
.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:700px;}
.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)
================================================== */
/* Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:959px) {
	.notmobile {width:498px;}
	.notmobile iframe {
		width:300px;
		height:600px;
	}
	.container                                  {width:700px; border:2px solid red;}
	.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;}
	.omega iframe {width:220px;}
	.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:250px;}
	.container .five.columns                    {width:190px;}
	.container .six.columns                     {width:268px;}
	.container .seven.columns                   {width:300px;}
	.container .eight.columns                   {width:310px;}
	.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:680px;}

	.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 (Landscape)
================================================== */
/* Note:Design for a width of 600px */
@media only screen and (min-width:600px) and (max-width:767px) {
	.notmobile {display:none;}
	.notmobile iframe {
		width:280px;
		height:600px;
	}
	.container {width:600px;}
	.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:580px;}
}

/* #Mobile (Landscape mod copy)
================================================== */
/* Note:Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:599px) {
	.notmobile {display:none;}
	.container {width:480px;}
	.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:480px;}
}

/* #Mobile (Landscape mod copy)
================================================== */
/* Note:Design for a width of 480px */
@media only screen and (min-width:321px) and (max-width:480px) {
	.notmobile {display:none;}
	.container {width:320px;}
	.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:320px;}
}

/* #Mobile (Landscape mod copy)
================================================== */
/* Note:Design for a width of 480px */
@media only screen and (max-width:320px) {
	.notmobile {display:none;}
	.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;}
	.slogan {width:290px;margin-left:0 auto;}
}

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