.sixteen.columns.controlPanel.first {padding-top:20px;} #SubNavItems {height:68px;} #applets-panel {margin-top:20px;padding:0;} /* 1200px Media Query for the Skeleton Grid - http://getskeleton.com * Adapted from http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/responsive-css-grid-systems-345 * Added .alpha.omega combo classes. Hope to see that fixed in later versions of Skeleton: https://github.com/dhgamache/Skeleton/issues/68 */ /* #Base 1200 Grid ================================================== */ .container { position: relative; width: 1200px; 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; } .column.alpha.omega, .columns.alpha.omega { margin-left: 0; margin-right: 0} /* Base Grid */ .container .one.column { width: 55px; } .container .two.columns { width: 130px; } .container .three.columns { width: 205px; } .container .four.columns { width: 280px; } .container .five.columns { width: 355px; } .container .six.columns { width: 430px; } .container .seven.columns { width: 505px; } .container .eight.columns { width: 580px; } .container .nine.columns { width: 655px; } .container .ten.columns { width: 730px; } .container .eleven.columns { width: 805px; } .container .twelve.columns { width: 880px; } .container .thirteen.columns { width: 955px; } .container .fourteen.columns { width: 1030px; } .container .fifteen.columns { width: 1105px; } .container .sixteen.columns { width: 1180px; } .container .one-fifth.column { width: 220px; } .container .one-third.column { width: 380px; } .container .two-thirds.column { width: 780px; } /* Offsets */ .container .offset-by-one { padding-left: 75px; } .container .offset-by-two { padding-left: 150px; } .container .offset-by-three { padding-left: 225px; } .container .offset-by-four { padding-left: 300px; } .container .offset-by-five { padding-left: 380px; } .container .offset-by-six { padding-left: 455px; } .container .offset-by-seven { padding-left: 530px; } .container .offset-by-eight { padding-left: 605px; } .container .offset-by-nine { padding-left: 680px; } .container .offset-by-ten { padding-left: 755px; } .container .offset-by-eleven { padding-left: 830px; } .container .offset-by-twelve { padding-left: 905px; } .container .offset-by-thirteen { padding-left: 980px; } .container .offset-by-fourteen { padding-left: 1055px; } .container .offset-by-fifteen { padding-left: 1130px; } /* #Base 960 Grid ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { width: 960px; } .column, .columns { margin-left: 10px; margin-right: 10px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column { 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: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-fifth.column { width: 172px; } .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; } .container .one.column { 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-fifth.column { width: 133px; } .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: 348px; } .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) ================================================== */ #SubNavItems {margin-bottom:-17px;} /* Note: Design for a width of 320px */ .sixteen.columns.controlPanel {margin-left:13px;} @media only screen and (max-width: 479px) { #applets-panel .sixteen.columns.controlPanel.first {margin-top:-122px;} .calendarBlock {width:40px;} #my-tracker-panel.container #CalendarContainer {padding:0px;} #my-tracker-panel.container #calDaysHeader.sixteen.columns {padding:16px 0px 0;} .calendarBlockHeader {width:42px;} .calendarBlockHeader img {margin-left:-12px;width:72px;} #my-tracker-panel {width:300px;} #my-tracker-panel.container .sixteen.columns {width:300px;min-width:300px;} #my-planner-panel {width:300px;} #my-planner-panel.container .sixteen.columns {width:300px;min-width:300px;} #applet-panel, #applet-panel-small, #my-tracker-panel, #my-planner-panel {border:0px;border-radius:0px;} #SetTrackerDateContainer, #SetPlannerDateContainer {width:82%;} #SetTrackerDateContainer div.customStyleSelectBox, #SetTrackerDateContainer div.customStyleSelectBoxInner, #SetPlannerDateContainer div.customStyleSelectBox, #SetPlannerDateContainer div.customStyleSelectBoxInner {max-width:247px;} #SetTrackerDate, #SetPlannerDate {width:208px;} .calendarBlock ul li.green, .calendarBlock ul li.yellow, .calendarBlock ul li.red, .calendarBlock ul li.white {margin:-2px 0 0 -1px;padding-top:12px;} .calendarBlock ul li.login {margin-top:-46px;} .calendarBlock ul.bottom {margin-left:2px;bottom:-2px;} .calendarBlock ul.bottom li {width:12px;} .calendarBlock ul.bottom li.call {width:25px;margin-right:2px;height:23px;} #calendarArrowLeftContainer {height:40px;width:8%;float:left;} #calendarArrowRightContainer {height:40px;width:8%;float:left;text-align:left;} #plannerArrowLeftContainer {height:40px;width:8%;float:left;} #plannerArrowRightContainer {height:40px;width:8%;float:left;text-align:left;} #print-plan {display:none;} #planName {width:71%;height:auto;font-size:12px;} #my-planner-panel.container .sixteen.columns.PlannerContainer.barOne {padding:14px 1px 0;width:100%;} #CaloriesContainer {display:block;} #OuterCaloriesContainer, #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {float:none;text-align:left;} #TargetCaloriesContainer, #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {padding-left:10px;} .planItemDisplay {width:192px;} .planItemNotes {font-size:10px;max-width:121px;margin-top:-2px;} .planItemIcon {width:30px;} .planItemSubNotes {margin-top:3px;font-size:11px;} .PlannerReportPanel { width:266px; background: url("../images/my_planner/report_panel_sm.png") no-repeat scroll center center rgba(0, 0, 0, 0); } .reportTextarea {width:242px;} .nutritionBreak {clear:both;float:left;margin:0 0 4px 0;} #my-planner-panel.container .sixteen.columns#NutritionTotals {padding:12px 0 0 44px;} #add-to-my-plans {margin-left:30px;} div.sixteen.columns.PlannerContainer hr.divider {width:86%;} div#NutritionTotals div a {cursor:default;} div#NutritionTotals div a:hover {color:#737373;} #my-tracker-panel.container #CalendarContainer {width:301px;} #my-planner-panel.container #OuterOuterCaloriesContainer.sixteen.columns {min-width:260px;width:260px;} #my-planner-panel.container #MyPlannerItems.sixteen.columns {min-width:272px;width:272px;} .planItemReport {margin-right:4px;} #my-planner-panel.container .sixteen.columns.DividerContainer {min-width:268px;width:268px;} div.sixteen.columns.DividerContainer hr.divider {width:103%;} #my-planner-panel.container #NutritionTotals.sixteen.columns {min-width:256px;width:256px;} .accountHeaderDivider {display:block;height:0px;visibility:hidden;} #MyAccountHeader {width:200px;padding:20px 20px 0;text-align:left;} .accountHeaderLink {width:auto;padding-bottom:10px;} .accountHeaderLink.FoodPrefs {width:auto;} .myAccountLeftCol {width:100%;text-align:left;} .myAccountRightCol {width:100%;margin:10px 0 5px;} #PlannerStartTimeContainer, #PlannerStartTimeHalfContainer {margin-top:10px;} #AdminSave {margin-top:-10px;margin-left:10px;} #PlannerStartTimeResponse {margin-left:20px;margin-top:6px;} #RemindersResponse {margin-left:0px;} #FoodSearchDiv .myAccountLeftCol {width:33%;} #FoodSearchDiv .myAccountRightCol {width:20%;margin:0px;padding-left:7px;} #FoodSearchPrefsResponse {margin-left: 10px;width: 130px;position:absolute;} #DeviceDiv .myAccountLeftCol {width:40%;} #DeviceDiv .myAccountRightCol {width:49%;margin:0px;padding-left:6px;} .deviceResponses {position:absolute;margin-top:-4px;width:30px;} #Panel-MyAccountMyLibrary #MyLibraryHeader {width:100%;font-size:18px;font-weight:normal;margin-bottom:14px;} #Panel-MyAccountMyLibrary #MyLibrarySortBy {width:100%;text-align:left;font-size:12px;margin-left:10px;} #OuterLibraryContainer {background:#FFF;padding:0 0 20px 10px;float:left;} #Panel-MyAccountMyLibrary div#BrowseLinkContainer {width:100%;margin:-10px 0 12px 0;} #Panel-MyAccountMyLibrary div#LibraryListContainer {width:100%;margin-left:-6px;} #Panel-MyAccountMyLibrary .ModuleDate {display:none;font-size:11px;padding:21px 0 10px 10px;} #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module {width:208px;} #Panel-MyAccountMyLibrary div#LibraryListContainer p.mod_title, #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module a.mod_title {width:162px;max-height:28px;overflow:hidden;font-size:11px;} #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module a.lock {margin-right:7px;} #SortByLabel {display:inline-block;margin-bottom:6px;} div#MyLibrarySortBy #SortBy {margin:18px 0 5px -49px;} #Panel-MyAccountMyFoodPreferences .myAccountLeftCol {width:40%;} #Panel-MyAccountMyFoodPreferences .myAccountRightCol {width:40%;} #Panel-MyAccountMyFoodPreferences #FoodRestrictionContainer.myAccountRightCol {width:100%;padding-left:0px;margin-top:-16px;} div#FoodRestrictionContainer #AdditionalFoodPrefs {width:192px;} #Panel-MyAccountMyFoodPreferences #FoodPrefsSave {margin-left:-72px;margin-top:0px;} #Panel-MyAccountMyFoodPreferences #AdditionalFoodPrefsResponse {width:100%;margin-left:0px;margin-top:16px;} #Panel-MyAccountMyFoodPreferences #FoodPrefsResponse {margin-left:4px;position:absolute;width:83px;margin-top:0px;} #Panel-MyAccountMyInfo #InfoSave {margin-left:10px;margin-top:-10px;} div#Panel-MyAccountMyOrders #OrderRange {margin:12px 0 5px -79px;} #MyOrdersHeader {width:100%;} #MyOrdersRange {width:100%;text-align:left;margin-top:16px;font-size:12px;margin-left:3px;} #OrderListPanel .myOrdersCol {font-size:9px;} #OrderRangeLabel {display:inline-block;margin-bottom:6px;} #OuterOrdersContainer {background:#FFF;padding:0 0 20px 10px;} .myOrdersCol.one {padding-left:4px;width:21%} .myOrdersCol.two {width:17%} .myOrdersCol.three {width:40%} #Panel-MyAccountMyFoodPreferences .myAccountRightCol {margin: 0;} #MyLoginContainer {font-size:11px;overflow:hidden;padding-left:0;width:104%;} .NutritionInfoBlockContainer {width:23%;} #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {margin-left:0px;} .planItemSubNotes {height:23px;overflow:hidden;} } @media only screen and (min-width: 480px) and (max-width: 767px) { #applets-panel .sixteen.columns.controlPanel.first {margin-top:-78px;} #my-tracker-panel {width:399px;} .calendarBlock {width:54px;} #my-tracker-panel.container #CalendarContainer {padding:0px;} #my-tracker-panel.container .sixteen.columns {width:399px;min-width:399px;} #my-planner-panel {width:399px;} #my-planner-panel.container .sixteen.columns {width:399px;min-width:399px;} #SetTrackerDate, #SetPlannerDate {width:290px;} .calendarBlockHeader {width:57px;} .calendarBlockHeader img {margin-left:-7px;width:70px;} li.plan, li.plan_empty, li.plan_blank {clear:both;} .calendarBlock ul.bottom {margin-left:2px;bottom:-4px;} .calendarBlock ul li.login {margin-top:-44px;} .calendarBlock ul li.green, .calendarBlock ul li.yellow, .calendarBlock ul li.red, .calendarBlock ul li.white {margin:-4px 0 0 1px;padding-top:12px;} #my-tracker-panel.container #calDaysHeader.sixteen.columns {padding:16px 0px 0;} #applet-panel, #applet-panel-small, #my-tracker-panel, #my-planner-panel {border:0px;border-radius:0px;} #SetTrackerDateContainer, #SetPlannerDateContainer {width:82%;} #SetTrackerDateContainer div.customStyleSelectBox, #SetTrackerDateContainer div.customStyleSelectBoxInner, #SetPlannerDateContainer div.customStyleSelectBox, #SetPlannerDateContainer div.customStyleSelectBoxInner {max-width:247px;} #calendarArrowLeftContainer {height:40px;width:8%;float:left;} #plannerArrowLeftContainer {height:40px;width:8%;float:left;} #calendarArrowRightContainer {height:40px;width:8%;float:left;text-align:left;} #plannerArrowRightContainer {height:40px;width:8%;float:left;text-align:left;} .calendarBlock ul.bottom li {width:12px;} .calendarBlock ul.bottom li.call {width:25px;margin-right:2px;height:23px;} #print-plan {display:none;} #planName {width:78%;height:auto;font-size:14px;} #my-planner-panel.container .sixteen.columns.PlannerContainer.barOne {padding:14px 1px 0;width:100%;} #CaloriesContainer {display:block;} #OuterCaloriesContainer, #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {float:none;text-align:left;} #TargetCaloriesContainer, #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {padding-left:10px;} .planItemDisplay {width:291px;} .planItemNotes {font-size:11px;max-width:210px;margin-top:0px;} .planItemIcon {width:32px;} .planItemSubNotes {margin-top:5px;font-size:12px;} .reportTextarea {width:242px;} .nutritionBreak {clear:both;float:left;margin:0 0 4px 0;} #my-planner-panel.container #NutritionTotals.sixteen.columns {padding:12px 0 0 96px;} #add-to-my-plans {margin-left:30px;} div.sixteen.columns.PlannerContainer hr.divider {width:90%;} div#NutritionTotals div a {cursor:default;} div#NutritionTotals div a:hover {color:#737373;} #my-tracker-panel.container #CalendarContainer {width:399px;} #my-planner-panel.container #OuterOuterCaloriesContainer.sixteen.columns {min-width:359px;width:359px;} #my-planner-panel.container #MyPlannerItems.sixteen.columns {min-width:371px;width:371px;} .planItemReport {margin-right:6px;} #my-planner-panel.container .sixteen.columns.DividerContainer {min-width:367px;width:367px;} div.sixteen.columns.DividerContainer hr.divider {width:102%;} #my-planner-panel.container #NutritionTotals.sixteen.columns {min-width:256px;width:256px;} .accountHeaderDivider {display:block;height:0px;visibility:hidden;} #MyAccountHeader {width:296px;padding:20px 20px 0;text-align:left;} .accountHeaderLink {width:auto;padding-bottom:10px;} .accountHeaderLink.FoodPrefs {width:auto;} .myAccountLeftCol {width:100%;text-align:left;} .myAccountRightCol {width:100%;margin:10px 0 5px;} #PlannerStartTimeContainer, #PlannerStartTimeHalfContainer {margin-top:10px;} #AdminSave {margin-top:-10px;margin-left:59px;} #PlannerStartTimeResponse {margin-left:20px;margin-top:6px;} #RemindersResponse {margin-left:0px;} #FoodSearchDiv .myAccountLeftCol {width:22%;} #FoodSearchDiv .myAccountRightCol {width:70%;margin:0px;} #FoodSearchPrefsResponse {margin-left: 10px;width: 167px;position:absolute;} #DeviceDiv .myAccountLeftCol {width:28%;} #DeviceDiv .myAccountRightCol {width:40%;margin:0px;} .deviceResponses {position:absolute;margin-top:-4px;width:30px;} #Panel-MyAccountMyLibrary #MyLibraryHeader {width:100%;font-size:18px;font-weight:normal;margin-bottom:14px;} #Panel-MyAccountMyLibrary #MyLibrarySortBy {width:100%;text-align:left;font-size:12px;margin-left:10px;} #Panel-MyAccountMyLibrary div#BrowseLinkContainer {width:100%;margin:-10px 0 12px 0;} #Panel-MyAccountMyLibrary div#LibraryListContainer {width:100%;} #Panel-MyAccountMyLibrary .ModuleDate {font-size:11px;padding:21px 0 10px 10px;} #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module {width:216px;} #Panel-MyAccountMyLibrary div#LibraryListContainer p.mod_title, #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module a.mod_title {width:166px;max-height:28px;overflow:hidden;font-size:11px;} #Panel-MyAccountMyFoodPreferences .myAccountLeftCol {width:26%;} #Panel-MyAccountMyFoodPreferences .myAccountRightCol {width:60%;} #Panel-MyAccountMyFoodPreferences #FoodRestrictionContainer.myAccountRightCol {width:100%;padding-left:10px;margin-top:-16px;} div#FoodRestrictionContainer #AdditionalFoodPrefs {width:278px;} #Panel-MyAccountMyFoodPreferences #FoodPrefsSave {margin-left:-21px;} #Panel-MyAccountMyFoodPreferences #AdditionalFoodPrefsResponse {width:100%;margin-left:0px;margin-top:16px;} #Panel-MyAccountMyFoodPreferences #FoodPrefsResponse {margin-left:22px;position:absolute;width:164px;margin-top:0px;} #Panel-MyAccountMyInfo #InfoSave {margin-left:59px;margin-top:-10px;} #MyOrdersHeader {width:100%;} #MyOrdersRange {width:100%;text-align:left;margin-top:16px;font-size:12px;margin-left:3px;} #OrderListPanel .myOrdersCol {font-size:11px;} #Panel-MyAccountMyFoodPreferences .myAccountRightCol {margin: 0;} #MyLoginContainer {font-size:11px;overflow:hidden;padding-left:0;width:104%;} .NutritionInfoBlockContainer {width:23%;} #ConsumedCaloriesContainer, #BurnedCaloriesContainer, #RemainingCaloriesContainer {margin-left:0px;} .planItemSubNotes {height:24px;overflow:hidden;} } @media only screen and (min-width: 768px) and (max-width: 960px) { #CurrentPassword {margin-right:20px;} #PlannerStartTimeResponse {margin-left:25px;margin-top:11px;} #RemindersResponse {font-size:13px;margin-left:4px;} #theFirstDivider {margin-left:10px;} #Panel-MyAccountMyLibrary div#BrowseLinkContainer {width:23%;} #Panel-MyAccountMyLibrary div#LibraryListContainer {width:76%;} #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module {width:308px;} #Panel-MyAccountMyLibrary div#LibraryListContainer p.mod_title, #Panel-MyAccountMyLibrary div#LibraryListContainer #prep div.module a.mod_title {width:256px;max-height:28px;overflow:hidden;font-size:12px;} #Panel-MyAccountMyFoodPreferences #AdditionalFoodPrefsResponse {width:100%;margin-left:0px;margin-top:16px;} #MyOrdersHeader {width:30%;} #MyOrdersRange {width:69%;text-align:right;} } @media only screen and (min-width: 960px) and (max-width: 1199px) { #Panel-MyAccountMyLibrary div#BrowseLinkContainer {width:23%;} #Panel-MyAccountMyLibrary div#LibraryListContainer {width:76%;} #Panel-MyAccountMyFoodPreferences #AdditionalFoodPrefsResponse {width:100%;margin-left:0px;margin-top:16px;} } @media only screen and (max-width: 767px) { .container { width: 300px; } /*changed from width: 400px; on 6.26.14*/ /*.container, html, body { max-width: 768px; }*/ .sixteen.columns.controlPanel {margin-left:0px;} .columns, .column { margin: 0; } #SubNavItems {visibility:hidden;height:17px;display:none;position:absolute;} .appletIconHolder {font-size:12px;} .padders {max-width:2%;} .panelOutline {min-width:95%;} .panelHeader {min-width:95%;margin-left:1px;} /*#applets-panel {margin-top:38px;}*/ #top-nav-sticky-wrapper {margin-bottom:0px;} .container .one.column, .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-fifth.column, .container .one-third.column, .container .two-thirds.column { width: 300px; } /*changed from width: 400px; on 6.26.14*/ /* 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) { .panelHeader {margin-left:2px;} .container { width: 420px; } /*width: 420px;*/ .columns, .column { margin: 0; } .container .one.column, .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-fifth.column, .container .one-third.column, .container .two-thirds.column { width: 420px; } /*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
*/ .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
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }