@media print {    
    .HideWhenPrint, .HideWhenPrint * { display:none !important; }

	html, body { min-height:auto !important; height:auto !important; }

	body { background-color:#FFF !important;; }
	
	div#BorderBG {
		display:block;
		background:none !important;
		margin:0 !important;
		padding:0 !important;
	}

	#MainFormLogoTopMap {
		background-image: url(../png/oi_logo.png) !important;
		background-repeat:no-repeat;
		width:70px !important;
		height:59px !important;
	}
}


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

	/*Div Layout css */
	Div.PluginColumn {
		width:50%;
	}
	
	Div.OptiFaces {
		width:50%;	
	}

	Div.SmallImg {
		display:none;	
	}
	
	Div.BigImg {
		width:40%;	
	}
	
	#ContactList {
		width:60%;	
	}
	
	Div.BlockDiv {
		width:100%;	
	}
	
	Div.BBthree {
		width:20%;	
	}
	
	Div.BBfour {
		width:47%;	
	}
	
	/* wowslider css */
	/*#wows1, #wows2, #wows3, #wows4, #wows5, #wows6, #wowslider-container1, #wsimages {
		max-width:650px;
		max-height:233px;
	}*/
	
	/*#wowslider-container1 .ws_images {
		max-width:650px;
		height:233px;	
	}
	
	#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
		top:30%;	
	}*/
	
	div.LeadersTitle, div.LeadersHeader1, div.LeadersHeader2, div.LeadersHeader3, div.LeadersHeader4, div.LeadersHeader5, div.MessageHeader { text-align:center; }

}

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

	/*Div Layout css */
	Div.PluginColumn {
		width:100%;	
	}

	Div.OptiFaces {
		width:100%;
	}

	.ColumnOne {
		width:50%;	
	}
	
	.ColumnTwo {
		width:50%;
	}
	
	.ColumnThree {
		width:100%;	
	}
	
	Div.MenuGroup1 {
		width:50%;	
	}
	
	Div.MenuGroup2 {
		width:50%;
	}
	
	Div.MenuGroup3 {
		width:100%;	
	}
	
	
	#ContactList {
		width:100%;	
	}
	
	Div.BigImg {
		width:100%;	
	}
	
	.Display8 {
		Display:none;	
	}
	
	.Block8 {
		display:block;	
		width:100%;
	}
	
	.video-container {
		width: 100%;
	}
	.video-container .video, iframe {
		width:550px;
		height:310px;
	}
	
	.searchFrame {
		width:550px;
		min-height:1400px;
	}
	
	#mycontrol .gs-webResult {
		max-width:536px !important;
	}
	
	form, textarea.Full {
		width:100%;	
	}

	/* wowslider css */
	/*#wows1, #wows2, #wows3, #wows4, #wows5, #wows6, #wowslider-container1, #wsimages {
		max-width:550px;
		max-height:197px;
	}*/
	
	/*#wowslider-container1 .ws_images {
		max-width:550px;
		height:197px;	
	}*/

	div.LeadersHeader1, div.LeadersHeader2, div.LeadersHeader3, div.LeadersHeader4, div.LeadersHeader5, div.MessageHeader { text-align:center; }
}

/************************************************************************************
smaller than 700
*************************************************************************************/
@media screen and (max-width: 700px) {
	
	Div#BorderBG {
		padding: 0px 25px 0px 25px;	
	}
	
	.Display {
		Display:none;	
	}
	
	.EntireWidth {
		width:100%;
	}
	
	.video-container {
		width: 100%;
	}
	
	.video-container .video, iframe {
		width:450px;
		height:255px;
	}
	
	.searchFrame {
		width:450px;
		min-height:1400px;
	}
	
	#mycontrol div.gs-webResult.gs-result {
		width:437px !important;	
	}
	
	.Block7 {
		display:block;	
		width:100%;
	}
	
	/* wowslider css */
	
	/*#wows1, #wows2, #wows3, #wows4, #wows5, #wows6, #wowslider-container1, #wsimages {
		max-width:475px;
		max-height:170px;
	}*/
	
	/*#wowslider-container1 .ws_images {
		max-width:475px;
		height:170px;	
	}*/
	
	div.LeadersHeader1, div.LeadersHeader2, div.LeadersHeader3, div.LeadersHeader4, div.LeadersHeader5, div.MessageHeader { text-align:center; }
}

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

	/*Div Layout css */
	
	Div#MainForm {
		float:left;	
	}
	
	.ColumnOne {
		width:100%;	
	}
	
	.ColumnTwo {
		width:100%;
	}
	
	Div.MenuGroup1 {
		width:100%;	
	}
	
	Div.MenuGroup2 {
		width:100%;
	}
	
	div#OptiFace2 {
		float:right;
		margin:0;
		width:100%;	
	}
	
	Div.BBone {
		width:20%;
	}
	
	Div.BBtwo {
		width:20%;
	}
	
	Div.BBthree {
		width:20%;	
	}
	
	Div.BBfour {
		width:40%;
	}
	
	.Block6 {
		display:block;	
		width:100%;
	}
	
	.fluidJW {
		width:100%;	
	}
	
	.VidFloat {
		Width:100%;	
	}
	
	.video-container {
		width: 100%;
	}
	.video-container .video, iframe {
		width:405px;
		height:230px;
	}
	
	.searchFrame {
		width:405px;
		min-height:1400px;
	}
	
	.gs-webResult {
		width:393px;	
	}
	
	/* Form resizing*/
	
	form.Full, textarea.Full, input.Full, select.Full {
		width:100%;	
	}
	
	form.Full, input[type=text], input[type=password], textarea {
		width:100%;	
	}

	#OI_Footer {
	height:140px; /* for floating footer at bottom of page */
	margin-top:-140px; /* for floating footer at bottom of page (151px when social-media icons falls to next line) */
	}
	/* wowslider css */
	/*#wows1, #wows2, #wows3, #wows4, #wows5, #wows6, #wowslider-container1, #wsimages {
		max-width:350px;
		max-height:125px;
	}*/
	
	/*#wowslider-container1 .ws_images {
		max-width:350px;
		max-height:125px;	
	}
	
	#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
		top:15%;	
	}
	
	#wowslider-container1  .ws_bullets {
		right:35%;	
	}
	
	#wowslider-container1 .ws-title {
		padding:2px;
		bottom:2%;
	}*/

	div.LeadersTitle, div.LeadersHeader1, div.LeadersHeader2, div.LeadersHeader3, div.LeadersHeader4, div.LeadersHeader5, div.LeadersMenuBar, div.MessageHeader { text-align:left; }
}

@media screen and (max-width: 500px) {
	
	Div#BorderBG {
		padding: 0px 10px 0px 10px;	
	}
	
	div.SocialLinks {
		width:100%;
		min-width: 200px;
		height: 100%;
		margin: 0 auto;
		text-align:left;
		padding: 10px 0px 10px 0px;
	}
	
	.searchBox {
		text-align:left;
		float:left;
	}
	
	Div.FootContainer {
		width:50%;
		float:left;
	}
	
	Div.BBone {
		width:100%;
	}
	
	Div.BBtwo {
		width:100%;
	}
	
	Div.BBthree {
		width:100%;	
	}
	
	Div.BBfour {
		width:50%;
	}
	
	.Block {
		display:block;	
		width:100%;
	}
	
	.Block5 {
		display:block;	
		width:100%;
	}
	
	.BBfour a.BottomMenu {
		display:block;	
	}
	
	.video-container {
		width: 100%;
	}
	.video-container .video, iframe {
		width:325px;
		height:185px;
	}
	
	.searchFrame {
		width:325px;
		min-height:1400px;
	}
	
	.gs-webResult {
		width:314px;	
	}
	
	/* Force table to not be like tables anymore */
	table#NCB, table#NCB tr.TableRowDetail,  table#NCB tr.TableRowDetail td,
	table.adj, thead.adj, tbody.adj, th.adj, td.adj, tr.adj, tr.adj td { 
		display:inline-block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
		
	tr.adj, tr.TableRowDetail { 
		border:1px solid #ccc; 
		width:100%;
	}


	/* old */
	tr.adj > td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		width:100%;
		padding-left: 50%;
		padding-top:12px;
		padding-bottom:12px;
	}

	/* old */
	tr.adj > td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 6px;
		width: 100%; 
		padding-right: 10px;
		white-space: pre;
	}
	

	/* Try to use this instead of above.  "tr.adj > td"; means all "td" elements under the "tr", but don't include the "tr" */
	table#NCB tr.TableRowDetail > td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		width:100%;
		padding-left: 50%;
		padding-top:12px;
		padding-bottom:12px;
	}

	table#NCB tr.TableRowDetail > td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 6px;
		width: 100%; 
		padding-right: 10px;
		white-space: pre;
	}
	


	/* Hide the table header, when screen-width has shrucked */
	table#NCB tr.TableRowHeader,
	tr.adjx, td.adjx {
		display:none;	
	}

	/* Label the data, as we are hiding the header */
	/* /member/newclub14.cfm & /member/newclubs.cfm */
	/* Since the table row header is invisible, add the column header names to each line of the detail */
	tr.adj td:nth-of-type(1):before { content: "Club Name"; }
	tr.adj td:nth-of-type(2):before { content: "District"; }
	tr.adj td:nth-of-type(3):before { content: "Sponsor Club(s)"; }
	tr.adj td:nth-of-type(4):before { content: "Charter Date"; }
	tr.adj td:nth-of-type(5):before { content: "Builder(s) of Excellence"; }

	table#NCB tr.TableRowDetail td:nth-of-type(1):before { content: "Club Name"; }
	table#NCB tr.TableRowDetail td:nth-of-type(2):before { content: "District"; }
	table#NCB tr.TableRowDetail td:nth-of-type(3):before { content: "Sponsor Club(s)"; }
	table#NCB tr.TableRowDetail td:nth-of-type(4):before { content: "Charter Date"; }
	table#NCB tr.TableRowDetail td:nth-of-type(5):before { content: "Builder(s) of Excellence"; }
	table#NCB tr.TableRowDetail td:nth-of-type(6):before { content: "Club Type"; }

	/* e/member/whitepaper1.cfm */
	td.tbl:nth-of-type(1):before { content: "Club"; }
	td.tbl:nth-of-type(2):before { content: "District"; }
	td.tbl:nth-of-type(3):before { content: "Representative"; }
	td.tbl:nth-of-type(4):before { content: "Position"; }
	
	/* e/member/marketing4.cfm */
	td.tbl2:nth-of-type(1):before { content: "Description"; }
	td.tbl2:nth-of-type(2):before { content: "Length"; }
	td.tbl2:nth-of-type(3):before { content: "Quality"; }
	td.tbl2:nth-of-type(4):before { content: "Size in\A Bytes"; }
}

@media screen and (max-width: 400px) {
	.Block4 {
		display:block;	
		width:100%;
	}
	
	/*#wowslider-container1 {
		display:none;	
	}*/
	
	.video-container {
		width: 100%;
	}
	.video-container .video, iframe {
		width:240px;
		height:165px;
	}	
	
	.searchFrame {
		width:240px;
		min-height:1400px;
	}
	
	.gs-webResult {
		width:229px;	
	}
	

	tr.adj td:nth-of-type(1):before { content: "Club\A Name"; }
	tr.adj td:nth-of-type(2):before { content: "District"; }
	tr.adj td:nth-of-type(3):before { content: "Sponsor\A Club(s)"; }
	tr.adj td:nth-of-type(4):before { content: "Charter\A Date"; }
	tr.adj td:nth-of-type(5):before { content: "Builder(s) of\A Excellence"; }
	

	table#NCB tr.TableRowDetail td:nth-of-type(1):before { content: "Club\A Name"; }
	table#NCB tr.TableRowDetail td:nth-of-type(2):before { content: "District"; }
	table#NCB tr.TableRowDetail td:nth-of-type(3):before { content: "Sponsor\A Club(s)"; }
	table#NCB tr.TableRowDetail td:nth-of-type(4):before { content: "Charter\A Date"; }
	table#NCB tr.TableRowDetail td:nth-of-type(5):before { content: "Builder(s) of\A Excellence"; }
	table#NCB tr.TableRowDetail td:nth-of-type(6):before { content: "Club\A Type"; }

	div.LeadersTitle, div.LeadersHeader1, div.LeadersHeader2, div.LeadersHeader3, div.LeadersHeader4, div.LeadersHeader5, div.MessageHeader { text-align:left; }
}

@media screen and (max-width: 300px) {
	
	.Block3 {
		display:block;	
		width:100%;
	}
}