@charset "utf-8";
/* CSS Document */

/* iPad mini in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
{

	#navbar{
		text-align: center;
	}

	#header{
		margin-top:50px;
		text-align:center;
	}

	.note{
		width: 100% !important;
	}

	.logo{
		margin-top:15px;
		margin-left:0px;
	}

	.header-left {
		width:100%;
		padding-top:20px;
		text-align:center;
	}
	
	.note{
		width: 100%;
	}
	
	.header-right {
		display:none;
		 }
		 
	#main{
		display:none;		
	}
	
	.link{
		margin-left:0px;
	}
	
	.headline{
		background:none;
		padding-top:7px;
	}
	
	.headline-container{
		text-align:center;
	}
	
	.headline-container-left{
		width:100%;
	}
	
	.headline-container-center{
		width:100%;
	}
	
	.headline-container-right{
		width:100%;
	}
	
	.headline-container-left-content{
		padding-top:5px;
	}

	.headline-container-center-content{
		padding-top:5px;
	}

	.headline-container-right-content{
		padding-top:5px;
	}
	
	h1{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px !important;
		color:#f05c22;
		padding:0;
		margin:0;	
	}
	
	.footer-left{
		width:100%;
	}

	.footer-right{
		width:100%;
	}

	#footer{
		padding-top:30px;
	}

}

/* iPad mini in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {

	#navbar{
		text-align: center;
	}

	#header{
		margin-top:140px;
	}

	.logo{
		margin-top:15px;
		margin-left:0px;
	}


	.header-left {
		width:100%;
		text-align:center;
	}

	.note{
		margin-left:0px;
		width: 100% !important;
	}

	.header-right {
		 width:100%;
		 display:none;
		 }
	#main{
		display:none;
	}

	.link{
		margin-left:0px;
	}

}

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

	#header{
		width:100%;
		height:100%;
	}

	.header-right{

	}

	.header-left{

	}

	.violator{
	}

	.uir-logo{
		margin-left:20px;
	}

	.form{
		margin-left:20px;
	}

	.note,
	.button input,
	.username input,
	.password input {
		width: 220px;
	}


	#navbar .uir-logo{
		margin-left: 20px;
	}

	.link{
		margin-left:20px;
	}

	h1{
		font-family: 'Open Sans','Helvetica',sans-serif;
		color:#f05c22;
	}

	p{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		color:#000000;
	}

	.violator{
		margin-right:20px;
	}

	hr{
		width:95%;
	}

	.main-left-content{
		padding-left:20px;
	}

	.headline-container-left-content{
		padding-left:20px;
}

}


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

	#header{
		width:100%;
		height:100%;
	}

	.header-right{
		height:100%;
	}

	.header-left{
		height:100%;
	}

	.violator{
	}

	.logo{
		margin-top:35px;
		margin-left:20px;
	}


	#navbar .uir-logo{
		margin-left: 20px;
	}

	.forgot-pw{
		padding-top:15px;
	}

	.link{
	}

	h1{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:24px;
		color:#f05c22;
	}

	p{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		color:#000000;
	}

	.violator{
		margin-right:20px;
	}

}



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

	#header{
		width:100%;
		height:100%;
	}

	.header-right{
	}

	.header-left{
	}

	.violator{
	}

	.logo{
		margin-top:20px;
		margin-left:20px;
	}

	#navbar .uir-logo{
		margin-left: 20px;
	}



	.link{
		margin-left:20px;
	}

	h1{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:24px;
		color:#f05c22;
	}

	p{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		color:#000000;
	}

	.violator{
		margin-right:20px;
	}

	.headline{
		width:100%;
}

}


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

	.note
	{
		width: 100%;
	}

	.header-separator{
		display: none;
	}

	.uir-logo{
		width: 220px;
		height: auto;
		margin-top:25px;
		margin-left:0px;
	}


	.form{
		margin-left:0;
	}
	#navbar{
		height: auto;
	}

	#header {
		width:80%;
		padding-left:10px;
		height:300px;
	}

	.header-left {
		width:100%;
		text-align:center;
		margin-left: 13px;
	}

	.header-right {
		 display:none;
    }

	.form{

		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		padding-right:0px;
	}

	#navbar{
		text-align: center;
	}

	.logo{
		margin-top:25px;
		margin-left:0px;
	}

	#main{
		display:none;
	}

	.headline{
		display:none;
	}

	.headline-container{
		text-align:center;
	}

	.headline-container-left{
		width:100%;
	}

	.headline-container-center{
		width:100%;
	}

	.headline-container-right{
		width:100%;
	}

	.headline-container-left-content{
		padding-top:5px;
	}

	.headline-container-center-content{
		padding-top:10px;
	}

	.headline-container-right-content{
		padding-top:10px;
	}

	h1{
		font-size:16px;
		padding:0;
		margin:0;
	}

	.link{
     	margin-left:0px;
	}

	.main-left{
		display:none;

	}

	.main-center{
		display:none;
	}

	.main-right{
		display:none;
	}

	.footer-left{
		width:100%;
	}

	.footer-left-text{
		text-align:center;
		margin-left:50px;
		padding-right:50px;
	}

	.footer-center{
		width:100%;
	}

	.footer-center-text{
		text-align:center;
		margin-left:50px;
		padding-right:50px;
	}

	.footer-right{
		width:100%;
	}

	.footer-right-text{
		text-align:center;
		margin-left:50px;
		padding-right:50px;
	}

	#footer{
		padding-top:30px;
	}

}


@media screen and (max-width: 740px) 	{
	#header {
		width:80%;
		padding-left:10px;
		height:300px;
	}

	.header-left {
		width:100%;
	}
	
	.header-right {
		width:100%;
    }
	
	.form{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		padding-right:0px;
	}
	.note{
		padding-top:6px;
	}

	.logo{
		margin-top:25px;
		margin-left:0px;
	}
	
	#main{
		background-color:#ffffff;
		background-image:none;
	}
	
	.link{
		margin-left:0px;
	}
	
	
	p{
		font-family: 'Open Sans','Helvetica',sans-serif;
		font-size:14px;
		color:#000000;
	}
	
}


@media only screen and (max-width: 480px) {
	
	#navbar{
		text-align: center;
	}


		
	.header-left {
		width:100%;
	}
	
	.note{
		margin-left:0px;
	}
	
	.header-right {
		width:100%;
		display:none;
		 }
	
	.headline{
		padding-top:2px;
	}
		 
	#main{
		display:none;		
	}
	
	.link{
		margin-left:0px;
	}
}

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

	.note{
		width: 220px;
	}
	#header{
		padding-top:15px;
	}
	
	.header-left {
		width:100%;
		text-align: left;
	}
	
	.header-right {
		width:95%;
		display:none;
	 }

	#navbar{
		text-align: center;
	}

	.logo{
		margin-top:15px;
		margin-left:0px;
	}

	
	.note{
		margin-left:0px;
		text-align:center;	
	}
	
	#main{
		display:none;		
	}
	
	.link{
		margin-left:0px;
	}
	
	.headline{
		padding-top:20px;
	}
	
}