@media (min-width: 1100px){
		.blue {background: LightBlue; border-radius: 10px; }
		#manWindow {max-width:60%; height: 640px; border-radius: 10px; min-width: 60%; margin-left:auto; margin-right: auto;}
		#mainCont {float: left; min-width: 75%; max-width: 75%;}
		#top {max-width: 100%; min-width: 100%; margin-top: 2%; }
		#topLeft {max-width:100%; min-width:30%;float: left; margin-top: 0px;}
		#icon {width: 50px; height: 50px;content:url(fricon.png); float: left;}
	    #title {font-size: 1.5em; float: left;}

		#topRight {max-width: 100%; min-width: 70%; float: left; width: 100%; }
		#buttons {float: right;  max-width:100%; margin: 0 auto;}
		#sliderWrapper {margin-right: 5%; margin-left: 5%;}
		#slider {margin-top: 10px; margin-left: 1%; width: 100%;}
		#sliderText{ font-size: 11; margin-top: -20px;}
		
		#amount {top: 30px; right:-30px;}

		

		#textBox {width:100%; float:left;}
		
		#textArea {
			margin-left: 2%;
			max-height: 500px; 
			min-height: 50px; 
			height: 450px; 
			margin-top: 15px; 
			padding:10px; 
			border-radius: 10px; 
			font-size: 18; 
			background: white; 
			border: 1px solid black; 
			overflow:scroll; 
			text-align: justify;
			font-family: "Verdana";
		}

		#rightBar {float: right; margin-right: 2%; margin-top: 1%; margin-left: 2%;  width: 20%;}
			

		#reset {border: solid black; border-radius: 3px; margin-left: auto; margin-right: auto; margin-top: 10px; width: 100%;}
		

		.box {

			height: 90px; 
			background: #BFBFBF; 
			border-radius: 5px; 
			border: solid black; 
			margin-top: 10px; 
			margin-left: auto; 
			margin-right: auto;
		}

		.box:hover{border: solid blue; background: #CFCFCF; }

		.boxContent {margin-left: 2%; margin-top: 4%;}
		

		input[type="radio"]{
			display: none;
		}

		input[type="radio"] + label{
			display: inline-block;
			width: 20px;
			height: 20px;
			background: green;
			cursor:pointer;
			border: solid white 4px;
			border-radius: 20px;
			box-shadow: 0px 1px 2px 0px #000000;
		}
		input[type="radio"]:checked + label{
			border: solid green 4px;
		}


		#radio1 + label{
			background-color: #f9f9b1;
		}
		#radio2 + label{
			background-color: #a9a9a9;
		}
		#radio3 + label{
			background-color: #ffffff;
		}
		#radio4 + label{
			background-color: #000000;
		}

		#txtCol1 + label{
			background-color: #f9f9b1;
		}
		#txtCol2 + label{
			background-color: #a9a9a9;
		}
		#txtCol3 + label{
			background-color: #ffffff;
		}
		#txtCol4 + label{
			background-color: #000000;
		}

		.boxLabel{
    		text-align:center;
    		font-size: 18;
		}

		.ui-widget-overlay {
			
		   background: rgb(50, 50, 50) !important;
		   opacity: 0.8 !important;
		   filter: Alpha(Opacity=80) !important;
		}

		.ui-tooltip {
    		max-width: 1000px !important;
		}



		.buttonImage{
			margin-left:-3px;
			width:22px;
			height:22px;
		}
		.boxButton{
			width: 30px;
			height: 30px;
		}
		.buttonContainer{
			margin-top:10px; 
			margin-left:auto; 
			margin-right:auto; 
			width: 66px;
		}
}

@media handheld, (max-width: 1099px){
	#textArea {
		margin-left: 2%;
		margin-right: 2%;
		max-height: 500px; 
		min-height: 50px; 
		height: 75%; 
		margin-top: 15px; 
		padding:10px; 
		border-radius: 10px; 
		font-size: 18; 
		background: white; 
		border: 1px solid black; 
		overflow:scroll; 
		text-align: justify;
		font-family: "Verdana";
	}
	#slider {margin-top: 20px; margin-left: 5%; margin-right: 5%;}
	#title {font-size: 1.5em; float: left; width: 100%; text-align: center;}

	.box {

		height: 90px; 
		background: #BFBFBF; 
		border-radius: 5px; 
		border: solid black; 
		margin-top: 10px; 
		margin-left: auto; 
		margin-right: auto;
		}


		.box:hover{border: solid blue; background: #CFCFCF; }

		.boxContent {margin-left: 5px; margin-top: 10px;}
		

		input[type="radio"]{
			display: none;
		}

		input[type="radio"] + label{
			display: inline-block;
			width: 40px;
			height: 40px;
			background: green;
			cursor:pointer;
			border: solid white 4px;
			border-radius: 20px;
			box-shadow: 0px 1px 2px 0px #000000;
		}
		input[type="radio"]:checked + label{
			border: solid green 4px;
		}


		#radio1 + label{
			background-color: #f9f9b1;
		}
		#radio2 + label{
			background-color: #a9a9a9;
		}
		#radio3 + label{
			background-color: #ffffff;
		}
		#radio4 + label{
			background-color: #000000;
		}

		#txtCol1 + label{
			background-color: #f9f9b1;
		}
		#txtCol2 + label{
			background-color: #a9a9a9;
		}
		#txtCol3 + label{
			background-color: #ffffff;
		}
		#txtCol4 + label{
			background-color: #000000;
		}

		.boxLabel{
    		text-align:center;
    		font-size: 18;
		}

		.ui-widget-overlay {
			
		   background: rgb(50, 50, 50) !important;
		   opacity: 0.8 !important;
		   filter: Alpha(Opacity=80) !important;
		}

		.ui-tooltip {
    		max-width: 1000px !important;
		}


		.buttonImage{
			margin-left:-3px;
			width:40px;
			height:40px;
		}
		.boxButton{
			width: 50px;
			height: 50px;
		}
		.buttonContainer{
			margin-top:10px; 
			margin-left:auto; 
			margin-right:auto; 
			width: 106px;
		}
}