/********************/
/*                  */
/*  RESPONSIVE CSS  */
/*                  */
/********************/


/* DESKTOP AND TABLET IN LANDSCAPE*/

@media only screen {

    .cblock {width:768px;float:left;}
    .bq {text-align: center; margin-left:25%; margin-right:25%}
    .hide {display:block;}
    .htext {font-family: Arial; font-size: 120%}
    #menu {display:block;}
    #topmenu {display:none;}
    #phone {display:none;}

}

/* NARROW DESKTOP */

@media only screen and (max-width:1024px) and (min-device-width:1025px) {

    .cblock {width: 100%;}
    .bq {text-align: center; margin-left:25%; margin-right:25%}
    .hide {display:block;}
    .htext {font-family: Arial; font-size: 120%}
    #menu {display:none;}
    #topmenu {display:block;}
    #phone {display:none;}
}

/* TABLET IN LANDSCAPE */

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

    .cblock {width: 100%;}
    .bq {text-align: center; margin-left:25%; margin-right:25%}
    .hide {display:block;}
    .htext {font-family: Arial; font-size:120%}
    #menu {display:none;}
    #topmenu {display:block;}
    #phone {display:none;}
}

/* TABLET IN PORTRAIT */

@media only screen and (min-device-width:768px) and (orientation:portrait) {

    .cblock {width: 100%;}
    .bq {text-align: center; margin-left:20%; margin-right:20%}
    .hide {display:none;}
    .htext {font-family: Arial}
    #menu {display:none;}
    #topmenu {display:block;}
    #phone {display:none;}
    .threecols {column-count:2;-moz-column-count:2;-webkit-column-count:2;list-style:none;padding-left:0;}	/* web-thanks.htm */
    .tbl {width:98%;}							/* web-words-banzai.htm */
    .row {width:98%;clear:both}					/* web-words-banzai.htm */
    .cell {width:98%;}							/* web-words-banzai.htm */
}


/* PHONE */

@media only screen and (min-device-width:320px) and (max-device-width:767px) {

    .alert {font-family:arial;font-weight:bold;font-size:120%}
    .cblock {width: 100%;}
    .bq {text-align: center; margin-left:12%; margin-right:12%}
    .hide {display:none;}
    .htext {font-family: Arial}
    .hlblock {float:left;width:100px;}  /* for left blocks on home page */
    .hrblock {margin: 0 0 0 105px;}  /* for right blocks on home page */
    .hnblock {width:100%;clear:both;}  /* below left-right block pairs on home page */
    #menu {display:none;}
    #topmenu {display:block;}
    #phone {display:none;}

    .albheightbig {height:150px;border:0}
    .albwidthbig {width:150px;border:0}
    .albheightsmall {height:90px;border:0}
    .albwidthsmall {width:90px;border:0}
    .albheighttiny {height:60px;border:0}
    .albwidthtiny {width:60px;border:0}
    
    .item {height:95px;position:relative;}
    .details {position:absolute;bottom:0;left:95;}

    .poster {border:none;height:100px}
    .thesame {border:none;height:100px}
    .pix {border:none;height:75px}

    .pblock {width:150px;height:126px;float:left;text-align:center;font-size: 80%;}
    .pblock-wide {width:300px;height:126px;float:left;text-align:center;font-size: 80%;}
    .pblock-tall {width:150px;float:left;text-align:center;font-size: 80%;}

    .ytsize {width:320;height:240;}

    #breadcrumb ul {text-align:right;list-style-type:none;padding:0;margin:0;font-size:60%;}

    .threecols {column-count:2;-moz-column-count:2;-webkit-column-count:2;list-style:none;padding-left:0;}	/* web-thanks.htm */
    .tbl {width:98%;}							/* web-words-banzai.htm */
    .row {width:98%;clear:both;}					/* web-words-banzai.htm */
    .cell {width:98%;}							/* web-words-banzai.htm */
}

@media only screen and (min-device-width:320px) and (max-device-width:767px) and (orientation:portrait) {

    #phone {display:block;}

}

/* TH-TH-TH-THAT'S ALL FOLKS */
