/*
      Default sizing is for desktop, three column display
*/
body {
    font-family: 'Comic Sans', Verdana, sans-serif;
}

.main img {
    width: 100%;
}

h1{
    font-size: 1.625em;
}

h2{
    font-size: 1.375em;
}

.header {
    margin-bottom: 4px;
    background-color: #000042;
	vertical-align: center;
    border: 0px;
}

.menuitem {
    margin: 4.5%;
    margin-left: 0;
    margin-top: 0;
    padding: 4.5%;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

.main {
    padding: 2%;
}

.left {
    padding: 4%;
	border: 1px solid black;
    background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 25px;
}
.confPage {
	display: none;
}
.right {
    padding: 4%;
	border: 1px solid silver;
    background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center center;
}

.footer {
    padding: 1%;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
    font-size: 0.625em;
}

.mycontainer {
    width: 100%;
}

.mywrapper {
    overflow: hidden;
}

.mybox {
    margin-bottom: 2%;
    margin-right: 2%;
    float: left;
}

.myheader {
    width: 100%;
}

.leftCol {
    width: 25%;
}

.centerCol {
    width: 50%;
}

.rightCol {
    width: 20%;
    margin-right: 0;
}

.myfooter {
    width: 100%;
    margin-bottom: 0;
}
/*
// Horizontal menu
*/
.buttons
{
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
}
.buttons ul
{
    list-style: none;
    position: relative;
    left: 50%;
}

.buttons li 
{
	float: left;
	position: relative;
}

.buttons a 
{
    text-decoration: none;
    margin: 2px;
    background: red;
    float: left;
    border:0px;
    color:#fff;
    padding:0px 0px;
    text-align:center;
    white-space:nowrap;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
.buttons a:hover
{
	color: black;
	text-decoration: none;
}

@media only screen and (max-width: 600px) 	/* Tablet sized two column display */
{
    .leftCol {
        width: 100%;
		display: none;
    }
    .confPage {
        width: 100%;
		display: block;
    }

    .myitem {
        margin: 1%;
        padding: 1%;
    }

    .center {
        width: 40%;
    }

    .main {
        padding: 1%;
    }

    .rightCol {
        width: 40%;
    }

    .left {
        padding: 1%;
    }
	
	.right {
        padding: 1%;
    }

    .mybox {
        margin-right: 1%;
        float: left;
    }
	/*
	// Horizontal menu
	*/
	.buttons
	{
		float: right;
		position: relative;
		left: -50%;
		text-align: left;
	}
	.buttons ul
	{
		list-style: none;
		position: relative;
		left: 50%;
	}

	.buttons li 
	{
		float: left;
		position: relative;
	}

	.buttons a 
	{
		text-decoration: none;
		margin: 2px;
		background: red;
		float: left;
		border:0px;
		color:#fff;
		padding:0px 0px;
		text-align:center;
		white-space:nowrap;
		border-radius: 8px;
	}
	.buttons a:hover
	{
		color: black;
		text-decoration: none;
	}
}

@media only screen and (max-width: 400px)   /* Phone sized single column display */
{
    .leftCol {
        width: 100%;
		display: block;
    }
    .confPage {
        width: 100%;
		display: block;
    }

    .myitem {
        margin: 1%;
        padding: 1%;
    }

    .centerCol {
        width: 100%;
    }

    .main {
        padding: 1%;
    }

    .rightCol {
        width: 100%;
    }

    .left {
        padding: 1%;
    }
	
    .right {
        padding: 1%;
    }

    .mybox {
        margin-right: 1%;
        float: left;
    }
	/*
	// Horizontal menu
	*/
	.buttons
	{
		float: right;
		position: relative;
		left: -50%;
		text-align: left;
	}
	.buttons ul
	{
		list-style: none;
		position: relative;
		left: 50%;
	}

	.buttons li 
	{
		float: left;
		position: relative;
	}

	.buttons a 
	{
		text-decoration: none;
		margin: 2px;
		background: red;
		float: left;
		border:0px;
		color:#fff;
		padding:0px 0px;
		text-align:center;
		white-space:nowrap;
		border-radius: 5px;
	}
	.buttons a:hover
	{
		color: black;
		text-decoration: none;
	}
}

