/* Virtual Programming CSS Document */
#mainHeader {
	top:0;
	left:0;
	width:100%;
	padding:8px 5% 0 5%;
	border-bottom: 1px dotted #999;
}
#logo {
	top:10px;
	left:5%;
}
#topNav1 li .dropNav {
    top:39px;
}

.VPwrap {margin:0;}
.VPwrap article {
	margin:80px auto;
	text-align:center;
}
.VPwrap article h2 {
	font-size: 1.5em;
	padding:0 10%;
}
.VPwrap article:after {
	content: "";
  	display:block;
	width: 30px;
  	height: 8px;
  	background: #ff9933;
  	margin: 100px auto;
}
.bigTxt {
	font-family:Geometric Slab;
	font-size:1.48em;
	line-height:1.5em;
	width:70%;
	max-width:1000px;
	margin:0 auto;
	color:#666;
}
.longTxt {
	width:94%;
	max-width:2000px;
	margin: 20px auto;
	column-count:2;
	column-gap:20px;
	text-align:left;
	line-height:1.35em;
}
.shortTxt, .mediaVid {
	width:60%;
	max-width:900px;
	margin:0 auto;
	text-align:justify;
	line-height:1.25em;
}
.mediaImg {
	width:80%;
	max-width:1400px;
	margin:20px auto;
}
.videoWrap {
	position: relative;
	/*margin-top:1em;*/
	margin-bottom:2em;
	padding-bottom: 56.25%; /* 16:9 */
	/*padding-top: 25px;*/
	height: 0;
}

.imgPaypal {
	width:200px;
	margin:30px auto 60px auto;
}

.pastLinks {
	width:90%;
	margin:auto;
	text-align:center;		
}
.pastLinks #nextLink {float:right;}
.pastLinks #nextLink:link, .pastLinks #nextLink:visited {
	padding:0px;
	padding-right:40px;
	background:url(/img-base/arrow-next-999.png) no-repeat;
	background-position:right;
	background-size:contain;
}
.pastLinks #nextLink:hover, .pastLinks #nextLink:active {
	padding:0px;
	padding-right:40px;
	background:url(/img-base/arrow-next-on.png) no-repeat;
	background-position:right;
	background-size:contain;
}

.pastLinks #prevLink {float:left;}
.pastLinks #prevLink:link, .pastLinks #prevLink:visited {
	padding:0px;
	padding-left:40px;
	background:url(/img-base/arrow-prev-999.png) no-repeat;
	background-position:left;
	background-size:contain;
}
.pastLinks #prevLink:hover, .pastLinks prev#Link:active {
	padding:0px;
	padding-left:40px;
	background:url(/img-base/arrow-prev-on.png) no-repeat;
	background-position:left;
	background-size:contain;
}


footer, #fixedFooter { border-top: 1px dotted #999;}
#fixedFooter div form {float:right; margin-left:5px; margin-bottom:0;}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
/* retina, stuff to override above media query */
#mainHeader {
	padding:4px 6% 4px 6%;
}
#logo {
	top:10px;
	left:6%;
}
#topNav1 li .dropNav {
    top:35px;
}

.longTxt {
	width:94%;
	max-width:2000px;
	margin: 20px auto;
	column-count:3;
	column-gap:20px;
	text-align:left;
	line-height:1.35em;
}


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1500px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1500px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1500px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1500px),
only screen and (                min-resolution: 192dpi) and (min-width: 1500px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1500px) { 
/* retina, stuff to override above media query */
#mainHeader {
	padding:10px 7% 4px 7%;
}
#logo {
	left:7%;
	top:10px;
}
#topNav1 li .dropNav { top:48px;}

}

@media
only screen and (max-width: 950px),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-device-width: 950px),
only screen and (        min-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (                min-resolution: 192dpi) and (max-device-width: 950px),
only screen and (                min-resolution: 2dppx)  and (max-device-width: 950px) { 
/* For Tablet and smaller size screen menu */

.longTxt { width:90%;}

}

@media
only screen and (max-width: 950px),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-device-width: 950px),
only screen and (        min-device-pixel-ratio: 2)      and (max-device-width: 950px),
only screen and (                min-resolution: 192dpi) and (max-device-width: 950px),
only screen and (                min-resolution: 2dppx)  and (max-device-width: 950px) { 
/* For Tablet and smaller size screen menu */
#logo {
	top:20px;
	left:3%;
}
#mainHeader {
	top:0;
	right:-40px;
	left:auto;
	width:auto;
	height:100%;
	background:none;
}
.menu ul, .menu ul .dropNav {
	display: none;
	position:static;
	padding:0;
	border:none;
}
.menu {
	position:absolute;
	top:20px;
	right: -220px;
	padding:0;
	padding-top:50px;
	min-width:200px;
	background:#FFF;
	border:1px dotted #666;
}
.menu.active {
	position:absolute;
	top:20px;
	right: 60px;
}

}


@media only screen and (max-device-width: 700px),
	   only screen and (max-width: 950px) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-device-width: 950px) and (orientation: landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-device-width: 950px) and (orientation: landscape),
only screen and (        min-device-pixel-ratio: 2)      and (max-device-width: 950px) and (orientation: landscape),
only screen and (                min-resolution: 192dpi) and (max-device-width: 950px) and (orientation: landscape),
only screen and (                min-resolution: 2dppx)  and (max-device-width: 950px) and (orientation: landscape) {
/* For all PHONE layouts */
.menu {
	position:fixed;
	top:0px;
	min-width:150px;
	height:100%;
	overflow:scroll;
}
.menu.active {
	position:fixed;
	top:0px;
	right: 0px;
}
.menu-opener {
	top:18px;
	right:15px;
}
.menu-opener-inner {
  margin-top:11px;
}
}