/* ------------- STRUCTURE -------------------*/
@media screen and (min-width: 2000px) {	#pagewrap {max-width: 1620px;}}


@media screen and (min-width: 1800px) {	
	#pagewrap 	{	width: 80%;	}
	img.logo	{	max-width: 40%;	margin: 30px 0;}
}



/* for 1200px or less */
@media screen and (max-width: 1370px) {	
	#pagewrap {
		width: 100%;
		margin: 0px auto;
	}
	.bigcol {
		overflow:hidden;
	}
	.section, #header, .navContainer	{	
	padding: 0 30px;	
	}	
	.menucol>.section	{
	padding-left: 6%;	
	}
	
}

/* -- iPad Landscape --*/

@media screen and (max-width: 1100px) {	
	span.didactic {		
	font-size: 15px;	
	}
	span.didacticDetail  {	
	font-size: 12px;
	}
	a.newclub	{	
		width: 80px; height: 80px;	
		background-size: 80px 80px;	
	}	
	a.rcs	{	
		width: 40px;  height: 95px;	
		background-size: 40px 95px;
		margin: -25px 8px -30px -3px;
	}
	a.signet	{	
		width: 80px; height: 80px;		
		background-size: 80px 80px;			
	}
	a.forth	{	
		width: 51px; height: 70px;		
		background-size: 51px 70px;		
	}
	a.royalSociety	{	
		width: 92px;
    	height: 62px;	
		background-size: 92px 62px;
		margin: -5px 8px -32px -3px;
	}
	a.heriot	{	
		width: 74px; height: 60px;	
		background-size: 74px 60px;		
	}
	a.halls	{	
		width: 90px; height: 54px;	
		background-size: 90px 54px;		
	}
	a.glasgow	{	
		width: 100px; height: 56px;
		background-size: 100px 56px;	
	}
	a.RCPSG	{	
		width: 70px; height: 75px;	
		background-size: 70px 75px;		
	}
	a.edinCouncil	{	
		width: 60px;  height: 64px;	
		background-size: 60px 64px;	
	}
	a.parliamentHall	{	
		width: 70px; height: 70px;	
		background-size: 70px 70px;
	}
	br.phone	{
		display: inline;
	}
	.section div.textbox {		
		padding: 30px 30px;
	}
	span#mural	{	
	max-height: 45em;	
	}
	.section img#me {  
	right: 350px;
	top: -810px;	
	}
}


@media screen and (max-width: 870px) {
	ul.menu li.bbc, ul.menu li.wiki, ul.menu li.sc {		
		display: none;
	}
	span#mural	{	
	max-height: 35em;	
	}
	.section img#me {  
	right: 350px;
	top: -700px;	
	}
}



/* iPad Portrait (switch to one col) */
@media screen and (max-width: 840px) {
	#pagewrap {
		width: 100%;
		margin: 0;		
	}
	.section, #header, .navContainer, .pictureLinks		{	
		padding: 0 10px;	
	}
	#header span.divider	{
		margin-top: 10px;
	}
	img.logo	{
		max-width: 70%;
		margin: 25px 0;
	}
	ul.menu	{
		height: 60px;		
	}
	ul.menu li	{		
		width: 24.7%;
		height: 60px;	
	}	
	ul.menu li.still {	
		border-right: none;
		-margin-right: -1px;
	}	
	ul.menu li span.hideTablet, ul.menu li span.hidePhone	{
		display: none;
	}
	ul.menu li a	{
		width: 100%;
		line-height: 60px;
		letter-spacing: 0em;
		font-size: 1.4em;
		-border: 1px dotted green;
		text-align: center;
		padding: 0;
	}
	ul.tabs {
	margin-top: 15px;
	}
	ul.tabs li a	{		
	padding: 16px 34px;
	font-size: 1em;
	}
	h1 {		font-size: 22px;	}	
	h3 {		font-size: 14px;	}
		
	.menucol{	
	display: none;	
	}	
	footer {		
		padding: 10px 10px;
		padding-bottom: 7px;
	}	
	footer ul {
	width: 70%;
	}
	footer ul li {	
	width: 32.0%;
	margin-right: 1.7%;
	}
	footer ul li:nth-child(3) {
		margin-right: 0%;	
	}
	div#base	{	
		font-size: 0.8em;
	}
	br.mobileBreak	{
	display: inline;
	}
	.pictureLinks	{
		display: block;
		margin-top: 30px;			
	}
	.pictureLinks .button	{
		width: 49%;
		-height: 13em;
		float: left;		
		margin: 0;
		padding: 0;			
	}
	.pictureLinks .button img	{
		-position: absolute;
		bottom: -200px;
		margin-bottom: -5px;
		
	}
	.pictureLinks .button:nth-child(3), .pictureLinks .button:nth-child(5), .pictureLinks .button:nth-child(7)	{
		clear: both;
	}
	.pictureLinks .button:nth-child(2), .pictureLinks .button:nth-child(4), .pictureLinks .button:nth-child(6), .pictureLinks .button:nth-child(8)	{
		float: right;
	}
	.pictureLinks .divider	{
		padding: 0 40px;
		margin: 10px 0;
	}
	div.nameField, div.emailField	{ width: 100%;}	
	p {	margin: 5px 10px 15px 10px;	}
	h1{	margin-left: 0.3em;	}	
	br.phone	{	display: none;	}
	.section div.textbox {		
		padding: 30px 10px;
	}
	span#mural	{	
	max-height: 40em;	
	}
	.section img#me {  
	right: 260px;
	top: -800px;	
	}
}
	


/* Phone Portrait */
@media screen and (max-width: 500px) {
	.hidePhone	{
		display: none;
	}
		img.logo	{
		max-width: 80%;
		margin: 15px 0;		
	}
	#pagewrap {
		width: 100%;
		margin: 0;
		-background-color: #777777;
	}
	
	ul.menu li span.hidePhone 	{
		display: none;
	}
	ul.menu, ul.menu li	{
		height: 50px;		
	}
	ul.menu li a	{		
		font-size: 0.9em;
		line-height: 48px;
	}
	ul.tabs	{	
	margin-top: 15px;
	margin-bottom: 10px;
	}
	ul.tabs li a	{		
	padding: 15px 23px;
	font-size: 0.7em;	
	}
	.section, #header, .navContainer, .pictureLinks	{	
	padding: 0 0 0 0px ;	
	}
	.section, #header, .navContainer, .pictureLinks	{	
	margin-right: 0px;	
	}
	.section	{	
	margin-top: 20px;
	}
	h1 {
		font-size: 20px;
	}
	h2 {
	font-size: 16px;
	}
	
	span.didactic {		
	font-size: 13px;
	bottom: 15px;
	}
	span.didacticDetail  {	
	font-size: 11px;
	margin-top: 4px;
	}
	a.newclub	{	
		width: 50px; height: 50px;	
		background-size: 50px 50px;
		margin: -2px 5px -15px -3px;
	}	
	a.rcs	{	
		width: 26px;  height: 67px;	
		background-size: 26px 67px;
		margin: -20px 8px -25px -3px;
	}
	a.signet	{	
		width: 50px; height: 50px;	
		background-size: 50px 50px;
		margin: -4px 5px -16px -3px;
	}
	a.forth	{		
		width: 35px; height: 50px;
		background-size: 35px 50px;
		margin: -4px 11px -16px -3px; 
	}
	a.royalSociety	{	
		width: 70px; height: 47px;	
		background-size: 70px 47px;
		margin: -3px 8px -23px -3px;
	}
	a.heriot	{	
		width: 52px; height: 43px;	
		background-size: 52px 43px;
		margin: 0px 10px -12px -3px;
	}
	a.halls	{	
		width: 60px; height: 37px;	
		background-size: 60px 37px;
		margin: 0px 12px -18px -3px;
	}
	a.glasgow	{	
		width: 70px; height: 40px;
		background-size: 70px 40px;	
		margin: 0px 12px 0px -3px;
	}
	a.RCPSG	{	
		width: 47px; height: 50px;	
		background-size: 47px 50px;	
		margin: -5px 12px -23px -2px;
	}
	a.edinCouncil	{	
		width: 40px; height: 44px;	
		background-size: 40px 44px;
		margin: 0px 11px -20px -3px;
	}
	a.parliamentHall	{	
		width: 45px; height: 45px;	
		background-size: 45px 45px;
		margin: -5px 11px -20px -3px;
	}
	br.phone	{
		display: inline;
	}
	span.img {
	margin-bottom: 5px;
	}
	.button span.didactic, .button span.didacticDetail {	
	font-size: 0.7em;
	
	}
	a.price {	
	line-height: 2.9em;	
	font-size: 0.9em;	
	width: 2.9em;
	height: 2.9em;	
	}
	a.sold {	
	line-height: 3.7em;
    font-size: 0.7em;
    width: 2em;
    height: 2em;	
	}
	span#mural	{	
	max-height: 25em;	
	}
	.section img#me {  
	right: 280px;
	top: -500px;	
	}
	
}

}