@font-face{

    font-family:titilum_r;

	src:url(fontz/Titillium-Regular.otf);

 }

@font-face{

	 font-family:titilum_sb;

	 src:url(fontz/Titillium-Semibold.otf);

	 

	 

 }

/*

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License

*/



body {
	
    
	background: rgb(244, 156, 105) url("images/img012.jpg");

	background-repeat: repeat;
	
    background-size: auto;
    
	font-family: 'titilum_r', serif;

	font-size: 14px;

	color: #250f0f;
    
    border: none;
}



h1, h2, h3 {

	margin: 0;

	padding: 0;

	font-weight: normal;

	font-family: 'titilum_sb', sans-serif;

	color: #1d070a;

}



h1 {

	font-size: 2em;

}



h2 {

	font-size: 2.8em;

}



h3 {

	font-size: 1.6em;

}



p, ul, ol {

	margin-top: 0;

	line-height: 180%;
	background: rgb(244, 156, 105);
	


}



ul, ol {
	background-color: rgb(244, 156, 105);

}



a {

	color: #1d070a;
	
	text-decoration: none;

}



a:hover {
	color: rgb(244, 156, 105);
}



#wrapper {
    width: 100%;
}



.container {

	width: 960px;

	margin: 0px auto;

}



/* Header */

#header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 50px;
}


 #header-wrapper {
        background-color: #502c2c;
        padding: 10px 0;
		position: sticky;
}



/* Logo */



#logo {

	float: left;

	width:900px;

	margin: 0;

	padding: 0;

	color: #FFFFFF;

}




#logo h1 {

	line-height: 100px;

	letter-spacing: -2px;

	text-transform: lowercase;

	font-size: 3.8em;

}



#logo h1 a {

	color: #FFFFFF;

	text-shadow: 1px 1px 0px rgba(0,0,0,.2);

}



#logo p {

	margin: 0;

	padding: 0px 0 0 0px;

	letter-spacing: -1px;

	font-family: 'titilum_sb', serif;

	font-style: italic;

	color: #1d070a;

}



#logo p a {

	color: #1d070a;

}



#logo a {

	border: none;

	background: none;

	text-decoration: none;

	color: #e7dcdc;

}



/* Splash */



#splash {

	width: 960px;

	height: 300px;

	margin: 0px auto;

}



/* Search */



#search {

	float: right;

	width: 280px;

	height: 60px;

	padding: 20px 0px 0px 0px;

}



#search form {

	height: 41px;

	margin: 0;

	padding: 10px 0 0 20px;

}



#search fieldset {

	margin: 0;

	padding: 0;

	border: none;

}


#focus {
	
	width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	background-color: #e986869f;
}



#search-text {

	width: 170px;

	padding: 6px 5px 2px 5px;

	border: 1px solid #E7EBED;

	background: #FFFFFF;

	text-transform: lowercase;

	font: normal 11px Arial, Helvetica, sans-serif;

	font-family: 'titilum_r', serif;

	color: #1d070a;

}



#search-submit {

	width: 50px;

	height: 22px;

	border: none;

	background: #B9B9B9;

	color: #000000;

}



/* Menu */



#menu {

	float: right;

	width: 500px;

	height: 100px;

	margin: 0 0;

	padding: 0;
	
	color: #FFFFFF;

}




#stmenu ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 30px;
            height:40px;
        }

        #stmenu ul li {
            display: inline;
        }

        #stmenu ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        #stmenu ul li a:hover {
            color: #7e6603;
        }

        #stmenu i {
            margin-right: 6px;
        }

        @media (max-width: 768px) {
            #stmenu ul {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }



#menu .current_page_item a {

	text-decoration: none;

	color: #FFFFFF;

}

.class-subjects-container {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

.class-subject-pair {
    margin-bottom: 15px;
}

.subject-multi-select {
    width: 100%;
    margin-top: 5px;
}


/* Page */



#page {

	width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	background: #FFFFFF;

}

#studentpage{
    
    width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	background: #FFFFFF;

    
}


#tasks {

	width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	background:rgb(244, 156, 105);

}

#optns{

	width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	background:#EEE;

	height:auto;

	padding-bottom:10px;

	padding-top:10px;

	position:relative;

}

#optn{

	width: 900px;

	margin: 0 auto;

	padding: 1px 50px;

	height:auto;

	padding-bottom:10px;

	padding-top:10px;

}



.inBlkOpt{

	height:30px;

	width:100px;

	border-radius:5px;

	display:inline-block;

	margin-right:10px;

	border:1px solid #C5C5C5;

	

}

.smallBtn{

	background-color:#030729;

	color:#fff;

	border:1px solid #010103;

	padding:3px;

	padding-left:6px;

	padding-right:6px;

	border-radius:5px;

	cursor:pointer;

	font-family: 'titilum_r', serif;

	box-shadow:0px 1px 1px #FFF inset;

}

/* Content */



#content {

	float: left;

	width: 590px;

	padding: 50px 0px 0px 0px;

}

#contentFull {

	float: left;

	width: 95%;

	padding: 50px 0px 0px 0px;

}



.post {

	overflow: hidden;

	margin-bottom: 40px;

	border-bottom: 0px solid #E7EBED;

}



.post .title {

	height: 41px;

	padding: 7px 0px 0px 0px;

	letter-spacing: -1px;

}



.post .title a {

	border: none;

	text-transform: lowercase;

	color: #060925;

}



.post .meta {

	margin-bottom: 30px;

	padding: 10px 0px 0px 0px;

	text-align: left;

	font-family: 'titilum_r', serif;

	font-size: 16px;

	font-weight: 300;

}



.post .meta .date {

	float: left;

}



.post .meta .posted {

	float: right;

}



.post .entry {

	padding: 0px 0px 20px 0px;

	padding-bottom: 20px;

	text-align: justify;

}



.links {

	padding-top: 20px;

	margin-bottom: 30px;

}



.more {

	display: block;

	float: left;

	width: 88px;

	height: 25px;

	padding: 2px 0px 0px 0px;

	margin-right: 10px;

	background: url("images/img08.jpg") no-repeat left top;

	text-align: center;

}



.comments {

	display: block;

	float: left;

	width: 88px;

	height: 25px;

	padding: 2px 0px 0px 0px;

	background: url("images/img08.jpg") no-repeat left top;

	text-align: center;

}



/* Sidebar */



#sidebar {

	float: right;

	width: 280px;

	margin: 0px;

	padding: 30px 0px 0px 0px;

}



#sidebar ul {

	margin: 0;

	padding: 0;

	list-style: none;

}



#sidebar li {

	margin: 0;

	padding: 0;

}



#sidebar li ul {

	margin: 0px 0px;

	padding-bottom: 30px;

}



#sidebar li li {

	line-height: 35px;

	border-bottom: 1px solid #75a6e2;

	margin: 0px 30px;

	border-left: none;

}



#sidebar li li span {

	display: block;

	margin-top: -20px;

	padding: 0;

	font-size: 11px;

	font-style: italic;

}



#sidebar li li a {

	padding: 0px 0px 0px 15px;

}



#sidebar h2 {

	height: 38px;

	padding-left: 30px;

	letter-spacing: -.5px;

	font-size: 1.8em;

	color: #1d070a;

}



#sidebar p {

	margin: 0 0px;

	padding: 0px 30px 20px 30px;

	text-align: justify;

}



#sidebar a {

	border: none;

}



#sidebar a:hover {

	text-decoration: none;

}



/* Calendar */




#calendar_wrap {

	padding: 20px;

}



#calendar table {

	width: 100%;


}



#calendar tbody td {

	text-align: center;

}



#calendar #next {

	text-align: right;

}



/* Three Column Footer Content */



#footer-content {

	color: #efb0b8;

	position: absolute;

	left: 0;

	bottom: 0;

	width: 100%;

}



#footer-content a {

	color: #ffffff;

}



#footer-bg {

	overflow: visible;

	width: 890px;



}



#footer-content h2 {

	margin: 0px;

	padding: 0px 0px 0px 0px;

	letter-spacing: -1px;

	text-transform: lowercase;

	font-size: 26px;

	color: #FFFFFF;

}



#footer-content ul {

	margin: 0px;

	padding: 0px 0px 0px 0px;

}



#column1 {

	float: left;

	width: 290px;

	margin-right: 30px;

}



#column2 {

	float: left;

	width: 280px;

}



#column3 {

	float: right;

	width: 260px;

}



/* Footer */



#footer {

	position: fixed;

	left: 0;

	bottom: 0;
	width: 100%;

	font-family: 'titilum_r', serif;



}



#footer p {

	margin: 0;

	padding-top: 10px;

	letter-spacing: 1px;

	line-height: normal;

	font-size: 14px;

	text-transform: uppercase;

	text-align: center;

	color: rgb(244, 156, 105);

	background-color:rgb(71, 38, 17);

}



#footer a {

	color:#eeccd0;

}



#marketing {

	overflow: hidden;

	margin-bottom: 30px;

	padding: 20px 0px 10px 0px;

	border-top: 1px solid #E7EBED;

	border-bottom: 1px solid #E7EBED;

}



#marketing .text1 {

	float: left;

	margin: 0px;

	padding: 0px;

	letter-spacing: -2px;

	text-transform: lowercase;

	font-size: 34px;

	color: #f8e325;

}


#marketing .text2 {

	float: right;

}



#marketing .text2 a {

	display: block;

	width: 252px;

	height: 38px;

	padding: 15px 0px 0px 0px;

	background: url("images/img07.jpg") no-repeat left top;

	letter-spacing: -2px;

	text-align: center;

	text-transform: lowercase;

	font-size: 30px;

	color: #FFFFFF;

}

#stmenu ul li a.actve {
    color: white; /* Text color */
    background-color: #502c2c; /* Background color - change to your preference */
    border-radius: 50px; /* This creates the oval shape */
    padding: 8px 15px; /* Adjust padding to control oval size */
    display: inline-block; /* Ensures padding works properly */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Optional: Hover effect */
#stmenu ul li a.actve:hover {
    background-color: #a04545; /* Slightly darker on hover */
}

 .thd{

	 background-color:rgb(244, 156, 105);

	 color:#fff;

	 padding:5px;

 }

table {

	 border-collapse:collapse;

 }

 td{

	 border:1px solid #A5A5A5;

	 padding:5px;

	 

 }

 

 .dlt, .edt{

	 cursor:pointer;

 }

 .bigbox{

	 width:300px;

	 height:30px;

	 border:1px solid #A3A3A3;

	 border-radius:5px;

	 padding:5px;

	 font-family: 'titilum_r', serif;

 }

 .bigOptnBx{

	 width:300px;

	 height:40px;

	 border:1px solid #A3A3A3;

	 border-radius:5px;

	 padding:5px;

	 font-family: 'titilum_r', serif;
 }

 .bigbtn{

	 background-color:white;

	 width:200px;

	 height:35px;

	 border:1px solid #fff;

	 padding-bottom:5px;

	 padding-top:5px;

	 color:#fff;

	 font-family: 'titilum_r', serif;

	 border-radius:5px;

	 cursor:pointer;

	 box-shadow:0px 1px 1px #FFF inset;

	 

 }

 .midbtn{

	 background-color:#d65f5f;

	 width:100px;

	 height:35px;

	 border:1px solid;

	 padding-bottom:5px;

	 padding-top:5px;

	 color:#fff;

	 font-family: 'titilum_r', serif;

	 border-radius:0px;

	 cursor:pointer;

	 display:inline-block;

	 margin-right:30px;

	 box-shadow:0px 1px 1px #FFF inset;

	 

 }

  

 .grn{

	 color:#250707;

 }

 .red{ color:#FF0D0D;

 }

 

 #edtCourseDv{

	visibility:hidden;

	 position:absolute;

	 top:150px;

	 width:40%;

	 left:30%;

	 z-index:2002;

	 height:150px;

	 background-color:#fff;

	 

 }

 #edtcLeft{

	 width:30%;

	 background-color:#78d3d0;

	 float:left;

	 height:100%;

	 color:#fff;

 }

 #edtcRight{

	 width:70%;

	 background-color:#fff;

	 float:left;

	 height:100%;

	 position:relative;

 }

 #closeCedit{

	 position:absolute;

	 top:8px;

	 right:8px;

	 cursor:pointer;

 }

 /* Loading and fade */

 #loading{

	display:none;

	 

    

    position:fixed;

	top:40%;

    /*top:30%; */

    left:45%;

    z-index:1002;

    

    width:auto;

	height:auto;

    color:#D6D6D6;

    border:solid 1px #FFFFCC;

    background-color: #FFF;

	text-align:center;

	border-radius:5px;

	 

	

}

.black_overlay

 { 

    display:none;

    

    position:absolute;

    top:0%;

    left:0%;

    z-index:1001;

    

    background-color: rgb(244, 156, 105);

    opacity:.80;

}

.orngColor{

	color:#FFFFFF;

}

#fnshRecord{

	background-color:#a54a4a;

}

#sbmtRecord{

	display:none;

}

.w90{

	width:90%;

}



#errorMsg{

	width: 900px;

	margin: 0 auto;

	padding: 10px 50px;

	background:#EBF8A4;

	margin-bottom:15px;

	height:20px;

	text-align:left;

	border:1px solid #A2D246;

	border-radius:5px;

	color:#000;

	box-shadow:0px 1px 1px #FFF inset;

	background-image:url(images/s_success.png);

	background-repeat: no-repeat;

	background-position: 5px 50%;

}



#bhvSkill{

	display:inline-block;

	position:absolute;

	right:5px;

	background-color:#3d0d23;

	border-color:#470c0c;

	box-shadow:0px 1px 1px #FFF inset;

}

#bhvSkill2{

	display:none;

	margin-left:5px;

	 

	background-color:#0d1d3d;

	border-color:#0d1d3d;

	box-shadow:0px 1px 1px #FFF inset;

}

#bhvSkill3{

	display:none;

	margin-left:5px;

	 

	background-color:#580c02;

	border-color:#020258;

	box-shadow:0px 1px 1px #FFF inset;

}

#promote{

	margin-left:5px;

	display:inline-block;

	background-color:#4e086e;

	

	border-color:#4e086e;

	box-shadow:0px 1px 1px #FFF inset;

}

#demote{

	display:inline-block;

	margin-left:5px;

	background-color:#ffae00;

	border-color:#ffae00;

	

	box-shadow:0px 1px 1px #FFF inset;

}

#withdraw{

	 

	margin-left:5px;

	display:inline-block;

	background-color:#b82800;

	border-color:#b80034;

	box-shadow:0px 1px 1px #FFF inset;

}

#bhvSkill a{

	color:#fff;

	text-decoration:none;

}

#stdName{

	font-size:18px;

	font-weight:bold;

}

#bhv{

	display:none;

	

}

.crs{

	cursor:pointer;

}

.crs:hover{

	color:#c16f0a;

} 

#bhv td{

	padding:0px 5px;

}

.smallBox{

	width:20px;

	border-radius:5px;

	border:1px solid #CCC;

}

#bhvList{

	position:relative;

}

#loader{

	position:absolute;

	top:200px;

	left:40px;

	padding:10px;

	display:none;

	/*background-color:#FF8000;

	border-radius:10px;

	background-color: #0A2D36;

    opacity:.80;*/

}



#error_msg{

	color:red;

}



#success_msg{

	color:#1f0952;

}



#nameEditor{

	position:fixed;

	width:40%;

	left:30%;

	background:#ffe600;

	top:100px;

	z-index:100000;

	display:none;
}
	
@media only screen and (max-width: 959px){
	 
    #wrapper {

	width: 100%;
	
	margin: 0 0px;

	padding: 0 0px;
	
}
	#logo {

	width: 100%;
	
    position: inherit;

}

    #smalogo img{
        
        width: 25%;
		
		height: auto;
		
		
        
}

.hlogo{
    background-size: contain;
	background-position: center;
	width: 100%;
	height: 100%;
	clear: both;
}

.hlogo img {
	margin-left: 25%;
	margin-right: 25%;

}


#header-wrapper.container {

	width: 100%;

	margin: 0px 0px;

}

#header.container {

	width: 100%;

	margin: 0px 0px;

}

.container {
	
	width: 100%;
	
	background-size: 100%;
}


  

#page {

	width: 71%;



	background: #FFFFFF;

}

.table-container {
        overflow-x: auto;
    }

    table {
        width: 100%;
    }


#focus {

	width: 71%;



	background-color: #86bce99f;

}





#tasks {

	display: none;

}


#content {


	width:100%;
	
	margin: 0px 10px;

	padding: 20px 0px 0px 0px;

}

#contentFull {


	width: 100%;

	padding: 10px 0px 0px 0px;

}
#sidebar {


	width: 100%;

	margin: 0 0;

	padding: 1px 0 0 0;

}
.post {
	
	width: 100%;
	
	margin: 0 0;
}

.entry {
	
	width: 100%;
	

	
}

.dre {
	
	width: 100%;
	

	
}

.bigbtn {
	
	width: 90%;
	
}

.bigbox {
	
	width: 90%;
	
	
}
#backgrnd {
	
	background: url("images/img012.jpg");
	
	background-size: auto;
	
	background-repeat: no-repeat;
}

#optn{

	width: 71%;

}

#optn{

	width: 71%;

}

 .bigOptnBx{

	 width:100%;

	 height:40px;

	 border:1px solid #A3A3A3;

	 border-radius:5px;

	 padding:5px;

	 font-family: 'titilum_r', serif;
 }

#rpts #admst .thd {
	width: 100%;
}

#mainTableBody{
	
	width:75%;
}
#newbody  {
	background-size: 100%;
 width:	100%;
}

}


#backgrnd {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

/* Add the following CSS for small screens (max-width: 480px) */
@media only screen and (max-width: 480px) {
    .table-container {
        overflow-x: auto;
    }

    table {
        width: 100%;
    }
}

.trmark {
	background-color: #f8f9fa;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}