@charset "utf-8";

/*seems to be very important to add margin:0px to the body, to stop there being a thin gap around the child containers
i'd have thought you'd set padding, but nope, it's the margin that seems to control this.
also, setting background color as well as image stops white flash when page loads*/
body
{
	background-image: url(norobot/images/pattern02.png);
	background-attachment: scroll;
	padding: 0px;
	margin: 0px;
	background-color: #343251;
}

/*this is a class I apply to body in script, it stops scrolling when the menu overlay is displayed*/
.bodyNoScroll
{
	overflow: hidden; /*this along is enough to prevent scroll on pc browsers*/
	/*for it to work on iOS, you also need to add these...*/
	height: 100%;
	width: 100%;
	position: fixed;
}


/*IE puts outlines around image links - this removes them*/
a img
{
	outline: none;
	border: none;
}

/*put an empty div with this class anywhere you wanna clear floats*/
.clearFixHack
{
	clear:both;	
}

#centralContent
{
	/*width: 980px;*/
	width: 100%;
	max-width: 980px;
	
	
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;	
	
	/*temp test stuff*/
	/*the following prevents page scroll*/
	/*
	overflow:hidden; 
	position:absolute;   	 
  	top:0;
  	bottom:0;
  	left:50%;
  	margin-left: -490px;
	*/
}

/*custom font stuff october 2022*/

@font-face {
    font-family: 'bangers';
    src: url('fonts/Bangers-Regular.woff2') format('woff2'),
        url('fonts/Bangers-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'acme';
    src: url('fonts/Acme-Regular.woff2') format('woff2'),
        url('fonts/Acme-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'londrina-solid';
    src: url('fonts/LondrinaSolid-Regular.woff2') format('woff2'),
        url('fonts/LondrinaSolid-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#shopCategoryLinks h1 
{
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 0px;
	margin: 0px;
	font-size: 25px;
	font-family: acme, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
	color: #C7C7E9;
	
	/*border-top-style:none;
    border-right-style: dotted;
    border-bottom-style: none;
    border-left-style: dotted;*/
}

#shopCategoryLinks h1 a
{
	color:#C7C7E9;
	text-decoration:none;
}

#shopCategoryLinks h1 a:hover
{
	color: #FFFFFF;
}

#shopCategoryLinks 
{
	/*width: 830px;*/
	/*height: 80px;*/
	margin-left: auto;
	margin-right: auto;
	padding-left:10px;
	padding-right:10px;
	padding-top:20px;
	padding-bottom:20px;
	text-align: center;	/*this also makes inline-block elements centre themselves (not just text)*/
	background-image: url(norobot/images/shopCategoryBackground.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
#ticketBoomContainer 
{
	width: 305px;
	height: 245px;	
}

#ticketBoomContainer img
{
	/*margin:10px;*/
	padding:10px;
	width: 285px;
	height:225px;
}








#centralBorderLeft, #centralBorderRight
{
	width: 48px;
	position: absolute;	
	top: 0px;
	bottom: 0px;
	z-index: 1;		
}

#centralBorderLeft
{	
	left: -32px;	
	background-image: url(norobot/images/pattern01_borderLeft.png);
}
#centralBorderRight
{	
	right: -32px;	
	background-image: url(norobot/images/pattern01_borderRight.png);
}

/*the background colours are a midpoint blend between the two - http://meyerweb.com/eric/tools/color-blend/ */

.blue_red 
{
	background-color: #A56889;
	background-image: url(norobot/images/bg_transition.png);
}
.red_blue 
{
	background-color: #A56889;
	background-image: url(norobot/images/bg_transition2.png);
}
.red_beige 
{
	background-color: #E1967B;
	background-image: url(norobot/images/bg_transition3.png);
}
.beige_blue
{
	background-color: #B5B6B2;
	background-image: url(norobot/images/bg_transition4.png);
}
.blue_beige
{
	background-color: #B5B6B2;
	background-image: url(norobot/images/bg_transition5.png);
}
.beige_red
{
	background-color: #E1967B;
	background-image: url(norobot/images/bg_transition6.png);
}
.lightBlue_red
{
	background-color: #CC879E;
	background-image: url(norobot/images/bg_transition7.png);
}
.beige_lightBlue
{
	background-color: #DCD6C6;
	background-image: url(norobot/images/bg_transition8.png);
}
.lightBlue_beige
{
	background-color: #DCD6C6;
	background-image: url(norobot/images/bg_transition9.png);
}
.darkRed_beige
{
	background-color: #C08268;
	background-image: url(norobot/images/bg_transition10.png);
}
.darkRed_blue
{
	background-color: #845476;
	background-image: url(norobot/images/bg_transition11.png);
}
.darkRed_red
{
	background-color: #AD3C4A;
	background-image: url(norobot/images/bg_transition12.png);
}
.blue_darkRed
{
	background-color: #845476;
	background-image: url(norobot/images/bg_transition13.png);
}
.red_darkRed
{
	background-color: #AD3C4A;
	background-image: url(norobot/images/bg_transition14.png);
}
.lightBlue_darkRed
{
	background-color: #A87C95;
	background-image: url(norobot/images/bg_transition15.png);
}
.beige_darkRed
{
	background-color: #C08268;
	background-image: url(norobot/images/bg_transition16.png);
}
.darkRed_lightBlue
{
	background-color: #A87C95;
	background-image: url(norobot/images/bg_transition17.png);
}

.bgSep
{
	height:32px;
	background-repeat: repeat-x;
	
	padding: 0px;
	
	/*hack for ios screens to avoid tiny cracks appearing*/
	margin-top:-1px;
	margin-bottom:-1px;
	margin-left:0px;
	margin-right:0px;
}

/*.content
{
	width: 950px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
}*/

.bgBlue, 
.bgRed, 
.bgBeige,
.bgLightBlue,
.bgDarkRed
{
	margin: 0px;
	padding: 0px;		
}

.bgBlue
{
	background-color: #7988c0;
}
.bgRed 
{
	background-color: #d14752;
}
.bgBeige
{
	background-color: #F0E4A3;
}
.bgLightBlue
{
	background-color: #C7C7E9;
}
.bgDarkRed
{
	background-color: #8f1f2c;
}

.bigLinkPicLeft 
{
	float: left;
	/*width: 300px;
	height: 300px;
	margin-top: 8px;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: 8px;*/
	
	width:316px;
	height:316px;
	margin:0px;
}

.bigLinkPicLeft img
{
	padding: 8px;

}


#mapContainer
{
	/*height: auto;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 800px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;*/
	
	/*width: 800px;
	height: 600px;*/
	width: 85%;
	padding: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;	
}

/*#mapContainer iframe
{
	width: 100%;
	height: 100%;
}*/

#bigLinkPicContainer 
{
	/*height: 948px;*/
	/*width: 948px;*/
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	
}

#vidsEtcColumn1,
#vidsEtcColumn2
{
	display: block;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

#vidsEtcColumn1
{
	width: 540px;
}

#vidsEtcColumn2
{
	width: 396px;
}

#vidsEtcContainer
{
	/*height: 700px;*/
	width: 96%;	
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
}
#headerContainer 
{
	height: 500px;
}

#headerContainer img
{
	margin-top: 30px;
	margin-left: -10px;

}
#headerBottom h2
{
	/*
	font-family: acme, "Times New Roman", serif;
	color: #C7C7E9;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 0px;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	*/
	
	font-family: londrina-solid, "Times New Roman", serif;
	color: #C7C7E9;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0px;
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
}

#topHeaderBlurb h2
{
	/*bleh, supposed to fix the "light text on dark is too bold" issue, but seems to do nothing...*/
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	
	font-family: londrina-solid, "Times New Roman", serif;
	color: #F0E4A3;
	text-align: right;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 20px;
	font-style: normal;
	font-weight: 200;
}

#topHeaderBlurb
{
	position: absolute;
	height: 40px;
	width: 600px;
	top: 10px;
	right: 120px;
	z-index: 2;
}


#headerBottom
{
	position: absolute;
	/*left: 15px;*/
	height: 60px;
	/*width: 950px;*/
	width: 100%;
	bottom: 20px;
	z-index: 2;
}

/* floating images always overflow freely outside their containers so to make the div actually change it's height
to contain the thumbs, we can add "overflow: auto;" see here: http://community.sitepoint.com/t/image-overflows-div-containers/3767/3 */
#thumbnailContainer
{
	/*width: 832px;*/
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}




.noteBoardEntry
{
	box-sizing:border-box;
	width: 97%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #F0E4A3;
	padding: 10px;
	text-align: center;	
	border-radius: 32px;	
	border: 4px solid #883141;	
	display: inline-block;	/*needed to work properly with css3 columns*/
	
/*	border: 2px dashed #fff;
	box-shadow: 0 0 0 4px #883141;
	-webkit-box-shadow: 0 0 0 4px #883141;
*/
}

.bgBlue .noteBoardEntry
{
	border: 4px solid #343251;
}


/*uses the "zero height, padding bottom trick" to make it scale maintaining aspect ratio*/
.vidBoxArtist
{
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%; /*1280x720 aspect ratio*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	background-image: url(norobot/images/vidBackground04.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.vidBoxType1 iframe
{
	width: 100%;
	height: 100%;
}

.vidBoxArtist iframe
{
	position:absolute;
	/*make it a bit smaller because the scruffy border behind needs to be visible*/
	top:5%;
	left:5%;
	width: 90%;
	height: 90%;
}

/*a style of vidbox currently used on the home page*/
.vidBoxType1
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 20px;
	width: 500px;
	height: 300px;	
	
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

#vidBox1
{
	background-image: url(norobot/images/vidBackground01.png);
}
#vidBox2
{
	background-image: url(norobot/images/vidBackground02.png);
}

#socialContainer
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 20px;
	width: 350px;	
	height: 500px;
	background-image: url(norobot/images/fbBackground.png);
}
#socialButtonsContainer
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 5px;	
	padding: 0px;
	width: 350px;
	height: 50px;
}
#joinMailingListContainer
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-top: 5px;	
	padding: 0px;
	width: 350px;
	height: 90px;
	background-image: url(norobot/images/purple_splash350.png);
}

#vidsContainer iframe
{
	margin-bottom: 24px;
	
}

/*artist profile pages*/
#artistProfilePic
{
	float: left;
	width: 600px;
	padding-bottom: 20px;
}

#artistLinksInfoNew
{
	/*make them centred*/
	float: none;
	display: block;
	text-align: center;	/*makes the little blocks inside centre justified instead of filling from the left*/	
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 10px;
}

#artistLinksInfo
{
	text-align: center;	/*this also makes inline-block elements centre themselves (not just text)*/
	float: right;
	width: 150px;
	padding:0px;
	margin:0px;
	margin-bottom:10px;
}

#artistLinksInfo .socialButton
{
	float: left;
	width: 30px;
	height: 30px;
	padding-top: 0px;
	padding-right: 1px;
	padding-left: 1px;
	padding-bottom: 20px;
}
#artistLinksInfo .socialButton.first
{
	padding-left:16px;
}

/*new artist page stuff*/

/*div to contain the time and venue info for a singe performance*/
.artistTimeInfoBox
{
	display:inline-block;
	vertical-align: top;	/*without specifying alignment like this, all bets are off as to what it does*/
	width: 140px;
	height: 56px;
	padding:0px;
	margin:5px;
	background-color:#FFFFFF
}

.blurbLeft .artistTimeInfoBox p,
.blurbRight .artistTimeInfoBox p
{
	margin-left:0px;
	margin-right:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:18px;
	text-align:center;
}

.blurbLeft .artistTimeInfoBox h2,
.blurbRight .artistTimeInfoBox h2
{
	margin-left:0px;
	margin-right:0px;
	margin-top:5px;
	margin-bottom:5px;
	font-size:36px;
	text-align:center;
}

#artistAllLinksContainer
{
	/*margin:0px;*/
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
}

/*container for social media links and whatnots*/
.artistLinkButtonContainer
{
	display:inline-block;
	vertical-align:top;
	width:30px;
	height:30px;
	padding:0px;
	margin:0px;	
}

.artistLinkTextContainer
{
	display:inline-block;
	vertical-align:top;
	width:50px;
	height:30px;
	padding:0px;
	margin:0px;	
}

.blurbLeft .artistLinkTextContainer p,
.blurbRight .artistLinkTextContainer p
{
	margin: 0px;
	padding: 0px;
	padding-bottom: 0px;
	margin-bottom:0px;
	font-size: 20px;
	text-align: left;
}




.bgBeige p,
.bgBeige h1,
.bgLightBlue p,
.bgLightBlue h1
{
	color: #343251;
}

.bgBeige h2,
.bgLightBlue h2,
.bgBeige h3,
.bgLightBlue h3
{
	color: #883141;
	
}

.bgBlue p,
.bgRed p,
.bgBlue h1,
.bgRed h1,
.bgBlue h2,
.bgRed h2,
.bgBlue h3,
.bgRed h3
{
	color: #FFFFFF;
}


#socialContainer img {
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#socialContainer p {
	color: #FFFFFF;
	text-align: center;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-weight: bold;
	font-size: 20px;
}
#joinMailingListContainer p 
{
	color: #C7C7E9;
	font-family: acme;
	text-align: center;
	font-size: 22px;
	margin: 0px;
	padding-top:18px;
	font-style: normal;
	font-weight: 400;
}

#joinMailingListContainer a
{
	color: #FFFFFF;
}

#socialButtonsContainer img 
{
	/*margin-left: 12px;*/
	float: left;
	padding-left: 4px;
	padding-right: 4px;
}
#footerContainer p,
#footerContainer p a 
{
	text-align: center;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	color: #F0E4A3;
	font-size: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

#footerContainer h2
{
	font-family: acme, "Times New Roman", serif;
	color: #F0E4A3;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
}



.bapperchaps 
{
	width: 64px;
	height: 89px;
	float: left;
	margin-right: 10px;
	background-image: url(norobot/images/bapperchaps2.png);
}
.bapperchef 
{
	width: 64px;
	height: 100px;
	float: left;
	margin-right: 10px;
	background-image: url(norobot/images/bapperchef.png);
}

.centreText
{
	text-align: center;	
}

#frontPageBlurb
{
	height: 250px;

}

.blurbLeft, .blurbRight
{
	/*width: 780px;*/
	padding-top: 20px;
	padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: auto;	
}

.blurbLeft h1,
.blurbLeft h2,
.blurbLeft h3
{
	text-align:left;	
}
.blurbRight h1,
.blurbRight h2,
.blurbRight h3
{
	text-align:right;	
}

.blurbLeft p, 
.blurbRight p
{
	font-family: acme, "Times New Roman", serif;
	font-size: 20px;
	margin-left: 20px;
	margin-top: 0px;
	font-style: normal;
	font-weight: 400;
	text-align: justify;
	margin-right: 20px;
}


.footerListColumn
{
	margin:0px;
	padding:0px;
	width:200px;
	float:left;
}
.footerListColumn li
{
	text-align: center;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	color: #F0E4A3;
	font-size: 18px;
	margin:0px;
	padding:0px;
	text-decoration: none;
	font-weight: bold;	
	list-style-type:none;
}

/*you'd think applying text-decoration to a li would do it, but no...., apply it to just a*/
.footerListColumn a
{
	text-decoration: none;
}

.footerListColumn a:hover li
{
	color:#8f1f2c;
	background-color:#F0E4A3;
}

.blurbList
{
	margin:0px;
	padding:0px;
}

.blurbList li 
{
	color:#343251;
	font-family: acme, "Times New Roman", serif;
	font-size: 20px;	
	font-style: normal;
	font-weight: 400;
	text-align: left;	
	margin:0px;
	padding:0px;
	/*padding-left:20px;*/
	list-style-type:none;
	
	/*test*/
	box-sizing:border-box;	/*include padding in the width*/
	float:left;
	width:100%;			/*fills the container with 3 columns*/
	padding-left:3%;
}

.blurbList.list3Col li
{
	width:33%;			/*fills the container with 3 columns*/
}

/*you'd think applying text-decoration to .blurbListColumn ul a li would do it, but no...., apply it to just a*/
.blurbList a,
.blurbDanceClassTable a
{
	text-decoration: none;
}

.blurbList a li,
.blurbDanceClassTable a
{
	color:#413124;	
}

/*used when you want to make a list item stand out from the others*/
.blurbList a li.listHighlight 
{
	color:#FFFFFF;
	background-color:#cc6699;
}

.blurbList a:hover li,
.blurbDanceClassTable a:hover
{
	color:#FFFFFF;
	background-color:#d14752;
}

.blurbLeft h3, 
.blurbRight h3
{
	font-family: acme, "Times New Roman", serif;
	font-size: 24px;
	margin-left: 10px;
	margin-top: 0px;
	font-style: normal;
	font-weight: 400;
	margin-bottom: 5px;
}
.blurbLeft h1, 
.blurbRight h1
 {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 40px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: bangers, "Times New Roman", serif;
	/*font-family: londrina-solid, "Times New Roman", serif;*/
	font-style: normal;
	font-weight: 400;
	font-size: 60px;
	border-bottom-width: 4px;
	border-bottom-style: dashed;
}
/* "clear:both" stops it from wrapping around any floating pics - it always starts below the last floating pic*/
.blurbLeft h2, 
.blurbRight h2
 {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: acme, "Times New Roman", serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	clear: both;	
}


/*a box to wrap the thumbnail to allow for javascript animation to change the thumb size*/
.thumbPicWrapper
{
	width:208px;
	height:208px;	
	float:left;
}

.thumbPicWrapper img 
{
	/*width:200px;
	height:200px;*/
	
	/*the parent container is 208 pixels, so 96.2% of this should come out as 200px, the native size of the image*/
	/*according to this, fractional calculations should work as expected: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected*/
	width: 96.2%;
	height: 96.2%;
	
	/*padding:4px;*/
	padding: 1.93%;
}

#newHeaderContent 
{
	/*width: 980px;*/
	width: 100%;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
}

#mainImageSmall,	/* container for small header image*/
#mainImageBig		/* container for big header image*/
{
	position: relative;
	width: 100%;
	overflow: hidden;	/*will use this when i shrink the container for responsive layout (it will crop the image)*/
	z-index: 0;
}

#mainImageSmall 
{
	height: 320px;
}
#mainImageBig 
{
	height: 490px;
}

#mainImageSmall img
{
	width:960px;
	height:290px;
}
#mainImageBig img,
#scruffyHeadImageContainer
{
	width:960px;
	height:460px;
}

/*this keeps all main header images locked all in the same place, useful for fading in/out*/
#mainImageSmall img,
#mainImageBig img,
#scruffyHeadImageContainer
{
	position: absolute;
	top: 30px;
	left:50%;
	margin-left: -480px;	/*half the image width*/
}

#scruffyHeadImageContainer
{
	background-image: url(norobot/images/scruffy-headimage-border-big.png);
	background-size: 100% 100%;
    background-repeat: no-repeat;
	z-index: 2;
}

.fadein
{
	z-index: 0;
	position: relative;
}




/*this is used for the titles of each of the small boxes*/
.noteBoardEntry h1,
.noteBoardEntry h2,
.noteBoardEntry h3
{
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;	
	font-family: acme;	
	font-style: normal;
	font-weight: 400;
	color: #883141;
	/*font-size: 30px;*/
	/*line-height:70%;*/
}

.noteBoardEntry h1
{
	font-size: 30px;
}
.noteBoardEntry h2
{
	font-size:26px;
}
.noteBoardEntry h3
{
	font-size:24px;
}

.noteBoardEntry p
{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;	
	line-height: 20px;	
	color: #343251;
	font-size: 16px;
	margin: 0px;	
}

#footerLinkContainer 
{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 2px dashed #F0E4A3;
	padding-top: 10px;
	border-bottom: 2px dashed #F0E4A3;
	padding-bottom: 10px;
}

.blurbListContainer
{
	/*width: 630px;*/
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;	
	border: 2px dashed #FFFFFF;
}


.blurbListFullWidth
{
	margin-bottom:20px;	
}


.blurbDanceClassTable
{
	width: 600px;
	margin-left: 20px;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	table-layout: fixed;
}

.blurbDanceClassTable td
{
	color:#343251;
	font-family: acme, "Times New Roman", serif;
	font-size: 20px;	
	font-style: normal;
	font-weight: 400;
	text-align: left;
}

/*used as child divs to modify the text inside a blurb container*/
.blurbModCentreText p,
.blurbModCentreText h1,
.blurbModCentreText h2,
.blurbModCentreText h3
{
	text-align:center;	
	margin-left:0px;
	margin-right:0px;	
}

.blurbModCentreText
{
	/*ok, this display:table makes the div block "shrink wrap" around the text inside.
	see here: http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents*/
	display: table;
	border: 2px dashed #FFFFFF;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top:0px;
}

.signUpFormContainer
{
	box-sizing:border-box;
	width:90%;
	max-width:300px;
	border: 2px dashed #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-top:0px;
}

#headerLeftBodge, #headerRightBodge
{
	position: absolute;
	width: 60px;
	height: 150px;
	z-index: 2;
	top: 10px;
}
#headerLeftBodge
{
	left: -40px;	
	background-image: url(norobot/images/headerLeftBodge.png);
}
#headerRightBodge
{
	right:-40px;
	background-image: url(norobot/images/headerRightBodge.png);
}

#logo 
{
	position: absolute;
	top: 10px;
	left: -40px;
	height: 300px;
	width: 1060px;
	z-index: 3;
}

.linkContainer
{
	float: left;
	position: relative;
	padding:0px;
	margin:0px;
	z-index:5;
}

#shopCategoryLinks .linkContainer
{
	float:none;
	display:inline-block;
	vertical-align:central;
	/*left: 20px;
	top: 15px;*/
}

#logo .linkContainer
{	
	top: 70px;
	left: 340px;		
}

#logoBannerContainer
{
	top:0px;
	left:0px;
	width: 1060px;
	height: 260px;
	position: absolute;
	background-image: url(norobot/images/header_logo2026.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 4;
}



.linkContainer img
{
	z-index:5;	
}

/*well, this is pretty simple and clever - to make child stuff (in this case the ul) visible only when hover
over a parent element, you add two visibility rules, with one in the hover state of the parent, as follows...*/

/*.linkContainer:hover ul
{
	visibility: visible;	
}*/

.linkContainer ul  
{
	visibility: hidden;	/*default is hidden but gets overriden to visible when hovering*/
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	text-align: left;
	position: absolute;
	top: 50px;
	left: -10px;
	width: 200px;
	font-size: 20px;
	border: 3px solid #343251;
	font-family: acme, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
}

.linkContainer ul li
{
	background-color: #6c6aab;
	padding-left: 20px;
	border-top: 2px solid #95A5E0;
	border-bottom: 1px solid #404966;
}
.linkContainer ul li:hover
{
	background-color: #d14752;
	border-bottom-color:#913139;
	border-top-color:#ff5765;
}

.linkContainer ul a:link,
.linkContainer ul a:visited,
.linkContainer ul a:hover,
.linkContainer ul a:active
{
	color: #FFFFFF;
	text-decoration:none;
}
#headerFBBox 
{
	height: 40px;
	width: 88px;
	position: absolute;
	top: 5px;
	right: 20px;
	z-index: 3;
}
#headerFBBox img
{
	float: left;
	padding-left:2px;
	padding-right:2px;
}


#lineUpThumbsContainer 
{
	/*width: 960px;*/
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
}
.lineUpThumb 
{
	float: left;
	width: 240px;
	height: 240px;
	position: relative;
}

.lineUpThumbMoreInfo
{
	position: absolute;
	width:240px;
	height:240px;
	top:0px;
	left:0px;
	visibility:hidden;
	/*background-image:url(images/lineup/moreinfo.png)*/
}

.lineUpThumb:hover .lineUpThumbMoreInfo
{
	visibility:visible;
}

.lineUpThumbLabel 
{
	position: absolute;
	width: 240px;
	height: 50px;
	top: 160px;
}

.lineUpThumbLabel h1,
.lineUpThumbLabel h2,
.lineUpThumbLabel h3,
.lineUpThumbLabel h4
{
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-family: acme, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
	color: #C7C7E9;
}

/*.lineUpThumb:hover .lineUpThumbLabel h1,
.lineUpThumb:hover .lineUpThumbLabel h2,
.lineUpThumb:hover .lineUpThumbLabel h3
{
	color: #FFFFFF;
}*/

.lineUpThumbLabel h1
{
	padding-top: 10px;
	font-size: 26px;
}
.lineUpThumbLabel h2 
{	
	font-size: 22px;
}
.lineUpThumbLabel h3
{
	padding-top: 5px;
	font-size: 18px;
}
.lineUpThumbLabel h4
{
	padding-top: 3px;
	font-size: 14px;
}

/*full screen menu stuff (for narrow screens)*/
#fsMenuContainer
{
	display: none;
	/*set it to fixed and make it fill just the viewport
	but we can scroll vertically*/
	position:fixed;
	overflow-y: scroll;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	z-index: 10;
	background-color: #6c6aab;
}

#fsMenuContainer ul
{
	width:100%;
	max-width:700px;
	list-style-type: none;
	box-sizing:border-box;
	padding:0px;
	padding-left:25px;
	padding-right:110px;	
	margin:0px;
	margin-top:20px;
	text-align: left;
	font-size: 30px;
	font-family: acme, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;	
}

#fsMenuContainer ul li
{
	background-color: #6c6aab;
	border-top: 2px solid #95A5E0;
	border-bottom: 1px solid #404966;
	
	padding-left: 30px;
	padding-top: 5px;
	padding-bottom: 5px;	
}

#fsMenuContainer ul li:hover
{
	background-color: #d14752;
	border-bottom-color:#913139;
	border-top-color:#ff5765;
}

#fsMenuContainer ul a:link,
#fsMenuContainer ul a:visited,
#fsMenuContainer ul a:hover,
#fsMenuContainer ul a:active
{
	color: #FFFFFF;
	text-decoration:none;
}

#fsMenuHeader
{
	padding: 20px;
	margin:0px;
}

#fsMenuXButton
{
	position: fixed;
	top: 4px;
	right: 20px;
}

#fsMenuContainer h2 
{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-family: bangers, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
	font-size: 50px;
	color: #95A5E0;
}

#fsMenuContainer h3
{
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	font-family: londrina-solid, "Times New Roman", serif;
	color: #95A5E0;
	font-size: 40px;
	font-style: normal;
	font-weight: 400;

	
	
}





/*photo box test stuff*/
#photoBoxBase
{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0px;
	left: 0px;
	background-image: url(norobot/images/transparentBlack.png);
	background-repeat: repeat;
}

#photoCopyrightInfo
{
	z-index:12;
	position:absolute;
	height:20px;
	width:600px;
	top:0px;
	left:50%;
	margin-left:-300px;	
}
#photoCopyrightInfo p
{
	color: #F0E4A3;
	text-align: center;
	font-size: 14px;
	padding: 0px;
	margin-top: 0px;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;	
}
#photoCopyrightInfo a
{
	color:white;
}


#photoBox
{
	/*background-image: url(images/mr_miss_vintage/gallery/DSC_3274_1200.jpg);*/
	/*width:1200px;
	height:800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:auto;*/
	/*width:95%;
	height:95%;
	top:2.5%;
	left:2.5%;*/
	top:60px;
	bottom:0px;
	left:0px;
	right:0px;
	background-repeat: no-repeat;
	background-size:contain;
	background-position:center;	
	position:absolute;
	/*min-width:300px;
	min-height:200px;*/
	/*max-width:1200px;
	max-height:800px;*/
}

#galleryControls
{
	position:absolute;
	z-index:11;
	height:80px;
	width:500px;
	top:5px;
	left:50%;
	margin-left:-250px;	
	
	
	/*simple trick to vertically center - http://stackoverflow.com/a/396255*/
	/*top: 50%;
	margin-top:-80px;*/
}

#galleryBackToThumbs
{
	float:left;
	height:80px;
	width:200px;	
	background-image:url(norobot/images/gallery_backtothumbs.png)
}
#galleryBackToThumbs p
{
	color: #F0E4A3;
	text-align: center;
	font-size: 24px;
	padding: 0px;
	margin-top: 26px;
	font-family: acme, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
	line-height: 0px;
}

#galleryBackToThumbs a
{
	color: white;
}

#galleryBack,
#galleryForward,
#galleryBackToStart,
#galleryForwardToEnd
{
	float:left;	
	width:75px;
	height:80px;	
}

/*#galleryBack
{
	margin-left:-152px;
}
#galleryForward
{
	margin-right:-152px;
}*/

.genThumb
{
	float:left;
	width:200px;
	height:200px;
}

/*shop stuff*/
#shopContainer
{
	width: 92%;
	padding: 0px;
	/*padding-top: 20px;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	
}
/*#miniCartContainer
{
	float:right;
	padding-left:20px;
	padding-right:20px;	
}*/

/*hacky bollox using table display*/
#shopThingDiv1
{
  	display: table;
  	width: 100%;
}

#shopThingDiv2, #shopThingDiv3
{
  	display: table-cell;
	vertical-align: middle;
}

#shopThingDiv2
{
  	width: 100%;  
	/*padding-right:30px;*/
}



/*new "noteboard" stuff*/

.noteBoardContainerNew
{
	width: 97%;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;	
	
	text-align:center;	/*also works to centre align inline-block elements*/
	
	-webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;
}


/*
containers that preserve aspect ratio...
a bit of a fudge - this container uses the property of padding to 
make the height always be 75% of the width - see here:
https://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/
used to put iframes in generally
*/
.aspectRatio4x3
{
  	position: relative;
  	width: 100%;
  	height: 0;
  	padding-bottom: 75%;
}

.aspectRatio4x3 iframe
{
  	position: absolute; /*needed because the height of the container is zero - it's the padding that gives it the "height"*/
  	width: 100%;
  	height: 100%;
  	left: 0; top: 0;
}



/*=======================
classes to put on images
========================*/

/* combine these classes (e.g. use img400 and imgFloatLeft together) */

.img300,
.img350,
.img400,
.img600,
.img780
{
	width: 100%;	
	height: auto;
}

.img300
{max-width: 300px;}

.img350
{max-width: 350px;}

.img400
{max-width: 400px;}

.img600
{max-width: 600px;}

.img780
{max-width: 780px;}

.imgCentred
{
	display:block;	/*required so margin-left/right:auto works for centering*/
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:10px;	
}

.imgFloatLeft,		/*will become centred on narrow screens*/
.imgFloatLeftAlways	/*never becomes centred*/
{
	float:left;
	margin-right:10px;
}

.imgFloatRight
{
	float:right;
	margin-left:10px;
}

/*new stuff to add scruffy borders on top of images seperately*/

.scruffyImgContainer
{
	z-index: 0;
	position: relative;		/*only needed so the borders stick to this, and not the main body*/
	padding:0px;
}

.scruffyImgContainer img
{	
	z-index: 1;
	width:100%;
	height:auto;
}

/*these borders get automatically created in script*/

.scruffyImgBorderTop,
.scruffyImgBorderBottom,
.scruffyImgBorderLeft,
.scruffyImgBorderRight
{
	position: absolute;
	background-position: center; 
}

.scruffyImgBorderTop,
.scruffyImgBorderBottom
{
	height: 30px;
	background-repeat: repeat-x;
	/*commented out the "crack avoidance" measurements because it doesn't seem to cause issues*/
	/*width: 101%;*/	/*make it a tiny bit larger to avoid cracks when scaling. dunno how necessary this is - haven't done much testing to see if there's a problem without it*/
	/*left: -0.5%;*/ 	/*offset to avoid cracks when scaling (see width)*/
	width: 100%;
	left: 0px;
}

.scruffyImgBorderLeft,
.scruffyImgBorderRight
{
	width: 30px;
	background-repeat: repeat-y;	
	/*height: 101%;
	top: -0.5%;*/	
	height: 100%;
	top: 0px;
}

.scruffyImgBorderTop
{
	z-index: 2;
	/*top: -0.5%;*/	
	top: 0px;
}

.scruffyImgBorderBottom
{
	z-index: 3;
	/*bottom: -0.5%;*/		
	bottom: 0px;
}

.scruffyImgBorderLeft
{
	z-index: 4;
	/*left: -0.5%;*/		
	left: 0px;
}

.scruffyImgBorderRight
{
	z-index: 5;
	/*right: -0.5%;*/	
	right: 0px;
}

.bgLightBlue .scruffyImgBorderTop {	background-image:url(norobot/images/scruffyImgBlueTop.png) }
.bgLightBlue .scruffyImgBorderBottom {	background-image:url(norobot/images/scruffyImgBlueBottom.png) }
.bgLightBlue .scruffyImgBorderLeft {	background-image:url(norobot/images/scruffyImgBlueLeft.png) }
.bgLightBlue .scruffyImgBorderRight {	background-image:url(norobot/images/scruffyImgBlueRight.png) }

.bgBeige .scruffyImgBorderTop {	background-image:url(norobot/images/scruffyImgBeigeTop.png) }
.bgBeige .scruffyImgBorderBottom {	background-image:url(norobot/images/scruffyImgBeigeBottom.png) }
.bgBeige .scruffyImgBorderLeft {	background-image:url(norobot/images/scruffyImgBeigeLeft.png) }
.bgBeige .scruffyImgBorderRight {	background-image:url(norobot/images/scruffyImgBeigeRight.png) }



/*===============================================================
media queries below here, so they override defaults defined above
===============================================================*/

@media all and (max-width: 980px) 
{
	/*the width of central content is 980px.
	this stops the scrolling to the edgey bits (which overflow the central container)
	for smaller screens*/
	
   #centralContent 
   {
        overflow-x: hidden;
   }
}




@media screen and (max-width: 767px) 
{
	/*#centralContent
	{
		width: 480px;
	}*/
	
	#logoBannerContainer
	{
		width: 424px;
		height: 104px;
		top:30px;
		left:30px;
	}
	
	#logo .linkContainer
	{	
		top: 40px;
		left: 175px;		
	}
	
	
	.blurbLeft, .blurbRight
	{
		width: 95%;
	}
	
	.blurbListContainer
	{
		width: 93%;
	}
	
	.blurbList.list3Col li 
	{
		width: 49.5%;
	}
	
	#footerLinkContainer 
	{
		display: none;
	}
	
	
	
	#headerImgHome,
	#headerImgWhatsOn,
	#headerImgInfo,
	#headerImgContact
	{
		display: none;	
	}
	
	#shopCategoryLinks 
	{
		background-image: url(norobot/images/shopCategoryBg03.png);
	}
	
	#socialContainer
	{
		display: none;
	}
	
	#vidsEtcColumn1
	{
		width: 460px;
	}
	
	.vidBoxType1
	{
		width: 420px;
		height: 280px;
	}
	
	
	#lineUpThumbsContainer 
	{
		width: 480px;
	}
	
	#thumbnailContainer
	{
		width: 416px;
	}
	
	#bigLinkPicContainer 
	{
		width: 316px;
	}
	
	/*#mapContainer
	{
		width: 460px;
		height: 320px;
	}*/
	
	.noteBoardContainerNew
	{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2;
	}
	
	.blurbLeft p, 
	.blurbRight p
	{
		text-align: left;	/*on large screens it's justify, but this looks bad on small screens*/
	}
	
	.blurbLeft h1, 
	.blurbRight h1
 	{
		text-align: center;
	 	font-size: 40px;
		padding-left:10px;
		padding-right:10px;
 	}
	
	.blurbLeft h2, 
	.blurbRight h2
 	{
		text-align: center;
		font-size: 25px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.blurbLeft h3, 
	.blurbRight h3
 	{
		text-align: center;
		padding-left:10px;
		padding-right:10px;
	}
	
	
	#headerBottom h2
	{
		font-size: 24px;	
		margin-top: 24px;
	}
	
	
	.imgFloatLeft,
	.imgFloatRight
	{
		/*make them centred*/
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:0px;			
	}
	
	#artistLinksInfo
	{
		/*make them centred*/
		float: none;
		display: block;
		width: 305px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 10px;
	}
	
	/*#miniCartContainer
	{
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:0px;		
	}*/
	
}

@media screen and (min-width: 768px) and (max-width: 979px)
{
	/*#centralContent
	{
		width: 768px;
	}*/
	
	.blurbLeft, .blurbRight
	{
		width: 90%;
	}
	
	.blurbListContainer
	{
		width: 90%;
	}
	
	#footerLinkContainer 
	{
		display: none;
	}
	
	
	
	#headerImgHome,
	#headerImgWhatsOn,
	#headerImgInfo,
	#headerImgContact
	{
		display: none;	
	}
	
	#shopCategoryLinks 
	{
		background-image: url(norobot/images/shopCategoryBg02.png);
	}
	
	
	#socialContainer
	{
		display: none;
	}
	
	#lineUpThumbsContainer 
	{
		width: 720px;
	}
	
	#thumbnailContainer
	{
		width: 624px;
	}
	
	#bigLinkPicContainer 
	{
		width: 632px;
	}
	
	/*#mapContainer
	{
		width: 720px;
		height: 500px;
	}*/
	
	.noteBoardContainerNew
	{
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2;
	}
	
	#artistLinksInfo
	{
		/*make them centred*/
		float: none;
		display: block;
		width: 630px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		margin-bottom: 10px;
	}
	
	.img600.imgFloatLeft,
	.img600.imgFloatRight
	{
		/*make them centred*/
		float:none;
		display:block;
		margin-left:auto;
		margin-right:auto;
		margin-top:0px;
		margin-bottom:10px;			
	}
	
}

@media screen and (min-width: 980px)
{
	/*#centralContent
	{
		width: 980px;
	}*/
	
	.blurbLeft, .blurbRight
	{
		width: 80%;
	}
	
	
	#headerImgMenuBurger
	{
		display: none;	
	}
	
	#lineUpThumbsContainer 
	{
		width: 960px;
	}
	
	#thumbnailContainer
	{
		width: 832px;
	}
	
	#bigLinkPicContainer 
	{
		width: 948px;
	}
	
	/*#mapContainer
	{
		width: 800px;
		height: 600px;
	}*/
	
	.noteBoardContainerNew
	{
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
	
	#vidsEtcColumn1,
	#vidsEtcColumn2
	{
		display: inline-block;
	}
}