/* CSS for Siftocracy.org */
/* Copyright Tim "the Menace" Sweet, 2017: imitators and haters will be mercilessly infiltrated and shit will get retaliated, baby!!!*/ 

p 	{
	text-align:centre;
	color:white;
	font-size:30px;
}
h1{
	margin: 0;
	font-size:70px;
}


ul{ 
	list-style-type: none; 
} 

a{
	color:white;
	text-decoration:none;
}

list{
	text-align: center;
	margin: 0;
}

body{
	background-color:tan;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	


	
}
#loon {
	
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	color:white;
	font-size:60px;
	
	}

#formText {
	
	text-align:left;
	color:white;
	font-size:30px;
		font-family:"Times New Roman";
	
	}
	
#BigImage{
	margin: 0;
	width:20%;
	
}

#title{	
	text-align:centre;
	font-family:"Times New Roman";
	color:white;
	text-decoration:none;
	margin: 0;
}
	
#audioBox{
	width: 100%;
}

#list{
	text-align:center;
	font-family:"Times New Roman";
	color: white;
	font-size: 50px;
	text-decoration: none;
	margin: 0;
}

#controls {
   width: 80px;
   float: left;
}
    
#progress {
   margin: 4px;
   margin-left: 100px;
   border: 1px solid white;
   background-color: white;
   cursor: pointer;
}

#bar {
   margin: 4px;
   height: 30px;
   background-color: black;
   width: 0;
}

.button {
    border: none;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
	font-weight: bold;
    margin: 2px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button:hover {
    background-color: #555555;
    color: black;
}

.error {
	color: #FF0000;
	font-size:20px;
	}

	
	
.imageColumn-left {
    float: left;
    width: 25%;
	/*background-color:yellow;*/
}

.imageColumn-middle {
    float: left;
    width: 50%;
	/*background-color:red;*/
}

.imageColumn-right {
    float: left;
    width: 25%;
	/*background-color: green;*/
	
}

/* Clear floats after the columns */
.imageRow:after {
	margin: 0;
    content: "";
    display: table;
    clear: both;
}

.column-left {
    float: left;
    width: 25%;
	/*background-color:red;*/
}

.column-middle {
    float: left;
    width: 50%;
	/*background-color:green;*/
}

.column-right {
    float: left;
    width: 25%;
	/*background-color:yellow;*/
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.tx{
		/*width:80%;*/
}



/* Responsive layout - when the screen is less than 600px wide, make the picture bigger */

@media only screen and (max-width: 1000px) {


.imageColumn-left {
    float: left;
    width: 5%;
	/*background-color:pink;*/
}

.imageColumn-middle {
    float: left;
    width: 90%;
	/*background-color:black;*/
}

.imageColumn-right {
    float: left;
    width: 5%;
	/*background-color: gold;*/
	
}

/* Clear floats after the columns */
.imageRow:after {
    content: "";
    display: table;
    clear: both;
}


img {
	 width: 80%;
	
}

#BigImage{
	margin: 0;
	width:80%;
	
}

#audio{

		width: 100%;
}
	
#list{

	font-size: 80px;

}

h1{
	margin: 0;
	font-size:100px;
}

/*
Use the below to test screen width
*/
/*
body {
        background-color: lightblue;
    }

	
	*/
}