// css for mercado pago
button.mercadopago-button {
	background-color: #fff;
	color: #111;
	border: 1px solid #111;
	border-radius: 0;
}
// css for mobiles
/******************************************************************************/
/* Styles used on the banner and menu bar                                     */
/******************************************************************************/
p.banner2 {
	font-size: 2vw;
}
div#mainmenu {
	position: fixed;
	top:0;
	left:0;
	xxheight:100px;
	background:whitesmoke;
	width:100%;
	margin:0;
	padding:0;
	xxborder: 1px solid blue;
}
img#talk {
	height:10vw;
	width:10vw;
	margin: 0;
	padding:0;
}
img#menuwidget {
	width:10vw;
	height:10vw;
	margin: 1vw;
}
p#menutitle {
	color: black;
	height:10vw;
	font-size: 7vw;
	padding:0;
	margin: 0;
	font-weight: bold;
}
td.menucell {
	vertical-align: middle;
	text-align: center;
	padding: 0;
	margin:0;
}
p.menuhead {
	padding: 1vw 1vw 1vw 1vw;
}
p.menuitem {
	padding: 1vw 1vw 1vw 3vw;
}
p.menuitem, p.menuhead {
	background-color: whitesmoke;
	color: blue;
	xxpadding:10px;
	xxfont-size: 50px;
	font-size: 5vw;
	margin: 0;
}
	/* p.menuitem:hover {
		background-color: grey;
	} */
p.indent0 {
	padding-left: 1vw;
}
p.indent1 {
	padding-left: 5vw;
}
p.indent2 {
	padding-left: 10vw;
}
img.menuicon {
	background-color: whitesmoke;
	margin-right: 0.5vw;
	width: 10vw;
	height: 10vw;
	padding: 1vw;
}
img.menuicon:hover {
	background-color: yellow;
}
/******************************************************************************/
/* The Callan logo                                                            */
/******************************************************************************/
img.callanLogo {
	width: 150px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
	height: 100px;
	margin-bottom:10px;
}
/******************************************************************************/
/* Styles for elements in standard pages                                      */
/* -------------------------------------                                      */
/*                                                                            */
/* "mobile" indicates a style for an element on a mobile phone                */
/*                                                                            */
/* Three sizes are provided. The idea is that the calling program sets the    */
/* "hStyle", "pStyle", "buttonStyle" and then uses function "p","h" etc. in   */
/* HtmlPageA to generate h1, p, input. The function sets the class of the     */
/* element accordingly.                                                       */
/*                                                                            */
/* This allows the caller to change how relatively big things are displayed   */
/* rather than leaving things to resize based on "vw". For example with       */
/* little information on the screen such as login.php we want the fields      */
/* to be shown large. Whereas for tables of info we want a much smaller font. */
/*                                                                            */
/* h1.mobilen    - Style for headings                                         */
/*                 e.g. At the top of the page                                */
/* p.mobilen     - Style for paragraphs in a page                             */
/* input.mobilen - Style for input fields                                     */
/******************************************************************************/
p.mobile1, p.mobile2, p.mobile3, p.mobile4, input.mobile1, input.mobile2, input.mobile3, input.mobile4, select.mobile1, select.mobile2, select.mobile3, select.mobile4 {
	font-weight: normal;
	font-family: sans-serif;
	color: black;
}
h1.mobile1, h1.mobile2, h1.mobile3, h1.mobile4, h2.mobile1, h2.mobile2, h2.mobile3, h2.mobile4, h3.mobile1, h3.mobile2, h3.mobile3, h3.mobile4 {
	font-weight: bold;
	font-family: sans-serif;
	color: black;
}
h1.mobile1, h2.mobile1, h3.mobile1, p.mobile1, input.mobile1, select.mobile1 {
	font-size: 3vw;
}
h1.mobile2, h2.mobile2, h3.mobile2, p.mobile2, input.mobile2, select.mobile2 {
	font-size: 4vw;
}
h1.mobile3, h2.mobile3, h3.mobile3, p.mobile3, input.mobile3, select.mobile3 {
	font-size: 5vw;
}
h1.mobile4, h2.mobile4, h3.mobile4, p.mobile4, input.mobile4, select.mobile4 {
	font-size: 6vw;
}
p.mobileButton1, p.mobileButton2, p.mobileButton3,
button.mobileButton1, button.mobileButton2, button.mobileButton3,
input.mobileButton1, input.mobileButton2, input.mobileButton3,
p.gotoButton, p.homeButton {
	/* This makes a small button out of a paragraph */
	font-family: verdana;
	display: inline-block;
	color: white;
	background-color: #125b1c;
	align: center;
	margin: 5px;
	padding: 5px;
	cursor:pointer;
}
p.mobileButton1:hover, p.mobileButton2:hover, p.mobileButton3:hover,
button.mobileButton1:hover, button.mobileButton2:hover, button.mobileButton3:hover,
input.mobileButton1:hover, input.mobileButton2:hover, input.mobileButton3:hover,
p.gotoButton:hover, p.homeButton:hover {
	background-color: grey;
	cursor: pointer;
}
p.mobileButton1, button.mobileButton1, input.mobileButton1 {
	border-radius : 5px;
	font-size: 3vw;
	line-height: 3vw;
}
p.mobileButton2, button.mobileButton2, input.mobileButton2 {
	border-radius : 1vw;
	font-size: 4vw;
	line-height: 4vw;
}
p.mobileButton3, button.mobileButton3, input.mobileButton3,
p.gotoButton, p.homeButton {
	border-radius : 1.5vw;
	font-size: 5vw;
	line-height: 5vw;
}
input.mobileButton1 {
	width: 3vw;
	height: 3vw;
}
input.mobileButton2 {
	width: 4vw;
	height: 4vw;
}
input.mobileButton3 {
	width: 6vw;
	height: 6vw;
}
p.mobileButtonV2 {
	word-wrap: break-word;
	word-break: all;
	background-color: lightskyblue;
	color: blue;
}
p.mobileph {
	/* A kind of highlighting */
	background-color: lightblue;
	padding-top: 1vw;
	padding-bottom: 1vw;
}
table.mobileTable1, table.mobileTable2, table.mobileTable3 {
	margin: auto;
}
table.mobileTable1, table.mobileTable2, table.mobileTable3  {
	border: 1px solid black;
	border-collapse: collapse;
}
th.mobileTable1, th.mobileTable2, th.mobileTable3 {
	border: 1px solid black;
	border-collapse: collapse;
}
tr.mobileTable1, tr.mobileTable2, tr.mobileTable3 {
}
td.mobileTable1, td.mobileTable2, td.mobileTable3 {
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
}
td.mobileTable1, td.mobileTable2, td.mobileTable3 {
}
th.mobileTable1, tr.mobileTable1, td.mobileTable1 {
	font-family: Arial;
	font-size: 12px;
	height: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
th.mobileTable2, tr.mobileTable2, td.mobileTable2 {
	font-family: Arial;
	font-size: 20px;
	height: 20px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
th.mobileTable3, tr.mobileTable3, td.mobileTable3 {
	font-family: Arial;
	font-size: 35px;
	height: 35px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
textarea.mobile1, textarea.mobile2, textarea.mobile3 {
	width: 90%;
}
label.mobile1, label.mobile2, label.mobile3 {
	font-family: Arial;
}
textarea.mobile1, label.mobile1 {
	font-size: 20px;
}
textarea.mobile2, label.mobile2 {
	font-size: 30px;
}
textarea.mobile3, label.mobile3 {
	font-size: 40px;
}
img.mobile1, img.mobile2, img.mobile3, img.mobile4, img.mobile5 {
	vertical-align:middle
}
img.mobile1 {
	width:2vw;
	height:2vw;
}
img.mobile2 {
	width:3vw;
	height:3vw;
}
img.mobile3 {
	width:5vw;
	height:5vw;
}
img.mobile4 {
	width:10vw;
	height:10vw;
}
img.mobile5 {
	width:20vw;
	height:20vw;
}
img.mobile1:hover, img.mobile2:hover, img.mobile3:hover, td.popup:hover div.popup {
	display:block;
}

/******************************************************************************/
/* Non-mobile styles                                                          */
/******************************************************************************/
h1.desktop1, h1.desktop2, h1.desktop3, h1.desktop4,
h2.desktop1, h2.desktop2, h2.desktop3, h2.desktop4,
h3.desktop1, h3.desktop2, h3.desktop3, h3.desktop4,
p.desktop1, p.desktop2, p.desktop3, p.desktop4,
input.desktop1, input.desktop2, input.desktop3, input.desktop3,
select.desktop1, select.desktop2, select.desktop3 , select.desktop4 {
	font-weight: normal;
	font-family: sans-serif;
	color: black;
}
h1.desktop1, h2.desktop1, h3.desktop1, p.desktop1, input.desktop1, select.desktop1 {
	font-size: 1vw;
}
h1.desktop2, h2.desktop2, h3.desktop2, p.desktop2, input.desktop2, select.desktop2 {
	font-size: 1.25vw;
}
h1.desktop3, h2.desktop3, h3.desktop3, p.desktop3, input.desktop3, select.desktop3 {
	font-size: 1.5vw;
}
h1.desktop4, h2.desktop4, h3.desktop4, p.desktop4, input.desktop4, select.desktop4 {
	font-size: 1.75vw;
}
h1.desktop1, h1.desktop2, h1.desktop3, h1.desktop4,
h2.desktop1, h2.desktop2, h2.desktop3, h2.desktop4,
h3.desktop1, h3.desktop2, h3.desktop3, h3.desktop4,
h4.desktop1, h4.desktop2, h4.desktop3, h4.desktop4 {
	font-weight: bold;
}
p.desktop1, p.desktop2, p.desktop3, p.desktop4 {
	margin-top: 20px;
	margin-bottom: 20px;
}
p.desktopph {
	/* A kind of highlighting */
	background-color: lightblue;
	padding-top: 1vw;
	padding-bottom: 1vw;
}
p.desktopButton1, p.desktopButton2, p.desktopButton3,
button.desktopButton1, button.desktopButton2, button.desktopButton3,
input.desktopButton1, input.desktopButton2, input.desktopButton3,
p.gotoButton, p.homeButton {
	font-family: verdana;
	display: inline-block;
	color: white;
	background-color: #125b1c;
	align: center;
	margin:0;
	cursor:pointer;
}
p.desktopButton1:hover, p.desktopButton2:hover, p.desktopButton3:hover,
button.desktopButton1:hover, button.desktopButton2:hover, button.desktopButton3:hover,
input.desktopButton1:hover, input.desktopButton2:hover, input.desktopButton3:hover,
p.gotoButton:hover, p.homeButton:hover {
	background-color: grey;
	cursor: pointer;
}
div.desktopButton1, div.desktopButton2, div.desktopButton3, div.gotoButton, div.homeButton {
	font-family: verdana;
	display: inline-block;
	color: white;
	background-color: #125b1c;
	border-radius : 5px;
	align: center;
	margin:0;
	cursor:pointer;
}
div.desktopButton1:hover, div.desktopButton2:hover, div.desktopButton3:hover, div.gotoButton:hover, div.homeButton:hover {
	background-color: grey;
	cursor: pointer;
}

p.desktopButton1, button.desktopButton1, input.desktopButton1 {
	padding: 5px 10px 5px 10px;
	border-radius : 5px;
	font-size: 1vw;
	line-height: 1vw;
}
p.desktopButton2, button.desktopButton2, input.desktopButton2 {
	padding: 5px 10px 5px 10px;
	border-radius : 6px;
	font-size: 1.25vw;
	line-height: 1.25vw;
}
p.desktopButton3, button.desktopButton3, input.desktopButton3 p.gotoButton, p.homeButton {
	padding: 5px 10px 5px 10px;
	border-radius : 8px;
	font-size: 1.5vw;
	line-height: 1.5vw;
}
p.desktopButtonV2 {
	word-wrap: break-word;
	word-break: all;
	background-color: lightskyblue;
	color: blue;
}
input.desktopButton1 {
	width:2.5vw;
	height:2.5vw;
}
input.desktopButton2 {
	width:3vw;
	height:3vw;
}
input.desktopButton3 {
	width:4vw;
	height:4vw;
}
table.desktopTable1, table.desktopTable2, table.desktopTable3 {
	margin: auto;
}
table.desktopTable1, table.desktopTable2, table.desktopTable3  {
	border: 1px solid black;
	border-collapse: collapse;
}
th.desktopTable1, th.desktopTable2, th.desktopTable3 {
	border: 1px solid black;
	border-collapse: collapse;
}
tr.desktopTable1, tr.desktopTable2, tr.desktopTable3 {
}
td.desktopTable1, td.desktopTable2, td.desktopTable3 {
	height: 50px;
	padding-left: 5px;
	padding-right: 5px;
}
td.desktopTable1, td.desktopTable2, td.desktopTable3 {
}
th.desktopTable1, tr.desktopTable1, td.desktopTable1 {
	font-family: Arial;
	font-size: 12px;
	height: 10px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
th.desktopTable2, tr.desktopTable2, td.desktopTable2 {
	font-family: Arial;
	font-size: 15px;
	height: 15px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
th.desktopTable3, tr.desktopTable3, td.desktopTable3 {
	font-family: Arial;
	font-size: 20px;
	height: 20px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid black;
}
textarea.desktop1, textarea.desktop2, textarea.desktop3 {
	width: 90%;
}
label.desktop1, label.desktop2, label.desktop3 {
	font-family: Arial;
}
label.desktop1 {
	font-size: 10px;
}
label.desktop2 {
	font-size: 15px;
}
label.desktop3 {
	font-size: 20px;
}
img.desktop1, img.desktop2, img.desktop3, img.desktop4, img.desktop5 {
	vertical-align:middle
}
img.desktop1 {
	width:1vw;
	height:1vw;
}
img.desktop2 {
	width:1.5vw;
	height:1.5vw;
}
img.desktop3 {
	width:2vw;
	height:2vw;
}
img.desktop4 {
	width:4vw;
	height:4vw;
}
img.desktop5 {
	width:8vw;
	height:8vw;
}
img.desktop1:hover, img.desktop2:hover, img.desktop3:hover, td.popup:hover div.popup {
	display:block;
}
/******************************************************************************/
/* Elements used in feedback.php                                              */
/* Maybe used elsewhere                                                       */
/******************************************************************************/
td.formfield, input.formfield, input.radioButton, textarea.textArea, p.rbutton {
	font-size: 40px;
}
input.radioButton {
	width: 30px;
	height: 30px;
}
label.radioButton {
	font-size: 40px;
}
textarea.textArea {
	margin: auto;
	width: 90%;
	height: 250px;
	border: 1px solid black;
}
p.rbutton {
	display: inline-block;
	border-radius: 5px;
	line-height: 50px;
	height: 50px;
	margin: 0;
}
/******************************************************************************/
/* Style for audiocontrol                                                     */
/******************************************************************************/
img.desktopAudioControl, img.mobileAudioControl {
	border: 1px solid black;
	float: left;
}
img.desktopAudioControl:hover, img.mobileAudioControl:hover {
	background: black;
	color: white;
}
canvas.desktopAudioControl, canvas.mobileAudioControl {
	float: left;
}
p.desktopAudioControl, p.mobileAudioControl {
	border: 1px solid black;
	float: left;
	text-align: center;
}
img.desktopAudioControl, canvas.desktopAudioControl, p.desktopAudioControl {
	height: 28px;
	font-size: 20px;
	line-height: 30px;
}
img.desktopAudioControl {
	width: 20px;
	height: 20px;
	border-radius: 7px;
	padding: 2px;
	margin: 2px;
}
canvas.desktopAudioControl {
	border: 1px solid black;
	width: 150px;
}
p.desktopAudioControl {
	width : 100px;
	margin: 0;
	margin-left: 3px;
	padding:0;
}
img.mobileAudioControl, canvas.mobileAudioControl, p.mobileAudioControl {
	height: 5vw;
	font-size: 5vw;
	line-height: 1vwx;
}
img.mobileAudioControl {
	xxwidth: 40px;
	xxheight: 40px;
	border-radius: 1vw;
	padding: 1vw;
	margin: 1vw;
}
canvas.mobileAudioControl {
	margin-top: 1vw;
	height: 7vw;
	border: 1px solid black;
	width: 35vw;
}
p.mobileAudioControl {
	width : 20vw;
	height: 6vw;
	margin-top: 1vw;
	margin-left: 1vw;
	padding-top:1vw;
}
/* Override colours in classes                                */
/* Note that these must appear after everything they override */
/* The order they appear as classes is not relevant, it's the */
/* the order of the classes in the css that matters.          */
p.colorgreen {color:green;}
p.colorblue  {color:blue;}
p.bggreen    {background:green;}
p.bgblue     {background:blue;}




/******************************************************************************/
/* Clever trick to make something grow on hover                               */
/* Just add "grow" class                                                      */
/******************************************************************************/
.grow {
transition: all .2s ease-in-out;
}

.grow:hover {
transform: scale(1.2);
}
.squishy{
	transition:all 0.5s;
}

@keyframes flashit {
from {background-color: white;}
to   {background-color: black;}
}

.flash {
animation-name: flashit;
animation-duration: 1s;
animation-iteration-count: infinite;
}