/* Setting the font family for the maths project */
body {
    font-family: Arial, Helvetica, sans-serif;
}

/*Styling the project body container with an ID of container*/
#container {
    width: 1050px;
    /* border: 1px solid gray; */
    margin: 0 auto;
}

/*Styling the header with an ID of header*/
#header {
    height: 100px;
    padding: 10px 0;
}

/*Styling the project title with an ID of brand*/
#brand {
    float: left;
}

/*Styling the project title and link*/
h1 a {
    font-size: 50px;
    font-weight: 100;
    color: #861BBF;
    text-decoration: none;
}

/*Styling the search box*/
#searchBox {
    float: right;
    background: linear-gradient(#E4F2B9, #B7E953);
    background: -webkit-linear-gradient(#E4F2B9, #B7E953);
    background: -o-linear-gradient(#E4F2B9, #B7E953);
    background: -moz-linear-gradient(#E4F2B9, #B7E953);
    background: linear-gradient(#E4F2B9, #B7E953);
    width: 400px;
    height: 50px;
    padding: 20px 20px 0 20px;
    margin-top: 20px;
}

/*Syling the text input on the form*/
.text {
    float: left;
    width: 200px;
    padding: 5px;
    font-size: 15px;
    color: #E36A0C;
    background: white url(images/search.png) right center no-repeat;
    border: 1px solid #C8D03E;
}

/*Styling the submit button on the form*/
.submit {
    float: right;
    padding: 5px;
    font-weight: bold;
    color: white;
    background: #A751D6;
    font-size: 15px;
}

/*Syling the clear property on the form*/
.clear {
    clear: both;
}

/*Styling the project menu div*/
#menu {
    height: 70px;
    background: -webkit-linear-gradient(#F8F594, #D5D533);
    background: -o-linear-gradient(#F8F594, #D5D533);
    background: -moz-linear-gradient(#F8F594, #D5D533);
    background: linear-gradient(#F8F594, #D5D533);
    padding: 7px 0;
}

/*Styling the unorder links*/
ul {
    list-style: none;
}

/*Styling the list items*/
#menu ul li {
    float: left;
    padding: 0 30px;
    height: 30px;
    border-right: 1px solid #5D12E7;
}

/*Styling the last list item on the menu div*/
#menu ul li:last-child {
    border-right: none;
}

/*Styling the text inside the list item - removing the border bar*/
#menu ul li a {
     text-decoration: none;
     text-transform: uppercase;
     font-size: 17px;
     color: #5D12E7;
     line-height: 30px;
     -webkit-transition: font-size 0.3s ease;
     -moz-transition: font-size 0.3s ease;
     -o-transition: font-size 0.3s ease;
     -ms-transition: font-size 0.3s ease;
     transition: font-size 0.3s ease;
}

/*Styling the text inside the list item - setting the first list item active*/
#menu ul li a:hover, #menu ul li a.active {
    font-size: 20px;
    font-weight: bold;
    color: #B314DB;
}
/*Syling the project content box*/
#introduction {
    background: linear-gradient(#E5F2BB, #B7E952);
    background: -webkit-linear-gradient(#E5F2BB, #B7E952);
    background: -o-linear-gradient(#E5F2BB, #B7E952);
    background: -moz-linear-gradient(#E5F2BB, #B7E952);
    padding: 30px;
    margin: 16px 0;
}

/*Styling the project context box - the title with an ID of introduction*/
#introduction h3 {
    font-size: 45px;
    color: #316901;
    font-weight: normal;
}

/*Styling the project context box - the paragraph*/
#introduction p {
    font-size: 25px;
    color: #628F19;
    text-align: justify;
}

/*Styling the common sidebar property with a class of sidebar*/
.sidebar {
    height: 500px;
    width: 450px;
    border: 1px solid #BAF46F;
    border-radius: 20px;
    padding: 10px 30px;
}

/*Styling the common sidebar title property*/
.sidebar h3 {
    color: hsl(288, 83%, 47%);
    font-size: 30px;
}

/* Styling the left side bar list */
.sidebar ul {
    padding-top: 8px;
}

/* Styling the left side bar list items */
#leftsidebar ul li {
    padding: 4px 0 4px 10px;
    list-style-image: url(images/arrow.png);
}

/* Styling the right side bar list items */
#rightsidebar ul li {
    padding: 17px 0 20px 70px;
    background: url(images/tick.png) no-repeat left center;
}

/* Styling the links inside the list */
.sidebar ul li a {
    text-decoration: none;
    font-size: 20px;
    color: #5D12E7;
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}

/* Styling for the hover and effect on the sidebar links and the active effect on the first links*/
.sidebar ul li a:hover, .sidebar ul li a.active {
    text-decoration: none;
    color: #B314DB;
    font-size: 23px;
    font-weight: bold;
}

/* Styling the left sidebar */
#leftsidebar {
    float: left;
}

/* Styling the right sidebar */
#rightsidebar {
    float: right;
}

.footer {
    height: 60px;
    background: linear-gradient(#F6F390, #D5D533);
    background: -webkit-linear-gradient(#F6F390, #D5D533);
    background: -o-linear-gradient(#F6F390, #D5D533);
    background: -moz-linear-gradient(#F6F390, #D5D533);
    padding: 10px 30px;
    margin-top: 15px;
}