/*********

Department of Pathology CSS

*********/

#wrapper {
	background: url(gfx/banner-inner.jpg) center 0px no-repeat;
}
.titleinner {
	padding-top: 280px;
	margin-top: 0px;
    background: url(gfx/title.png) 232px 84px no-repeat;
}
#title h1 {
	padding: 14px 0 0px 0px;
	font-size: 36px;
	line-height: 1.1;
	margin: 0 0 0 23px;
	background: none;
	font-weight: 300;
    position: relative;
    opacity: 1;
    text-rendering: optimizeLegibility;
}
#title h1.notopimage {
    padding-right: 165px;
    max-width: 650px;
    margin-bottom: 7px;
}
#title img {
	display: none;
}
#content h1 {
    font-size: 30px;
    line-height: 1.3;
    color: #333333;
    margin: 0 0 28px 0;
}
#content h2 {
	margin: 35px 0 14px 0;
    text-rendering: optimizeLegibility;
    border-bottom: none;
	font-weight: 300;  
    font-size: 28px;
}
#content p {
    font-size: 15px;
    line-height: 1.5;
}
#content h2 strong {
    font-weight: 700;
}
#content  h2:first-of-type {
    margin-top: 0;
}
#content p + h2:first-of-type {
	margin-top: 35px;
}
#content .grid1 img {
        max-width: 100%;
    }
#content .grid4 .grid1:nth-of-type(4n) {
    margin-right: 0;
}

/* Profiles */

body.OTAGO034989 .titleinner h1 {
    display: none;
}
body.OTAGO034989 #content h1 {
    font-size: 36px;
    color: #163568;
    line-height: 1.3;
}
body.OTAGO034989 #right {
    margin-top: 21px;
}

/* Right column */

#right {
	background-image: none;
    padding: 0 0 0 43px;
}

/* ////////////


Frontpage styles


/////////////// */


body.frontpage {
    background: url(gfx/background.png) center 0px repeat-x;
}
body.frontpage #wrapper {
	background: url(gfx/banner.jpg) center 0px no-repeat;
}
body.frontpage .titleinner {
    padding-top: 360px;
    background: url(gfx/title.png) 230px 130px no-repeat;
    padding-bottom: 14px;
}
body.frontpage #title h1 {
	line-height: 1.2;
    background: none;
    padding: 5px 0 14px 0px;
}
body.frontpage #title h1.notopimage {
	max-width: 882px;
    font-size: 32px;
    padding-right: 0;
    margin-bottom: 0px;
}
body.frontpage #content hr {
	margin: 0px 0 14px 0;
    padding: 0;
	border-top: 1px solid #e4e4e4;
}
body.frontpage #content {
    margin-top: 0;
    padding-top: 0;
    min-height: 150px;
}
body.frontpage #content h2 {
	font-weight: 300;
    font-size: 22px;
    line-height: 1.3;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px 0 14px 0;
    text-rendering: optimizeLegibility;
    color: #555555;
}
body.frontpage #content h3 {
    padding: 21px 0 7px 0;
    font-size: 21px;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
}
body.frontpage #content .grid4 .grid1 {
    box-shadow: 0px 1px 21px #e1e1e1;
    margin-top: 35px;
    margin-bottom: 35px;
    min-height: 450px;
}
body.frontpage #content p.clearall {
    line-height: 0;
    margin-bottom: 0;
}
body.frontpage #content .subjects-container {
    background: #416ebf;
    overflow: hidden;
    padding: 14px 0 7px 0;
    margin-bottom: 21px;
}
body.frontpage #content .subjects-container li {
    list-style-image: url(gfx/arrow.png);
    line-height: 1.8;
}
body.frontpage #content .subjects-container a {
    color: #ffffff;
    border-bottom: none;
}
body.frontpage #content .subjects-container a:hover {
    color: #c2d8ff;
}
body.frontpage #content .grid_half.shadow-box {
    background: #f1f1f1;
    width: 46.4%;
    box-sizing: border-box;
    padding: 0 21px;
    min-height: 310px;
    margin-top: 14px;
    margin-right: 7.2%;
}
.features.news {
    margin-bottom: 42px;
}
body.frontpage .features.news h2 {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 21px;
}




/* MEDIA QUERIES ***************************************/


/*******

iPad landscape >

*******/

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #title h1.notopimage {
        max-width: 100%;
        padding-right: 0;
    }
    #contentwrapper {
        width: 879px;
    }
    body.frontpage .titleinner {
    }
	  body.frontpage #title h1.notopimage {
		   max-width: 650px;
	  }
    body.frontpage #content .grid_half.shadow-box {
        min-height: 490px;
    }
    .features.news {
        width: 650px;
    }
    .features.news article:nth-of-type(3n) {
        margin-right: 0;
    }
    .features.news article:nth-child(5) {
        display: none;
    }
}




/******

Portrait tablet ^

*******/

@media only screen and (max-width: 768px) {
    #wrapper {
        background-position: -160px 0;
    }
    body.frontpage #wrapper {
    	background: url(gfx/banner-inner.jpg) -100px 0px no-repeat;
    }
    #wrapper {
        width: 753px;
    }
    .titleinner {
	    padding-top: 280px;
        padding-bottom: 0;
        background: url(gfx/title.png) 230px 95px no-repeat;
    }
    
    body.frontpage #title h1 {
		width: auto;
        padding-bottom: 7px;
        background: none;
	}
    #title h1.notopimage {
        max-width: 100%;
        padding-right: 0;
        line-height: 1.2;
        font-size: 32px;
    }
    body.frontpage .titleinner {
        padding-top: 320px;
        padding-bottom: 14px;
    }
	body.frontpage #title h1.notopimage {
        line-height: 1.2;
        font-size: 34px;
    }
	body.frontpage #content {
        padding-top: 0;
        padding-bottom: 42px;
    }
    body.frontpage #content .grid2 {
        margin-top: 14px;
        margin-bottom: 7px;
    }
    body.frontpage #content .grid4 .grid1:nth-of-type(2n) {
        margin-right: 0;
    }
    body.frontpage #content .grid4 .grid_third {
        width: 100%;
    }
    body.frontpage #content .grid1 {
        width: 44.5%;
        min-height: 0;
        padding-top: 0;                                
    }
    
    body.frontpage #content h2 {
        font-size: 24px;
    }
    #features {
        width: 418px;
        margin-left: 232px;
    }
    #features .news article {
        width: 186px;
    }
    .features.news article:nth-of-type(2n) {
        margin-right: 0;
    }
	#right {
		border-top: 1px solid #e4e4e4;
		margin-top: 0px;
	}
	body.frontpage #right {
		border-top: none;
		width: 186px;
        padding: 0 0 0 232px;
	}
    body.frontpage #right .relatedinfo {
        width: 186px;
    }
}



/*******

Mobile styles (phone and small tablet) media query

*******/

@media only screen and (max-width: 700px) {                         
    body,
    body.frontpage {
        background: none;
    }
    #wrapper {
        background-position: center -135px;
        width: 100%;
    }
    body.frontpage #wrapper {
        width: 100%;
        background-position: center 0px;
        background-size: 1000px;
    }
    .titleinner {
	    padding-top: 180px;
        padding-bottom: 0;
        width: 92%;
        background-size: 170px;
        background-position: 5px 56px;
    }
    body.frontpage .titleinner {
	    padding-top: 215px;
        padding-bottom: 14px;
        width: 92%;
        background-size: 190px;
        background-position: 2px 60px;
    }
    #content {
        padding-top: 0;
    }
    #title h1 {
        font-size: 28px;
        margin-left: 0;
        width: 100%;
        text-shadow: 1px 1px 0px #ffffff;
    }
    #title h1.notopimage {
        font-size: 30px;
    }
    .titleinner h1 {
        max-width: 100% !important;
        min-width: 186px !important;
    }
    body.frontpage #title h1 {
        margin-left: 0;
        width: 100%;
        text-shadow: 1px 1px 0px #ffffff;
        background: none;
    }
    body.frontpage #title h1.notopimage {
        line-height: 1.15;
        font-size: 34px;
    }
    body.frontpage #content h2 {
        font-size: 20px;
    }
    body.frontpage #content .grid1 {
        width: 46%;
        margin-right: 7%;
        margin-bottom: 0;
    }
    body.frontpage #right {
		width: 100%;
        padding: 0;
	}
    body.frontpage #right .relatedinfo {
        width: 100%;
    }
    body.frontpage #right .relatedinfo ul li {
        width: 100%;
    }
    #features {
        width: 97%;
        margin-left: 0;
    }
    #features .news article {
        width: 47.5%;
        margin-right: 5%;
        margin-bottom: 21px;
    }
    #features .news article img {
        width: 100%;
    }
    #features .news article:nth-of-type(2n) {
        margin-right: 0;
    }
}

/* Retina-specific stuff here */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    body.frontpage .titleinner {
        background-image: url(gfx/title@2x.png);
        background-size: 225px 116px;
    }
    .titleinner {
        background-image: url(gfx/title@2x.png);
        background-size: 225px 116px;
    }
}