/*

Theme Name: Southampton University Theme 2016
Author: Alex Furr and Simon Ward
Description: Based on the 2016 UoS brand, this theme is ideal for blogging but also delivering module content via wordpress. Topics, Lecture and Slide functionality as well as student progress is integrated into the theme itself.
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;
}



/*--------------------------------------------------------------
## Progress Tracker
--------------------------------------------------------------*/

#slideProgresssionCount a
{
	border-bottom:0px;
}

.slideMiniNavNext:before
{
	content: 		"\f138";
	font-family: 	FontAwesome;
	color:			#005C85;
	font-size:		18px;
	padding:10px;
}

.slideMiniNavBack:before
{
	content: 		"\f137";
	font-family: 	FontAwesome;
	color:			#005C85;
	font-size:		18px;
	padding:10px;
}





#slideProgresssionCount
{
	border-bottom:1px solid #ccc;
	margin-bottom:5px;
	text-align:right;
	
}




#slidesMiniMenu
{
	padding-bottom:20px;
}



#topicsList li li
{
	padding-left:20px;
}


#lectureList
{
	padding-bottom:20px;
}

#topicsList .topicDiv
{
	border-bottom:1px solid #ccc;
	padding: 10px 0px;
}

.lectureOverview
{
	padding: 4px 0px;
}
.lectureOverview .slideCount
{
	color:#808080;
	font-size:70%;
}

.lectureOverview .lectureTitle
{
	font-size:22px;

}


.topicDiv .topicThumbnail
{
	float:left;
	width:80px;
	height:80px;
	margin-right:15px;
}

.topicDiv .topicThumbnail .sizeable
{
	border:0px;
	width:100%;
	height:100%;
	display:block;
}

.topicDiv .topicInfo
{
	float:left;
}

.subMenuLinkRead
{
	position:relative;
	color:green;
}

.subMenuLinkUnread
{
	font-weight:bold;
}

.subMenuLinkRead:after
{
	padding:10px;
	content: 		"\f00c";
	font-family: 	FontAwesome;
	color:			#005C85;
	font-size:		18px;
	color:green;
}

#pTrackerNav
{
	padding-top:20px;
}

.progress
{
	margin-bottom:15px;
}




.timeIcon:before
{
	content: 		"\f017   ~";
	font-family: 	FontAwesome;
	color:			#f017 ;
	font-size:		18px;
}


/*--------------------------------------------------------------
## 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, .search-results .uos_topics, .search-results .uos_lessons, .search-results .uos_slides
{
	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], #questionDiv  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;

}