/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}





html {overflow-y: scroll;
        border: none;
        outline: none;}

body {position: relative;
        width: 100%;
        margin: 0 auto;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 20px;
        font-size: 13px;
        color: #4a4949;}

h1 {font-size: 130%;
    color: #c83333;
    border-bottom: 1px solid #c83333;
    margin: 0 0 20px; 0;
    padding-bottom: 10px;}

h1#introduction {width: 100px;}
h1#about {width: 138px;}
h1#about_college {width: 178px;}
h1#key_facts {width: 285px;
                padding-top: 30px;}
h1#working_for_us {width: 121px;}
h1#search_vacancies {width: 143px;}
h1#vacancy {width: 128px;}
h1#employee_benefits {width: 152px;margin-top: 7px;}

h2 {font-size: 115%;
    margin: 0 0 15px; 0;}

a {text-decoration: none;}
a:focus {background-color: transparent;}

ul {list-style-type: none;
        margin: 0;
        padding: 0;}

p {margin: 0 0;}

p#form {display: inline;
   padding-right: 15px;
    font-weight: bold;
    margin-left: 154px;}



/************WRAPPER*/
.wrapper-top {width: 100%;
        margin: 0 auto;
        background-color: #333366;
        position:relative;}

.wrapper-footer {width: 100%;
        margin: 0 auto;
        background-color: #333366;
        clear: both;}

.header {width: 920px;
        margin: 0 auto;
        padding-top: 40px;}


.wrapper-content {width: 920px;
        margin: 0 auto 45px auto;
        clear: both;
        position:relative;}


#content_left {float: left;
                margin: 40px 0 40px 25px;
                width: 525px;}

#content_right {float: right;
                border-left: 1px solid #c83333;
                margin: 40px 25px 40px 0;
                width: 285px;
                padding-left: 30px;}

#content_footer {width: 920px;
                margin: 0 auto;
                padding: 25px 0;}

#details_content_left {float: left;
                margin: 40px 0 0 25px;
                width: 690px;}

#vacancies_content_left {float: left;
                margin: 40px 0 35px 25px;
                width: 525px;}





/************HEADER*/
span#logo {background-image: url(/Content/images/sprite.png?v=20190510);
        width: 229px;
        height: 57px;
        overflow: hidden;
        background-position: 0px 0px;
        float: left;}

span#second_logo {background-image: url(/Content/images/sprite.png);
        width: 216px;
        height: 51px;
        overflow: hidden;
        background-position: -238px -1px;
        float: left;
        margin-left: 35px;}


p#header {font-weight: bold;
        color: white;
        float: right;
        margin: 14px 20px 0 0}


a#first_icon {background-image: url(/Content/images/sprite.png);
        width: 41px;
        height: 41px;
        overflow: hidden;
        background-position: -458px -1px;
        float: right;
        margin-top: 5px;}

a#first_icon:hover {background-image: url(/Content/images/sprite.png);
        background-position: -458px -42px;}


a#second_icon {background-image: url(/Content/images/sprite.png);
        width: 41px;
        height: 41px;
        overflow: hidden;
        background-position: -500px -1px;
        float: right;
        margin-left: 10px;
        margin-top: 5px;}

a#second_icon:hover {background-image: url(/Content/images/sprite.png);
        background-position: -500px -42px;}


a#third_icon {background-image: url(/Content/images/sprite.png);
        width: 41px;
        height: 41px;
        overflow: hidden;
        background-position: -543px -1px;
        float: right;
        margin-left: 10px;
        margin-top: 5px;}

a#third_icon:hover {background-image: url(/Content/images/sprite.png);
        background-position: -543px -42px;}




/************NAV BAR*/
div#nav {clear: both;
        width: 920px;
        margin: 0 auto;
        padding-top: 40px;}

ul#nav {margin: 0 auto;
        font-size: 14px;
        text-align: center;}

ul#nav li {display: inline-block;
            padding: 0 0 10px 0;
            margin: 0 auto;
            border-bottom: 4px solid transparent;}

ul#nav li a {color: white;
            padding: 0 40px 18px 40px;}


ul#nav li a:hover {color: #96cf77;}
ul#nav li:hover {border-bottom: 4px solid white;}

ul#nav li#current {border-bottom: 4px solid white;}
ul#nav li a#current {color: #96cf77;}


/************FOOTER*/
#footer_text {margin-left: 25px;
                width: 350px;
                color: white;
                float: left;
                margin-right: 25px;}

.logotexthome
{
    width: 350px;
    height: 28px;
    float: right;
    margin: 7px 25px 0 0;
    color:white;
    margin-right: -13px;
}

.logotext
{
    width: 350px;
    height: 28px;
    float: right;
    margin: 7px 25px 0 0;
    color:white;
    margin-right: -13px;
}

.logotexthome a {
    color: white;
}

/*a#blue_octopus_logo {width: 250px;
                    height: 28px;
                    float: right;
                    background-image: url(/Content/images/sprite.png);
                    background-position: 0 -520px;
                    margin: 7px 25px 0 0;}*/

#clear {clear: both;}




/************BANNER*/
#banner {width: 920px;
        height: 250px;
        margin: 0 auto;
        border-top: 2px solid white;
        overflow: hidden;}


/************HOME*/
img#guidelines-tree {padding: 30px 0 40px 0;}


a#button {font-size: 100%;
    color: #c83333;
    border-bottom: 1px solid #c83333;
    margin: 20px 0 0 0;
    padding-bottom: 5px;
    font-weight: bold;
    float: right;}

a#button:hover {color: #333366;
                border-bottom: 1px solid #333366;}




span#current_vacancies_image {background-image: url(/Content/images/sprite.png);
                        background-position: 0 -88px;
                        float: right;
                        width: 285px;
                        height: 156px;
                        margin-bottom: 25px;}

span#email_alerts_image {background-image: url(/Content/images/sprite.png);
                        background-position: -285px -88px;
                        float: right;
                        width: 285px;
                        height: 156px;}





/************VACANCIES*/
ul#facts, ul#vacancy {list-style-type: disc;
            padding-left: 16px;}

ul#vacancy li {color: red;}
ul#vacancy span {color: #4a4949;}


#vacancy_search {clear: both;
                width: 870px;
                margin: 0 auto;}


form {width: 870px;
    margin: 0 auto;
    font-size: 100%;}

table#vacancies {width: 870px;
        border-collapse: collapse;
        margin: 45px auto 0 auto;}



input[type=text] {width: 300px;
                    height: 28px;
                    border: 1px solid #dadad9;
                    font-size: 100%;
                    padding: 0 5px;}

input[type=button], input[type=submit] {height: 30px;
                    width: 86px;
                    background-color: #96cf77;
                    color: white;
                    border: 1px solid  #96cf77;
                    margin-left: 15px;
                    font-size: 100%;
                    font-weight: bold;}

input[type=button]:hover, input[type=submit]:hover {
                    background-color: #333366;
                    border: 1px solid  #333366;
                    color: white;}

input[type=button]:activem input[type=submit]:active {
                    background-color: #333366;
                    border: 1px solid  #333366;
                    color: white;}

::-webkit-input-placeholder {font-style: italic;}

:-moz-placeholder { /* Firefox 18- */ font-style: italic;}

::-moz-placeholder {  /* Firefox 19+ */ font-style: italic;}

:-ms-input-placeholder {font-style: italic;}


th {text-align: left;
        padding: 0 0 13px 0;}

td.job_title {width: 360px;
                padding: 13px 15px 13px 0;
                border-top: 1px solid #dadad9;
                border-bottom: 1px solid #dadad9;}

td.location {width: 180px;
            padding: 13px 15px 13px 0;
            border-top: 1px solid #dadad9;
            border-bottom: 1px solid #dadad9;}

td.salary {width: 180px;
            padding: 13px 15px 13px 0;
            border-top: 1px solid #dadad9;
            border-bottom: 1px solid #dadad9;}

td.closing_date {width: 150px;
                padding: 10px 0;
                border-top: 1px solid #dadad9;
                border-bottom: 1px solid #dadad9;}

td.table_button {border-top: 1px solid #dadad9;
                width: 115px;
                border-bottom: 1px solid #dadad9;}

td.table_button span#read_more a {float: right;
                        font-size: 100%;
                        font-weight: bold;
                        color: white;
                        padding: 7px 17px;
                        background-color: #96cf77;}

td.table_button span#read_more a:hover {background-color: #333366;}




/************DETAILS*/
a#download {color: #96cf77;
            font-weight: bold;
            float: right;}

a#download:hover {color: #333366;}


#downloadable_content {clear: both;
                        float: left;
                        margin: 30px 0 0 25px;}


table#files {width: 400px;
        border-collapse: collapse;
        margin: 10px 0 0 0;}

td#title {padding: 10px 15px 10px 0;
                border-top: 1px solid #dadad9;
                border-bottom: 1px solid #dadad9;}

td#download {padding: 10px 0;
                border-top: 1px solid #dadad9;
                border-bottom: 1px solid #dadad9;}



#content_details_buttons {float: left;
                        clear: both;
                        margin: 30px 0 45px 25px;}

#back_button a {float: left;
                font-weight: bold;
                        font-size: 100%;
                        color: white;
                        padding: 7px 25px;
                        background-color: #96cf77;}

#back_button a:hover {background-color: #333366;}


#apply_button a {float: left;
                font-weight: bold;
                        font-size: 100%;
                        color: white;
                        padding: 7px 25px;
                        background-color: #96cf77;
                        margin-left: 10px;}

#apply_button a:hover {background-color: #333366;}