/* =Responsiveness: Tablet
================================================== */

@media only screen and (min-width : 768px) and (max-width : 910px) {
#topbar, #outer-wrapper, #credits .inner, #archives {width:740px;min-width:0;}
#linkbar-pages {width: 500px;}
#linkbar-pages ul {padding: 43px 0 0;margin: 0;}
#linkbar-pages.landing {width: 300px;}

.welcome .topleft, .welcome .topright {float:none;width:100%;}
.welcome .topleft img {position: relative;bottom: 0;left: 0;}
.welcome .topleft p {width:500px;float:right;}
ul.buttons li.button {width: 177px;height: 75px;}

#credits .copyright, #credits .copyright2 {float:none;margin-top:10px;text-align:center;}
#linkbar-footer, #linkbar-footer2 {float:none;}

.jumpstart #bottom .left {width: 100%;float: none;}
.jumpstart #bottom img.script {top: 0;right: 30px;}
.jumpstart #bottom .right {width: 100%;float: none;text-align: center; margin-top: 30px;}
.jumpstart #bottom .right a.top, .jumpstart #bottom .right a.bottom {display: inline-block;}

.cookbook img.script {left: -15px;top: 66%;}

.bonusespage .left, .bonusespage .right {width:350px;}

#page.success .left, #page.success .right {width: 355px;}
li.story-callout {font-size:22px;line-height:35px;}

.area2 .left {width: 300px;}
.area2 .right {width: 400px;}
li.test {margin-bottom: 40px;}
li.test:nth-child(3) {margin-bottom: 0px;}
.area5 .left1 {width: 550px;}
.area5 .right1 {width: 370px;}
.area5 .left2 {width: 340px;margin-top: -300px;}
.area5 .right2 {width: 370px;}
.area8 .left, .area8 .right {width: 360px;}
.area9 .left {width: 364px;}
.area9 .right {width: 350px;}
.area10 {min-height: 970px;}
.area10 .left, .area10 .right {width: 300px;}
.area11 .left img {width:500px;}
.area11 .right {width: 370px;margin-top: 0;}
.area12 .left {position: relative;top: 0;}
.area13 .right {width: 450px;}

#thankyoupage .left {width: 400px;}
#thankyoupage .right {width: 305px;}

#thankyoupage.extended .left, #thankyoupage .bottom .text {width: 350px;}
#thankyoupage.extended .right, #thankyoupage .bottom .image {width: 360px;}
#thankyoupage.extended h2 {font-size:40px;width: 440px;}
#thankyoupage .tweets {width: 291px;}

}



/* =Responsiveness: Tablet (Small)
================================================== */

@media only screen and (min-width : 601px) and (max-width : 767px) {
#topbar, #outer-wrapper, #credits .inner, #archives {width:570px;min-width:0;}
#header a img {max-width: 100%;}
#linkbar-pages {width: 420px;}
#linkbar-pages ul {padding: 43px 0 0;margin: 0;}
#linkbar-pages.landing {width: 200px;margin-top: 20px;}

.welcome .topleft, .welcome .topright {float:none;width:100%;}
.welcome .topleft img {display:none;}
ul.buttons {text-align:center;}
ul.buttons li.button {width: 217px;height: auto;margin-bottom:10px !important;}

#credits .copyright, #credits .copyright2 {float:none;margin-top:10px;text-align:center;}
#linkbar-footer, #linkbar-footer2 {float:none;}

.jumpstart #bottom .left {width: 100%;float: none;}
.jumpstart #bottom img.script {top: 0;right: 30px;}
.jumpstart #bottom .right {width: 100%;float: none;text-align: center; margin-top: 30px;}
.jumpstart #bottom .right a.top, .jumpstart #bottom .right a.bottom {display: inline-block;}

.cookbook img.script {left: 0; top: 0;position: relative;margin: -30px auto 30px;}

.bonusespage .left, .bonusespage .right {width:270px;}
li.bonus img.biopic {height: 100px;width: 100px;}

.modules .thegroup {font-size:20px;line-height:32px;}

.area2 .left, .area2 .right {width: 100%;}
li.test {margin-bottom: 40px;width: 230px;}
li.test:nth-child(3) {margin-bottom: 0px;}
.area5 .left1 {width: 100%;position: relative;}
.area5 .right1, .area5 .left2, .area5 .right2 {width: auto;float: none;margin-top: 25px;padding: 0 15px;}
.area5 .right2 img, .area8 .right img {width: 100%;}
.area8 .left, .area8 .right {width: 100%;}
.area8 .left {margin-bottom:20px;}
.area9 .left, .area9 .right {width: 100%;float:none;}
.area10 {min-height: 10px;}
.area10 .left {margin-left:0;width: auto;float:none;}
.area10 .right {margin-right:0;width: auto;float:none;}
.area10 .back {position: relative;}
.area11 .right {width: auto;margin-top: 0;position: relative;float: none;}
.area12 .left {position: relative;top: 0;}
.area13 .left, .area13 .right {float: none;width: 100%;}
.area13 .right {margin-top:20px;}

#thankyoupage .left, #thankyoupage .right {float: none;width: 100%;}

#thankyoupage.extended .left, #thankyoupage .bottom .text {float:none;width:100%;}
#thankyoupage.extended .right, #thankyoupage .bottom .image {float:none;width:100%;}
#thankyoupage.extended .right {margin-top: 30px;}
#thankyoupage.extended h2 {font-size:40px;width: 100%;position:relative;text-align:center;}
#thankyoupage .tweets {float:none !important; margin: 0 auto;}
#thankyoupage .tweets.lt {margin-bottom:20px;}



}



/* =Responsiveness: Mobile (Landscape)
================================================== */

@media only screen and (min-width : 451px) and (max-width : 600px) {
#topbar, #outer-wrapper, #credits .inner, #archives {width:420px;min-width:0;}
#header a img {max-width: 100%;}
#header {width: 120px;float: none;margin: 0 auto;}
#linkbar-pages, #linkbar-pages.landing {width: 420px;float:none;margin:0 auto;text-align:center;}
#linkbar-pages ul {padding: 25px 0 0;margin: 0;}
#linkbar-pages a {margin:0 12px;}

.welcome .topleft, .welcome .topright {float:none;width:100%;}
.welcome .topleft img {display:none;}
ul.buttons {text-align:center;}
ul.buttons li.button {height: auto;margin: 0 0 10px !important;}

#credits .copyright, #credits .copyright2 {float:none;margin-top:10px;text-align:center;}
#linkbar-footer, #linkbar-footer2 {float:none;}

.jumpstart #bottom .left {width: 100%;float: none;}
.jumpstart #bottom img.script {display:none;}
.jumpstart #bottom .right {width: 100%;float: none;text-align: center; margin-top: 30px;}
.jumpstart #bottom .right a.top, .jumpstart #bottom .right a.bottom {display: inline-block;}

.cookbook img.script {left: 0; top: 0;position: relative;margin: -30px auto 30px;}

.bonusespage .left, .bonusespage .right {width:100%;float:none;}

.modules .thegroup {font-size:20px;line-height:32px;}

.area2 .left, .area2 .right {width: 100%;}
li.test {margin-bottom: 40px;}
li.test:nth-child(3) {margin-bottom: 0px;}
li.test:nth-child(2) {margin: 0 0 40px;}
.area5 .left1 {width: 100%;position: relative;}
.area5 .right1, .area5 .left2, .area5 .right2 {width: auto;float: none;margin-top: 25px;padding: 0 15px;}
.area5 .right2 img, .area8 .right img {width: 100%;}
.area8 .left, .area8 .right {width: 100%;}
.area8 .left {margin-bottom:20px;}
.area9 .left, .area9 .right {width: 100%;float:none;}
.area10 {min-height: 10px;}
.area10 .left {margin-left:0;width: auto;float:none;}
.area10 .right {margin-right:0;width: auto;float:none;}
.area10 .back {position: relative;}
.area11 .right {width: auto;margin-top: 0;position: relative;float: none;}
.area12 .left {position: relative;top: 0;}
.area13 .left, .area13 .right {float: none;width: 100%;}
.area13 .right {margin-top:20px;}

#thankyoupage .left, #thankyoupage .right {float: none;width: 100%;}

#thankyoupage.extended .left, #thankyoupage .bottom .text {float:none;width:100%;}
#thankyoupage.extended .right, #thankyoupage .bottom .image {float:none;width:100%;}
#thankyoupage.extended .right {margin-top: 30px;}
#thankyoupage.extended h2 {font-size:40px;width: 100%;position:relative;text-align:center;}
#thankyoupage .tweets {float:none !important; margin: 0 auto;width:350px;}
#thankyoupage .tweets.lt {margin-bottom:20px;}


}


/* =Responsiveness: Mobile
================================================== */

@media only screen and (max-width : 450px) {
#topbar, #outer-wrapper, #credits .inner, #archives {width:300px;min-width:0;}
#header a img {max-width: 100%;}
#header {width: 120px;float: none;margin: 0 auto;}
#linkbar-pages, #linkbar-pages.landing {width: 100%;float:none;margin:0 auto;text-align:center;}
#linkbar-pages ul {padding: 25px 0 0;margin: 0;}
#linkbar-pages a {margin:0 12px;}

.welcome .topleft, .welcome .topright {float:none;width:100%;}
.welcome .topleft img {display:none;}
ul.buttons {text-align:center;}
ul.buttons li.button {height: auto;margin: 0 0 10px !important;}

#credits .copyright, #credits .copyright2 {float:none;margin-top:10px;text-align:center;}
#linkbar-footer, #linkbar-footer2 {float:none;}

.jumpstart #bottom .left {width: 100%;float: none;}
.jumpstart #bottom img.script {display:none;}
.jumpstart #bottom .right {width: 100%;float: none;text-align: center; margin-top: 30px;}
.jumpstart #bottom .right a.top, .jumpstart #bottom .right a.bottom {display:inline-block;}

.cookbook img.script {left: 0; top: 0;position: relative;margin: -30px auto 30px;}

.bonusespage .left, .bonusespage .right {width:100%;float:none;}
li.bonus img.biopic {height: 120px;width: 120px;}

.modules .thegroup {font-size:20px;line-height:32px;}

.video .thecontent .main {display:none;}
.video .thecontent .mobile {display:block;}


.area2 .left, .area2 .right {width: 100%;}
.area5 .left1 {width: 100%;position: relative;}
.area5 .right1, .area5 .left2, .area5 .right2 {width: auto;float: none;margin-top: 25px;padding: 0 15px;}
.area5 .right2 img, .area8 .right img {width: 100%;}
.area8 .left, .area8 .right {width: 100%;}
.area8 .left {margin-bottom:20px;}
.area9 .left, .area9 .right {width: 100%;float:none;}
.area10 {min-height: 10px;}
.area10 .left {margin-left:0;width: auto;float:none;}
.area10 .right {margin-right:0;width: auto;float:none;}
.area10 .back {position: relative;}
.area11 .right {width: auto;margin-top: 0;position: relative;float: none;}
.area12 .left {position: relative;top: 0;}
.area13 .left, .area13 .right {float: none;width: 100%;}
.area13 .right {margin-top:20px;}

#thankyoupage .left, #thankyoupage .right {float: none;width: 100%;}

#thankyoupage.extended .left, #thankyoupage .bottom .text {float:none;width:100%;}
#thankyoupage.extended .right, #thankyoupage .bottom .image {float:none;width:100%;}
#thankyoupage.extended .right {margin-top: 30px;}
#thankyoupage.extended h2 {font-size:40px;width: 100%;position:relative;text-align:center;}
#thankyoupage .tweets {float:none !important; margin: 0 auto;  width: 220px;}
#thankyoupage .tweets.lt {margin-bottom:20px;}


}