/*

Theme Name: UoS 2016 Base Blog
Author: Alex Furr and Simon Ward
Description: Based on the 2016 UoS brand, this theme is stripped of additional code so can be used as a parent theme for other functionality
Version: 0.1


------------------------------------------------------ */


* { 	
	margin:			0;
	padding:		0;
}

html {	
	height:			100%;
}

body {	
	height:			100%; 
	background:		#f8f8f8;
	font:			normal normal 500 100% 'Open Sans', sans-serif;
	color:			#303030;
}

div#v-wrap-main { 
	position:	relative;
	width:		100%;
	min-height:	100%;
	min-width:	280px;
}


/* --- section wrappers ----------------------------- */




div#v-header-above 	{
	height:			50px;
	background:		#002E3B;
}

div#v-header{
	background:		#005C85;
	height:			auto;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.3);

}
div#v-header-below
{
	height:auto;
	background:#005176;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.3);

}
div#v-showcase {
	position: 	relative;
	min-height:	150px;
	background:#002E3B;
}

div#v-showcase div.showcaseText {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:	rgba(0,0,0,0.2);
	
}

div#v-showcase div.showcaseText h1 {
	color:			#fff;
	font-size:		46px;
	line-height:	120%;
	margin:			22px 0 0px 0;
	text-shadow: 	1px 1px 2px rgba(0, 0, 0, 0.46);
}

div#v-showcase div.showcaseText p {
	color:			#fff;
	font-size:		20px;
	line-height:	120%;
	margin:			0 0 0 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.46);
}


div#v-breadcrumbs 	{}

div#v-content-areas {}
	div#v-content-above	{}
	div#v-content 		{}
	div#v-content-below	{}

div#v-footer 		{}
div#v-copyright 	{}

div#v-mobile-navbar {
	background:			#202020;
	height:				55px;
}



/*--------------------------------------------------------------
## Standard UoS Theme Stuff
--------------------------------------------------------------*/

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

a {
    border-bottom: 1px dotted rgba(0,92,133,.4);
}


a {
    text-decoration: none;
    color: #005C85;
}

a:hover{color:#0097C2;border-bottom:none}






.uos-brand
{
	height: 80px;
    width: 175px;
    margin: 0;
    top: 0;
    left: 50px;
    width: 140px;
    height: 50px;
    background: url(https://www.southampton.ac.uk/assets/site/design/images/uos-brand.png) center no-repeat;
    background-size: 120% auto;
    text-indent: -999px;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 2;	
}

a.uos-brand,
#accessibilityLink a {
	text-decoration:		none;
	border-bottom: 			0;
}


#accessibilityLink
{
	padding:9px 20px;
	right:60px;
    position: absolute;
}

#accessibilityLink a
{
	color:#ccc;
	text-decoration:none;
	font-size: .75em;
    line-height: 30px;
	
}

#accessibilityLink a:hover
{
	color:#fff;
}





/* --- inner alignment wrappers ----------------------------- */


div.align-C,
div.align-L,
div.align-R {
	position:	relative; 
	max-width:	1100px;
	overflow:	visible; 
}
div.align-C { 
	margin:		0 auto 0 auto;
	padding:	0 20px 0 20px;
}
div.align-L {
	margin:		0 0 0 auto; 
}
div.align-R {
	margin:		0 auto 0 0; 
}


@media only screen and ( min-width: 960px ) and ( max-width: 1199px ) { /* Blue */
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:	920px;
	}
}

@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {	/* Pink */
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:	720px;
	}
}

@media only screen and ( min-width: 481px ) and ( max-width: 767px ) { /* Red */
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:	440px;
	}
}

@media only screen and ( max-width: 480px ) { /* Black */
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:	440px;
	}
}






/* --- columns ----------------------------- */


div.pairs,
div.thirds,
div.fourths,
div.fifths,
div.sixths {
	position:		relative;
	max-width:		100%;
	overflow:		hidden;
}

div.pairs > div {
	width:			48%;
}
div.pairs div:first-child {
	float:			left;
}
div.pairs div:last-child {
	float:			right;
}


div.thirds > div {
	width:			33.2%;
	float:			left;
}
div.thirds > div:last-child {
	float:			right;
}


div.fourths > div {
	width:			24.9%;
	float:			left;
}


div.fifths > div {
	width:			19.9%;
	float:			left;
}


div.sixths > div {
	width:			16.5%;
	float:			left;
}






@media only screen and ( min-width: 481px ) and ( max-width: 767px ) { /* Red */
	
	
	div.pairs > div {
		float:			none;
		width:			100%;
	}
	div.pairs div:first-child {
		margin-bottom:	20px;
	}
	
	div.thirds > div {
		float:			none;
		width:			100%;
		padding-bottom:	20px;
	}
}

@media only screen and ( max-width: 480px ) { /* Black */
	
	div.pairs > div {
		float:			none;
		width:			100%;
	}
	div.pairs div:first-child {
		margin-bottom:	20px;
	}
	
	div.thirds > div {
		float:			none;
		width:			100%;
		padding-bottom:	20px;
	}
}




/* --- fonts -------------------------- */
p {
	font-size:		16px;
	line-height:	150%;
	margin:			0 0 15px 0;
	color:			#343536;
}

h1 {
	font-size:		42px;
	font-weight:	300;
	margin:			0 0 11px 0;
	line-height:	120%;
	padding-top:	10px;
}

h2 {
	font-size:		30px;
	font-weight:	400;
	margin:			0 0 10px 0;
	line-height:	120%;
	padding-top:	10px;
}

h3 {
	font-weight:	400;
	font-size:		24px;
	margin: 		15px 0px 5px 0px;
}





















/* --- helpers ----------------------------- */





.sizeable
{
	width:100%;
	height:auto;
	display:block;
}

.mobileOnly { 
	display: none; 
}
.desktopOnly {
}

.noMobile {
}
.noDesktop { 
	display: none; 
}


.clearL {
	height: 	0;
	clear:		left;
}
.clearR {
	height: 	0;
	clear:		right;
}
.clearB {
	height: 	0;
	clear:		both;
}

.fL {
	float: 		left;
}
.fR {
	float:		right;
}

img.autoSize {
	width:	100%;
	height:	auto;
}


@media only screen and ( min-width: 481px ) and ( max-width: 767px ) { /* Red */
	.mobileOnly {
		display:		block;
	}
	.noDesktop {
		display:		block;
	}
	.desktopOnly {
		display:		none;
	}
	.noMobile {
		display:		none;
	}
}

@media only screen and ( max-width: 480px ) { /* Black */
	.mobileOnly {
		display:		block;
	}
	.noDesktop {
		display:		block;
	}
	.desktopOnly {
		display:		none;
	}
	.noMobile {
		display:		none;
	}
}











/* --- main content areas ----------------------------- */

div#v-content-areas {
	min-height: 		370px;
	padding:			15px 0 30px 0;
}

div#v-content {
	float:				left;
	width:				780px;
	margin-bottom:		40px;
	padding-top:		10px;
}

div#v-content.fullwidth {
	width:1100px;
}


div#v-widgets-content {
	float:				right;
	width:				280px;
}


div#v-widgets-content h2.widget-title {
	font-size:			34px;
	font-weight:		300;
	color:				#1d1d1d;
	line-height:		150%;
	margin-bottom:		7px;
}

div#v-widgets-content ul {
	list-style-type:	none;
	margin:				10px 0 10px 0px;
	list-style:			none outside none;
	
}

div#v-widgets-content li {
	margin:				0;
	line-height:		120%;
	font-size:			13px;
	border-bottom:	1px solid #f1f1f1;
	padding:			10px 0px;
}


div#v-widgets-content li span.small {
	font-size:			11px;
	font-weight:		600;
}




@media only screen and ( min-width: 960px ) and ( max-width: 1199px ) { /* Blue */
	div#v-content {
		width:		620px;
	}
	div#v-widgets-content {
		width:		250px;
	}
	div#v-content.fullwidth {
		width:100%;
	}
}

@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {	/* Pink */
	div#v-content {
		float:		none;
		width:		100%;
	}
	div#v-widgets-content {
		float:		none;
		width:		100%;
	}
	div#v-content.fullwidth {
		width:100%;
	}
}

@media only screen and ( min-width: 481px ) and ( max-width: 767px ) { /* Red */
	div#v-content {
		float:		none;
		width:		100%;
	}
	div#v-widgets-content {
		float:		none;
		width:		100%;
	}
	div#v-content.fullwidth {
		width:100%;
	}
}

@media only screen and ( max-width: 480px ) { /* Black */
	div#v-content {
		float:		none;
		width:		100%;
	}
	div#v-widgets-content {
		float:		none;
		width:		100%;
	}
	div#v-content.fullwidth {
		width:100%;
	}
}










/* Footer
------------------ */
div#v-footer {
	background:			#002E3B;
	padding:			35px 0 35px 0;
	color:				#ccc;
}


div#v-footer h3 {
	color:				#fff;
	text-align:			left;
	font-size:			20px;
	line-height:		140%;
	font-weight:		400;
	margin-bottom:		15px;
}

div#v-footer p {
	color:				#ddd;
	text-align:			left;
	font-size:			16px;
	line-height:		150%;
	font-weight:		300;
	margin-bottom:		10px;
}
div#v-footer a,
div#v-footer a:hover {
	color: 				#aaa;
}


div#v-footer a.socmed-icon {
	display:			inline-block;
	margin:				0 10px 0 0;
	font-size:			24px;
	padding:			6px 10px 6px 0;
	text-decoration:	none;
	border-width:		0;
}

div#v-footer a.socmed-icon:hover {
	color: 				#fff;
	text-decoration:	none;
	border-width:		0;
}


/* Copyright
------------------ */
div#v-copyright {
	background:			#002E3B;
	padding:			5px;
	border-top:			1px solid #383838;
}

div#v-copyright p {
	color:				#aaa;
	text-align:			right;
	font-size:			14px;
}





/* ===============================
   WP Standard Stuff
================================== */
   
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}


/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}


/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}





/*--------------------------------------------------------------
## Buttons add ons
--------------------------------------------------------------*/


.button-right
{
	float:right;
}


#breadcrumbs{
    list-style:none;
    margin:10px 0;
    overflow:hidden;
}
  
#breadcrumbs li{
    display:inline-block;
    vertical-align:middle;
    margin-right:15px;
}
  
#breadcrumbs .separator{
    font-size:18px;
    font-weight:100;
    color:#ccc;
}


.backButton {
	position:	relative;
	padding-left:	20px;
}

.backButton:before {
	position:		absolute;
	top:			0px;
	left:			0px;
	content: 		"\f060";
	font-family: 	FontAwesome;
	color:			#005C85;
	font-size:		18px;
}

.backButton:hover:before {
	color:			#0097C2;
}



.edit-page-link
{
	margin-top:20px;	
}

/* Adds padding to the font awesom icons in the button */
button i
{
	padding-right:8px;	
}

button a
{
	border:none;
}



/*----- Home Page and Search page boxes  ------------- */
.home .post, .search-results .post, .search-results .page,  .author-page .post
{
	border:1px solid #ccc;
	padding:11px 16px 13px 25px;
	margin:20px;
	background:#fff;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.3);
}





/*--------------------------------------------------------------
## Forms
--------------------------------------------------------------*/


#commentform #comment
{
	width:600px;
	height:200px;
	border:1px solid #336699;
}






.comment-respond
{
	margin-top:20px;
}

.comments-area .comment
{
	border:1px solid #ccc;
	padding:11px 13px 13px 25px;
	margin:20px;
	background:#fff;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,.3);
}
.comments-area .comment-metadata
{
	font-size:10px;
	padding:10px 0px;
}

.comments-area .vcard img
{
	padding:0px 6px 0px 0px;
}
/*--------------------------------------------------------------
## Blog posts front page
/*--------------------------------------------------------------*/


.entry-meta
{
	color:	#ccc;
	font-size:12px;
	padding-bottom:10px;
}






#searchBox {	
	position:		absolute;
	right:			0;
	top:			0;
	width:			60px;
	padding:		0;
	text-align:		right;
	overflow:		visible;
}

#searchClick {
	display: 	inline-block;
	width:		42px;
	height:		38px;
	padding:	12px 15px 0 0;
	
	content: 		"\f00c";
	font-family: 	FontAwesome;
	font-size:		26px;
	color:			#fff;
	cursor:			pointer;
}

#searchClick:hover {
	background:		#00222c;
}

#searchBoxToggleDiv
{
	display: 		none;
	position:		absolute;
	z-index:		9999;
	right:			0;
	top:			50px;
	width:			400px;
	padding:		20px;
	background:		#00222c;
	-webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.65);
	-moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.65);
	box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.65);
}


#searchFormHeader input[type=text] {
	-webkit-border-top-left-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	vertical-align: top;
	margin:0;
	width:200px;
}




.uos-btn-primary, .search-form .search-submit, .post-password-form input[type=submit] {
	text-shadow: 0 1px 1px rgba(0,0,0,.4);
	color:#fff;
    padding-top: 10px;
    padding-bottom: 10px;
	
	height: 38px;
    line-height: 38px;
    display: inline-block;
    border: 0;
    padding: 0 14px;
    margin: -1px 0 0 0;
    
    position: relative;
    top: .5px;
	background: #D1594B!important;
	font-size:14px;
	
	-webkit-border-top-right-radius: 2px;
	-webkit-border-bottom-right-radius: 2px;
	-moz-border-radius-topright: 2px;
	-moz-border-radius-bottomright: 2px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	
	vertical-align: top;
}

.uos-btn-primary:hover, .search-form .search-submit:hover, .post-password-form input[type=submit]:hover {
    background: #d5685b!important;
	cursor: pointer;
}

#searchFormHeader #s
{
	padding-right:0px;
	margin-right:0px;
	width: 250px;
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    border: none;
    padding: 0 10px;
    border-radius: 2px 0 0 2px;

}

.uos-btn-search:before
{
	margin-left:0px;
	padding-left:0px;
}

/* Pure button Additions */
.pure-button
{
	margin-right:10px;
}

/* Default Search box widget text */
.widget-area .search-form .search-field, .post-password-form input[type="password"]
{
	padding-right: 0px;
    margin-right: 0px;
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    border: solid 1px #999999;
    padding: 0 10px;
}



/* Tooltips */

a.uos_tooltip {
  position: relative;
  display: inline;

}
a.uos_tooltip span {
  position: absolute;
  color: #212121;
  background: #F1F1F1;
  border: 2px solid #6D6D6D;
  line-height: 25px;
  text-align: center;
  visibility: hidden;
  border-radius: 1px;
  font-size:12px;
  padding:10px;
  box-shadow: 5px 5px 5px #888888;

  
}
a.uos_tooltip span:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  width: 0; height: 0;
  border-top: 12px solid #6D6D6D;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}
a.uos_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;


}
a:hover.uos_tooltip span {
  visibility: visible;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}




/* ----- Image Borders ----- */

#TB_window img#TB_Image {
	margin-top:30px;	
}

.content-area figure
 {
	padding:5px;
	border:1px solid #ccc;
	box-shadow: 5px 5px 5px #888888;
	font-size:12px;
}

a.thickbox 
{
	border-bottom:0px;
}

#keyConcepts
{
	margin:20px 0px;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
}





/*--------- Lists -------- */
.content-area ul, .content-area ol
{
	margin-left:20px;
	padding-bottom:20px 0px 20ox 0px;
}

.content-area ol ol
{
	list-style-type: lower-alpha;
}

.content-area ol ol ol
{
	list-style-type: lower-roman;
}


/*--------- Type of page or post on search page -------- */
.searchResultsPostType
{
	font-size:12px;
	color:#999;	
}

/* ---- Previous / next posts nav link --------*/

.nav-links
{
	margin-top:20px;
	clear:both;
}

.nav-links .nav-previous
{
	float:left;	
}

.nav-links .nav-previous a:before
{
	font-family: FontAwesome;
	content: "\f060";
	padding-right:10px;
}

.nav-links .nav-next
{
	float:right;	
}

.nav-links .nav-next a:after
{
	font-family: FontAwesome;
	content: "\f061";
	padding-left:10px;
}


/* ---- Remove WP Search ------------ */
#wpadminbar #wp-admin-bar-search .ab-item
{ 

    display: none;
}


.success
{
	color:#006600;
}

.fail
{
	color:#990000;	
}


ul.children {
    padding-left: 10px;
	
}

.children li::before { 
    content: "- ";
}