/* childrenandmedia.org.au ----------------------------------------------- */

/*smaller than 990px wide*/
@media only screen and (max-width: 990px) {

/* layout ----------------------------------------------- */
/*boxes*/
.wrapper { width: 97%; } 
#navbox { height: auto; background-image: none; } 
#imgbox { width: 94%; margin-top: 1%; } 
#ctbox { margin-top: 2%; margin-bottom: 1%; }

/* header ----------------------------------------------- */
#smf { display: none; }

/* main menu ----------------------------------------------- */
#navbox, #nav, #nav li, #nav li a { height: auto; } 
#nav li a span { line-height: auto; }
/*1st level*/
#nav li { margin-bottom: 1%; }
#nav li a, #nav li.last a { padding: 0 8px 0 8px; }
/*2nd level*/
#nav li li { display: none; }

/* lhs and rhs content ----------------------------------------------- */
.littlebox, .sub { margin: 0 0 10px 0; }

/* slideshows ----------------------------------------------- */
/*common text*/
#slider-overlay h2, #imgbox h2 { font-size: 2.9em; line-height: 1.2em; }
/*wrapper*/
.cycle-slideshow { margin: 10px auto 0 auto; }

/* reviews ----------------------------------------------- */
/*colour guide*/ 
 /*standard*/
.colourGuide.std { height: 22px; margin: 0 0 10px 0; }
.colourGuide.std .boxes { width: 20px; height: 20px; margin: 0 1px 1px 0; }
.colourGuide.std .boxes.green.age, .reviewPage.std .colourGuide .boxes.green.age { width: 20px; height: 20px; }
.colourGuide.std .boxes.txt { width: auto; height: 22px; }
 /*kidzone*/
.colourGuide.kz { height: 40px; margin: 5px 0 10px 0; }
.colourGuide.kz .boxes { width: 38px; height: 38px; margin: 0 7px 7px 0; }
.colourGuide.kz .boxes.green.age, .reviewPage.kz .colourGuide .boxes.green.age { width: 38px; height: 38px; }
.colourGuide.kz .boxes.txt { width: auto; height: 40px; }
 /*common*/ 
.reviewRow.std .colourGuide, .reviewRow.kz .colourGuide,
.reviewPage.std .colourGuide, .reviewPage.kz .colourGuide { width: auto; height: auto; }
.reviewRow.std .colourGuide .boxes.txt, .reviewRow.kz .colourGuide .boxes.txt,
.reviewPage.std .colourGuide .boxes.txt, .reviewPage.kz .colourGuide .boxes.txt { clear: right; }
/*review pages*/
.reviewPage.std .colourGuide .boxes { margin-top: 0; }
.reviewPage.kz .colourGuide .boxes { margin-top: 0; }
.reviewPage.std .classification { margin: 0 0 10px 0; }

/*text etc*/
.colourGuide .age, .colourGuide.kz .age { font-size: 1.0em; }

/* forms etc ----------------------------------------------- */
/*wrappers*/
#fEmail { width: 90%; }
/*app review form*/
#AppReviewForm { width: 100%; }
#AppReviewForm .reform #agesuit .row { margin: 0 10px 4px 0; }

/* all sorts ----------------------------------------------- */
/*sticky rhs elements*/
#sticker, #sticker.fixed, #sticker.bottom { display: none; }

}

/*************************************************************************/
/*************************************************************************/
/*************************************************************************/

/*smaller than 650px wide*/
@media only screen and (max-width: 650px) {

/* layout ----------------------------------------------- */
/*boxes*/
#hdbox { height: auto; } 
#navbox { padding: 10px 0; } 
#ctbox { min-height: none; }
#movienavbox { margin: 15px 0 10px 0; }
/*columns*/
#rhs { margin-top: 0; }
/*2 column - ct and rhs*/
.ct2R #ct { width: 100%; float: none; } 
.ct2R #rhs { width: 100%; float: none; } 

/* header ----------------------------------------------- */
#logo { float: none; margin: 2% 2% 0 0; }
#logotxt { display: none; }

/* main menu ----------------------------------------------- */
/*wrapper*/
#nav { display: none; }
/*1st level*/
#nav li { width: auto; float: none; border: 1px solid #58a996; margin: 0 0 15px 0; }
#nav li.first { margin-top: 15px; border-left: 1px solid #58a996; }
#nav li.last { margin-bottom: 5px; border-right: 1px solid #58a996; }
#nav li, #nav li a { height: auto; }
#nav li a { padding: 0 10px 0 10px; }
#nav li a span { line-height: auto; }
/*2nd level*/
#nav li:hover ul { left: 0; }
#nav li ul { margin: 0; left: 0; position: relative; display: block; clear: none; }
#nav li li { float: none; width: auto; margin: 0; display: block; border-left: none; border-right: none; }
#nav li li.first { border-top: 1px solid #414141; border-left: none; margin: 0; }
#nav li li.last { margin-bottom: 0; border-right: none; }
#nav li li a { margin: 0; padding: 8px 10px; }
#nav li li.first a { padding: 12px 10px 8px 10px; }
#nav li li.last a { padding: 8px 10px 12px 10px; }
/*mq menu toggle*/
#navhider { display: block; }

/* footer ----------------------------------------------- */
#ft { padding-top: 15px; margin: 0 2%; }
/*columns*/
#ft .col, #ft .col.RHS, #ft .col.last { width: 100%; margin: 0 0 0 0; float: none; }
/*groups*/
#ft .group, #ft .group.menu { padding: 0; margin: 0 0 15px 0; }
#ft .group.sup { margin: 0 0 20px 0; }
/*bottom row*/
#ft .twoL, #ft .twoR { width: 100%; left: auto; right: auto; }
/*lists etc*/
/* the ul */
#ft .row.last ul { height: auto; }
/* li margins et al*/
#ft .twoL li, #ft .twoL li.last { float: none; margin: 0 0 15px 0; top: auto; }
#ft .twoR li { float: none; margin: 10px 0 10px 0; text-align: left; }
/* li classes */
#ft li.gc { top: auto; }
/* supporters */
#ft .group.sup h2 { text-align: left; }
#ft .group.sup li { text-align: left; margin: 0 0 10px 0; }
#ft .group.sup li.ag { margin-bottom: 10px; }
#ft .group.sup li.smf { margin-top: 0; }
/*text etc*/
#ft .sup h2 { padding-bottom: 7px; }

/* slideshows ----------------------------------------------- */
/*common text*/
#slider-overlay h2, #imgbox h2 { font-size: 2.3em; }
/*wrappers*/
.cycle-slideshow { max-width: 96%; }

/* blocks / image boxing ----------------------------------------------- */
/*4 per row*/
.blocky4 li { width: 48%; margin-bottom: 5%; }
.blocky4 li:nth-child(2n+1) { clear: left; }
.blocky4 li:nth-child(3n+1) { clear: none; }

/* search ----------------------------------------------- */
/*searchbox*/
#hdbox .srchbx { width: auto; height: auto; margin: 10px 0 12px 0; float: none; }
/*filters*/
.srchbx #srchOpt { text-align: left; }

/* forms etc ----------------------------------------------- */
/*wrappers*/
#fEmail { width: 80%; }
/*app review form*/
#AppReviewForm { width: 98%; }
#AppReviewForm .reform #agesuit select { width: auto; min-width: 70px; }
#AppReviewForm .reform #agesuit .row { margin: 0 8px 4px 0; }

/* all sorts ----------------------------------------------- */
/*social icoms*/
.socnet { top: 0; }

}

/*************************************************************************/
/*************************************************************************/
/*************************************************************************/

/*smaller than 480px wide*/
@media only screen and (max-width: 480px) {

/* layout ----------------------------------------------- */
/*boxes*/
.wrapper { width: 96%; } 
#imgbox { display: none; }
#ctbox { margin-top: 10px; }

/* text etc ----------------------------------------------- */
h1 { font-size: 2.0em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.7em; }

/* header ----------------------------------------------- */
/*text etc*/
#logotxt { font-size: 1.8em; }

/* slideshows ----------------------------------------------- */
/*wrappers*/
.cycle-slideshow { border: 5px solid #fff; }

/* reviews ----------------------------------------------- */
/*review summaries*/
.reviewRow .twoL { width: auto; float: none; display: none; }
.reviewRow .twoR { width: auto; float: none; } 
.reviewRow .classification { margin: 5px 0 0 0; }
/*review pages*/
.reviewPage.app { margin-bottom: 0; }
.reviewPage .twoL { width: auto; float: none; margin-bottom: 15px; } 
.reviewPage .twoR { width: auto; float: none; } 
.reviewPage .classification { width: 50px; height: 50px; margin: 5px 0 10px 0; }
 /*public review "comments"*/
.reviewRow.comm .twoL { width: auto; float: none; display: block; }
.reviewRow.comm .twoR { width: auto; float: none; } 
/*colour key*/ 
.reviewRow.app .colourKey .wrap p, .reviewPage.app .colourKey .wrap p { margin-top: 0; }
/*text etc*/
.colourGuide .age, .colourGuide.kz .age { font-size: 1.0em; }
.colourGuide, .filter .boxes { font-size: 1.7em; }

/* forms etc ----------------------------------------------- */
/*wrappers*/
#fEmail { width: 96%; }
/* form elements */
.reform select { width: 100%; min-width: none; }
/*app review form*/
#AppReviewForm { width: 96%; }
#AppReviewForm table.mceLayout, #AppReviewForm textarea.tinyMCE { width: 103% !important; }
/*login form*/
#webLogin { width: 96%; }

/* all sorts ----------------------------------------------- */
/*social icoms*/
.socnet { width: 100%; height: auto; margin: 0 0 10px 0; top: auto; right: auto; position: relative; float: left; }
.socnet li { margin: 0 10px 0 0; float: left; }
/*facebook feeds*/
.fb-wrapper { float: left; }
#fbLiker { max-width: none; margin: 5px 10px 0 0; }

}

/*************************************************************************/
/*************************************************************************/
/*************************************************************************/

/*smaller than 300px wide*/
@media only screen and (max-width: 300px) {

/* slideshows ----------------------------------------------- */
/*overlays*/
#slider-overlay, #slider-overlay h2 { display: none; }
/*paging links*/
#slider-pager { display: none; }

/* blocks / image boxing ----------------------------------------------- */
.blocky ul { margin-left: 0; padding: 0; }
.blocky4 li:nth-child(2n+1) { clear: none; }
.blocky li { width: 100% !important; float: none; margin: 0 0 20px 0; }

/* forms etc ----------------------------------------------- */
/*wrappers*/
#fEmail { width: 92%; }
/*app review form*/
#AppReviewForm { width: 92%; }
#AppReviewForm table.mceLayout, #AppReviewForm textarea.tinyMCE { width: 106% !important; }
/*login form*/
#webLogin { width: 92%; }

/* all sorts ----------------------------------------------- */
/*social icoms*/
.socnet { margin: 0 0 0 0; }
.socnet li { margin: 0 10px 5px 0; }
/*facebook feeds*/
#fbLiker { margin: 5px 10px 10px 0; }

}

/*************************************************************************/
/*************************************************************************/
/*************************************************************************/

/*650px wide or bigger*/
@media only screen and (min-width: 650px) {

/* main menu ----------------------------------------------- */
/*wrapper*/
#nav { display: block !important; }

}