
/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	/*margin: 1% 0 1% 1.6%;*/
	/*margin: 1% 0 1% 0;*/
	/*margin: 2px 0 2px 0;*/
	/*margin: 2px* 2px 2px 2px;*/
	/*padding: 1px 1px 1px 1px;*/
}

/*.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/*.col:first-child { margin-left: 1%; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

.full_span {
	width: 100%; 
	/*margin: 5px 1% 5px 1%;*/
	margin: 5px 0 5px 0;
	/*padding: 2px;*/
}
/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {
	width: 100%; 
}
.span_1_of_2 {
	width: 50%; 
}
.span_1_of_2_blank {
	width: 50%; 
}
/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {
	width: 100%; 
}
.span_2_of_3 {
	width: 66.6%;
	/*width: 60%; */
}
.span_1_of_3 {
	width: 33.3%;
	/*width: 30%; */
}
/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {
	width: 100%; 
}
.span_3_of_4 {
	width: 74.6%;
	/*width: 75%; */
}
.span_2_of_4 {
	/*width: 49.2%; */
	width: 50%; 
}
.span_1_of_4 {
	width: 23.8%;
	/*width: 25%; */
}

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {
	width: 100%; 
}
.span_4_of_5 {
	width: 80%; 
}
.span_3_of_5 {
	width: 60%;
	/*width: 59.5%;*/
	/*width: 55%; */
}
.span_2_of_5 {
	width: 40%; 
}
.span_1_of_5 {
	/*width: 19.5%; */
	width: 20%; 
}
.span_1_of_5_buzz {
	/*width: 19.5%; */
	width: 20%; 
}

.main_cell {
        display: block;
	height: 200px;
	margin: 3px;
        color: #000;
	font-family: Comic Sans MS, Marker Felt, sans-serif;
        /*font-size: 14pt;*/
        font-size: 20pt;
/*
        font-weight: bold;
*/
        background: #fff;
}

.main_cell_x2 {
        display: block;
	height: 400px;
	margin: 3px;
        color: #000;
	text-align:center;
	font-family: Comic Sans MS, Marker Felt, sans-serif;
        /*font-size: 14pt;*/
        /*font-size: 20pt;*/
        font-size: 17pt;
/*
        font-weight: bold;
*/
        background: #fff;
}

.headernav {
	height:50px;
	width:100%;
	margin:0 auto;
	background:#000040;
}
.headernav#logo {
	height:50px;
}
.headernav#logo img{
	height:50px;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

/*@media only screen and (max-width: 480px) {*/
/*@media only screen and (max-width: 1280px) {*/
@media only screen and (max-width: 1024px) {
/*
	div#mainblock {
		display:block;
	 	width:100%;
	}
*/
	.span_1_of_2 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%;
		/*width: 0%;
		display: none;*/
	}
	.span_1_of_5_buzz {
		/*width: 100%;*/
		width: 0;
		display: none;
	}
	.span_1_of_2_blank {
		/*width: 100%;*/
		width: 0;
		height: 0;
		display: none;
	}
	.main_cell {
		/*height: 400px;*/
		height: 300px;
		font-size: 24pt;
	}
	.main_cell_x2 {
		/*height: 600px;*/
		height: 400px;
		font-size: 24pt;
	}
	div#mainblock {
		/*width: 500px;*/
		width: 100%;
	}
	.headernav#logo {
		display:none;
	}
/*
	.headernav {
		display:none;
	}
*/
	/*.fb-login-button.fb_iframe_widget.fb_hide_iframes span {display:none;}*/
	div.comments {
		width: 100% !important;
	}
/*
	div#comment {
		display: block;
		float: left;
		width: 100% !important;
	}
	table.personimage img {
		width:100%;
		height:200px;
	}
*/
}
@media only screen and (max-width: 600px) {
	.eightcolumn {
		width:24%;
	}
	.fourcolumn {
		width:48%;
	}
	.threecolumn {
		width:100%;
	}
	.twocolumn {
		width:100%;
	}
	table.movieimage {
		/*width:65%;*/
		width:80%;
	}
	table.movieimage img {
		width:100%;
		/*height:200px;*/
		height:160px;
	}
	table.movieimage img#award{
        	width: 100%;
        	/*height: 300px;*/
	}
	table.movieimage img#person{
        	width: 100%;
        	/*height: 300px;*/
	}
	table.movieimage img#thumbnail{
        	width: 100%;
        	/*height: 100%;*/
        	height: 160px;
	}
	table.movieimage img#filmography{
        	width: 99%;
        	height:200px; 
	}
	table.movieimage img#watchlist{
        	width: 99%;
        	height:150px; 
	}
	table.movieimage img#jukebox{
        	width: 99%;
        	height:150px; 
	}
	table.personimage {
		/*width:65%;*/
		width:80%;
	}
	table.personimage img {
		width:100%;
		height:150px;
		/*height:100%;*/
	}
	.main_cell {
		font-size:30pt;
	}
	.main_cell_x2 {
		font-size:30pt;
	}

}

.grid-pad {
	padding: 20px 0 20px 20px;
}

.footer_full {
	display: block;
	width: 100%;
	padding: 10px;
	/*height: 40px;*/
	/*background-color: #ff7f27;*/
	background-color: #ffc20e;
}
.footer_white {
	display: block;
	width: 100%;
	height: 60px;
	padding: 10px;
	font-size: 12pt;
	background-color: #fff;
}

/*Search*/
#popupPanel-popup {
    right: 0 !important;
    left: auto !important;
}
#popupPanel {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    border-right: none;
    /*background: rgba(0,0,0,.5);*/
    background: #fff;
    margin: -1px 0;
    z-index:102;
}
#popupPanel .ui-btn {
    margin: 2em 15px;
}
/*
.site-header .search-field {
    background-color: transparent;
    background-image: url(images/Search.jpg);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}

.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 400px;
}
*/


