@charset "UTF-8";



body {
	/*font-family: Arial;
	font-size: 20x;*/
	margin: 0;
	padding: 0;
	line-height: 20px;

	background-color: white;

}
/* The alert message box */
.alert {
  	padding: 20px;
		font-family: sans-serif;
    background-color: #f44336; /* Red */
    color: white;
		display: block;

}

/* The close button */
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color: black;
}
/*End of the alert box   */




.searchtext{
font-size: 16px

}

.contact1{


}

.crest{
width:10%;
margin-top: 4px;
position: absolute;
z-index: 3;
}


.socialcontact{
width: 5%;
height: auto;


}



header{
padding-top: 2px;
background-color: #001540;
width: 100%;
height: 95px;


}
header ul{
 list-style: none;
 text-decoration: none;
 margin: 0;
 padding: 0;
}

header li{
  display: inline;
  float: left;
padding-left: 0px;
padding-right: 0px;
}


header .logo{
float: left;
}


header .name{
float: left;
width: 525px;
height: auto;
margin-left: 140px;
margin-top: 5px;
background-color:
position: fixed;
z-index: -1;

}

.rbpf{
width: 75%

}

.socialicons{
width: 75%;
}

header #socialbar{
float: left;
margin-left: 865px;
margin-top:5px;
position:absolute;
}

.button_1 {

	height: 22px;
	background: #D60003;
	padding-left: 20px;
	padding-right: 20px;
	border: none;
	color:#ffffff;
}

header #searchform{
float: left;
margin-top: 50px;
margin-left: 200px;
width: 400px;

}

header input[type="text"]{
padding: 2px;
height: 15px;
width: 250px;
}




.container1 {
	width: 90%;
	margin:auto;
	overflow: hidden;
}


.container2 {
	width: 100%;
	margin:auto;
	overflow: hidden;

}
.container3 {

	width: 95%;
	margin:auto;
	overflow: hidden;
}



nav{
	width: 100%;
	height: 50px;
  background-color: black;
	opacity: 0.9;


}
/*new css feb062024*/
#mainsection .container3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Assuming #filter is replaced with .report-filter based on the provided HTML structure */
.report-filter {
    margin-bottom: 20px;
}

.report-filter label {
    font-weight: bold;
}

.report-filter select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer; /* Added for better user interaction */
}

article#content h2 {
    color: #333;
    font-size: 24px;
}

article#content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.hrule {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.crime-report-item {
    display: block; /* Ensures each link is on its own line */
    margin-bottom: 10px;
    padding: 10px; /* Increased padding for better readability */
    background-color: #f9f9f9;
    border-radius: 5px;
    border-left: 5px solid #007bff; /* Adds a left border for visual accent */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Soft shadow for depth */
}

.crime-report-item a {
    text-decoration: none;
    color: #333;
    display: block; /* Makes the entire item clickable */
    font-weight: 500; /* Slightly bolder font for better legibility */
}

.crime-report-item:hover {
    background-color: #e9e9e9;
    border-left-color: #0056b3; /* Darker border color on hover for contrast */
}











/* feb062024
#mainsection{

	height: auto;
	width: 100%;

	border-bottom: 5px;
	border-color: black;
}

#news_image{
width: 100%;
}

.newsimg{
width:95%;
height:auto;
border: #000000 1px solid;
}



article#content{
	float: left;
	text-align: justify;
	width: 70%;
	margin-top: 10px;
	margin-bottom: 20px;

	background-color: white;
	padding-left: 5px;
}


article#content ol li{
display: list-item;
list-style-image: none;
line-height: 40px;
text-decoration: none;
}

article#content ul li{
display: list-item;
list-style-image: none;
line-height: 25px;

}


.articletext{
	line-height: 30px;
	font-family: arial;
	font-size: 17px;

}

.storytitle{
	font-family: arial;
	font-weight: bold;
	font-size: 2em;
	line-height: 35px;

}feb062024*/


.cadetcrest{
width: 30%;


}


#cadet-crest{
text-align: center;

}


.postedon{
	font-size: .9em;
	color: gray;
	font-family: arial;
}

.recentnewshead{

font-family: arial;

}
.recentnews{
	font-family: arial;
	line-height: 25px;
	font-size: 18px;
}




aside#sidebar{
	float: right;
	width: 27%;
	margin-top: 30px;
	height: auto;
	margin-bottom: 20px;
	text-align: left;
	font-family: arial;
	line-height: 25px;
}



aside#sidebar a{
text-decoration: none;

line-height: 30px;

}

.homeimg{

	width: 100%;
	height: auto;
}


section{
text-align: center;
padding-top: 30px;
height: auto;
}


section li{
display: inline;
padding: 0 10px 0 10px;

}





#links {
	background-color: #626565;
	padding-left: 60px;



}

#links .box3{
width: 21%;
float: left;
margin-top: 20px;
margin-bottom: 20px;
height: 250px;
font-family: 'Helvitica Neue', Arial, serif;
text-align: left;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin-right: 20px;
color: white;

}

#links ul{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;


}

#links li{
  display: block;
	line-height: 30px;

}

 #links li img{
	 float: left;
	 margin: 0 20px 0 0;
 }

#links a:link{
	text-decoration: none;
	color: white;
}

#links a:hover{
color: hotpink;
text-decoration: underline;

}
#links a:visited{
	color: white;
	text-decoration: none;
}

.socialfooter{
width: 8%;
 }

footer{
background-color: white;
font-color: black;
height: auto;
}


.footername{
text-align: center;
padding-top: 15px;
padding-bottom: 15px;

}


 @media only screen and (min-width: 1281px) {

 .alert{
 	background-color: red;
 }

header.crest{
width: 5%;

}

 }

@media only screen and (min-width: 992px) and (max-width: 1280px){

.alert{
	background-color: green;
}

.socialfooter{
width: 6%;


 }


}

@media only screen and (min-width: 768px) and (max-width: 991px){

.alert{
	background-color: yellow;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px){

.alert{
	background-color: orange;
}
}


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

.alert{
	display: none;
}

.socialicons{
display: none;
}


header #socialbar{
display: none;
}

.button_1 {

display: none;
}

header #searchform{
display: none;

}

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



.crest{
width: 25%;
margin-top: 5px;
position: absolute;
z-index: 3;
}




header .logo{
float: left;
}


header .name{
float: left;
width: 300px;
height: auto;
margin-left: 100px;
margin-top: 5px;
background-color:
position: fixed;
z-index: -1;

}

.rbpf{
width: 75%

}
















nav{

display: none;
}

aside#sidebar{
	display: none;
}

article#content{
	float: left;
	text-align: justify;
	width: 90%;
        padding-left: 5%;
        padding-right: 5%;
	

	
}

#links {
	display: none;



}
footer{
background-color: #626565;
height: auto;
}


.footername{
font-family: Times;
color: white;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;

}









}