/*
Theme Name: UiTø WordPress 2013 (new profile)
Theme URI: http://wordpress.org/extend/themes/testtheme
Description: A responsive theme for the new profile for the University of Tromsø 2013
Author: Klaske van Vuurden
Author URI: http://wordpress.uit.no
Version: 1.0
License: N/A
License URI: N/A
Tags: none yet
Text Domain: uit_theme
*/

/* Fix for Google-web fonts bug; they do not display correctly on Android Chrome without this. Check in some months if this is fixed.*/
* { max-height: 999999px; }

@keyframes visibility{
	from{opacity: 0;}
	to{opacity: 1;}	
}


@-webkit-keyframes visibility{
	from{opacity: 0;}
	to{opacity: 1;}	
}

@keyframes swipefront1{
	from{left:-20%;}
	to{left:-6%;}		
}

@-webkit-keyframes swipefront1{
	from{left:-20%;}
	to{left:-6%;}	
}

@keyframes swipefront2{
	from{left:81%;}
	to{left:95%;}	
}

@-webkit-keyframes swipefront2{
	from{left:81%;}
	to{left:95%;}		
}





html, body {
	height: 100%;
}


body{
	font-family: 'Open Sans', Minion, Arial, Regular;
	margin: 0;
}

p{

	color: #333;
}

a{
	color: #f2a900;
	text-decoration: none;
}


h1{font-size: 1.5em;}
h2{font-size: 1.3em;}
h3{font-size: 1.1em; }




input[type="submit"], input[type="button"], button, #menuslider{
	background-color: #f2a900;
	color: white;
	padding: 5px;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover{
	background-color: grey;
}

img{
	border: 0;
	max-width: 100%;
	height: auto;
}


.content img{
	padding: 3px;
	background: white;
	margin-top: 5px;
	margin-bottom: 5px;
}

.alignleft img, img.alignleft{
	float: left;
	padding: 3px;
	margin-right:5px;
}


.alignright img, img.alignright{
	float: right;
	padding: 3px;
	margin-left:5px;
}

.alignnone img, img.alignnone{
	padding: 0;
	margin: 0;
}


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



#page{
	max-width: 1200px;
	text-align: center;
	padding: 0 10px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -264px;
}

.push{
	height: 244px;
}

#container{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
}

#primary{
	width: 75%;
	float: left;
	text-align: left;
	margin: 0;
	margin-top: 10px;
	padding: 0;
	overflow: hidden;
	
}

#main{
	text-align: left;	
}

#header-container{
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
	position: relative;
	min-height:130px;
	background-color: white;
}


#header {
	margin: 0 auto;
	margin-left: 4%;
	padding: 10px;
	float: left;
}

#header a{
	text-decoration: none;
	text-align: left;
}

.description{
	color: #000;	
}

#headerimg  {
	top: 0;
	position: absolute;
	background-color: white;
	left: 20px;
	height: 100%;
	width: 110%;
	transform: skewX(-21deg);
	-ms-transform: skewX(-21deg);
	-webkit-transform: skewX(-21deg);
}

#headerimg  #header{
	transform: skewX(21deg);
	-ms-transform: skewX(21deg);
	-webkit-transform: skewX(21deg);	
}

#sidebar{
	text-align: right;
	padding: 0 5px;
	font-size: .8em;
}

#sidebar ul{
	list-style-type: none;
}

.empty-column{
	width: 0%;
	height: 1px;
	float:left;
}

#side-widget-area{
	text-align: left;
	font-size: .9em;
	width: 25%;
	float: left;
	margin-top: 10px;
	opacity:0.95;

}


#side-widget-area ul{
	-webkit-padding-start: 20px;
}

#side-widget-area li a{
	text-decoration: none;
	border: 0;
}

.widget-area{
	margin-bottom: 20px;
	background-color: #f2f2f2;
	padding-bottom: 10px;
}

.widget-area .menu li{
	float: none;
	width: inherit;
	background-color: transparent;

}

.widget-title {
	color: #56a5bf;
	padding-bottom: 4px;
}


#footer{
	text-align: center;
	background: #eae7e3 url('images/footprint.png') repeat-x right bottom;
	padding-bottom: 50px;
	opacity:0.95;
}

#footerbar{
	text-align: center;
	width: 1200px;
	margin: 20px auto 0 auto;
	padding: 25px 0;
	overflow: hidden;
}


#footer-widget-area{
	width: 100%;
}

.footer-widget-area:first-of-type{
        border-left: none;
	
}


.footer-widget-area{
	text-align: left;
	vertical-align: top;
	padding: 0 1%;
	font-size: .8em;
        border-left: 1px solid #ccc;
 
        margin-left: -2px;

}



#footerbar aside .widget-title{
	color:black;
}

#social-badges a{text-decoration: none;}
.social-icon img{background-color: #309bbf; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;padding: 3px;}
.social-icon img:hover{background-color: grey;}
.social-icon-caption{}



#widgetbar{
	text-align: center;
	margin: 20px auto;
	padding: 0;
	padding-right: 10px;
	overflow: hidden;
	float: inherit;
	width: 100%;
	opacity:0.95;
}


#widget-widget-area{
	width: 100%;
}

.widget-widget-area:first-of-type{
	left: 0;
}

.widget-widget-area{
	text-align: left;
	font-size: .8em;
	background-color: #f2f2f2;
	left: 5px;
	vertical-align: top;
	position: relative;
	padding-left: 30px;
	overflow: hidden;
	padding-bottom: 20px;

}



.widget-logooverlay  {
	top: 0;
	position: absolute;
	background-color: #f2a900;
	left: -30px;
	height: 100px;
	width: 50px;
	transform: skewX(-21deg);
	-ms-transform: skewX(-21deg);
	-webkit-transform: skewX(-21deg);
}


#side-widget-area aside:first-of-type .widget-title{
	color: white;
	background-color: #309BBF; 
}

#side-widget-area aside:nth-of-type(2) .widget-title{
	color: white;
	background-color: #7ACCCC; 
}

#side-widget-area aside .widget-title{
	padding: 5px;
}


.widget{
	padding: 0px 9px;
	
}


#menuslider{
	display: none;
	position: relative;
	text-align: center;
	cursor: pointer;
	margin: 10px 0;
	max-width: 100%;
}

#menuslider-icon{
	opacity: 0.8;
	font-size: 1.2em;
	top: .9em;
	right: 1em;
	position: absolute;
}


#nav-container{
	width:60%;	
	float: right;

}



#access{
	padding: 5px 0;
	display: table;
	white-space: nowrap;
	width: 100%;
	font-size: .9em;
}

#access ul{
	margin-top: -16px;
	padding: 0;
	padding-top: 20px;
	list-style-type: none; 
}

#access li, #access a{
	text-decoration: none;
	padding: 2px 5px;
	float: left;
	color: grey;
	border-bottom: 3px solid transparent;	
}


#access .menu{
	max-width:720px;
}

#access .menu-item a{
	margin: 0 5px;
	color: grey;
}

#access .menu li{
	width: 19%;
	float: left;
	position: relative;
	display: inline-block;	
	border-bottom: 0;
}

#access .sub-menu, #access .children{
	display: none;
	padding: 2px;	
	background-color: #f2f2f2;
	position: absolute;
	margin-top: 0;
	z-index: 99;
	left: -2px;
}


#access .sub-menu li, #access .sub-menu a, #access .children li, #access .children a{
	width: auto !important;
	border-bottom: none !important;
	display: block;
	float: none !important;
}

#access li:hover > .sub-menu, #access li:hover > .children{
	display: block;	
	top: 25px;
}

#access .sub-menu li:hover > .sub-menu, #access .children li:hover > .children{
	display: block;
	top: 0;
	left: 99%;

}

#access .current-menu-item > a, #access li:hover > a{
	border-bottom: 3px solid #d02434;
	color: black;
}

#access .sub-menu li:hover, .menu .children li:hover{
	background-color: #d02434;
}



/* the menu is accessed through clicking a 'Menu' button on small screens */

#access-small{
	display: none;
	max-width: 100%;
	background: #f2f2f2;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px;
	margin-bottom: 10px;
}

#access-small ul{
	-webkit-padding-start: 0;
	list-style-type: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

#access-small li{
	margin-left: 5%;
	padding-top: 5px;
}

#access-small a{
	padding: 0 40px 0 10px;
}


#search-form{
	float: right; 
	text-align: right;
	position: relative;
}

#searchform{
	position: relative;
}


#search-form input[type="text"]{
	border: none;
	padding: 5px 0px 5px 55px;
	background-color: #f2f2f2;
}

#search-form #searchsubmit{
	border: none;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	color: black;
	padding: 1px 6px;
	background: transparent;
	position: absolute;

	top: 4px;	

}

.searchheader{
	background-color: #f2a900;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
}

.searchheader p{
	color: white;
	padding: 5px;
	-webkit-margin-before: 0;
}

#logo-area{
	position: absolute;
	left: 0;
	width: 30%;
	height: 100%;
	margin-left: 10px;
}

#logo-area h2{
	margin-top: 0px;
	margin-bottom: 2px;
}

#logo-area a{
	text-decoration: none;
}


#beneath-header-access ul{
	list-style-type: none;
	-webkit-padding-start: 0;
	display: table;
}

#beneath-header-access li{
	float: left;
	text-align: center;
	background-color: #f2a900;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 10px;
	margin: 5px;
	width: initial;
}

#beneath-header-access li:hover{
	background-color: grey;
}

#beneath-header-access a{
	text-decoration:none;
	color: white;
	border-bottom: 0;
}

#beneath-header-access a:hover{
	border-bottom: 0;

}

#post-container{overflow: hidden;
	position: relative;}

.thumbnail{
	overflow: hidden;
	background-image:url('images/footprint.png');

}



.thumbnail img{
	width: 100%;
	
}

.post-full{	
	background-color: #f2f2f2;
	width: 99%;
	margin-right: 1%;
	margin-bottom: 20px;
}

.post-full .thumbnail, .post-full .thumbnail img{
	height: inherit;
}

.post-full .post-text{
	padding: 15px;
}

.post-item{
	background-color: #f2f2f2;
	width: 49%;
	margin-right: 1%;
	margin-bottom: 20px;
	display: inline-block;
	overflow: hidden;
}


.post-item:hover .excerpt{
	height:inherit;
}



.post-text{
	padding: 0 9px;
	background-color: #f2f2f2;
	-webkit-transition: margin-top 0.3s ease-in-out;
	-moz-transition: margin-top 0.3s ease-in-out;
	-o-transition: margin-top 0.3s ease-in-out;
	-ms-transition: margin-top 0.3s ease-in-out;
	transition: margin-top 0.3s ease-in-out;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	height:inherit;
}


.post-item .post-text{
	opacity: 0.8;

}


.post-full .post-text{
	opacity: 0.95;

}

.post-item .post-text:hover{
	opacity: 0.99;

}


.excerpt{
	-webkit-transition: height 0.3s ease-in-out 0.1s;
	-moz-transition: height 0.3s ease-in-out 0.1s;
	-o-transition: height 0.3s ease-in-out 0.1s;
	-ms-transition: height 0.3s ease-in-out 0.1s;
	transition: height 0.3s ease-in-out 0.1s;
	
}

.content{
	padding-bottom: 20px;
	overflow:hidden;
}


.post-title{
	position:relative;
	color: #333;
}

.post-title h2{
	-webkit-margin-before: 0;
	-webkit-padding-before: 0.83em;
}

.post-title a{
	text-decoration: none;
	color: #333;
	font-weight: lighter;
}


.post-caption{
	text-align: center;
	font-size: .95em;
	color: #333;
	font-style: italic;
}

.post-title a:hover{
	color: #80a1b6;
}

.post-info{
	font-size: .7em;
}

.post-info a{
	color: #80a1b6;
	text-decoration: none;
}

.alignleft{ text-align: left;}
.alignright{ text-align: right;}
.aligncenter{ text-align: center;}

.pagenavarrow{color: white; background-color: #56A5BE; font-weight:bolder; margin: 10px; }

.pagenavarrow a{color: white; text-decoration: none; padding: 10px;}

.alignleft .pagenavarrow{ float: left;}
.alignright .pagenavarrow{ float: right;}

#frontpage-image-overlap{
	width:100%;
	margin-bottom: 10px;
	position: relative;
	height: 180px;
	-webkit-transition: max-height 1.5s linear;
	-moz-transition: max-height 1.5s linear;
	-o-transition: max-height 1.5s linear;
	-ms-transition: max-height 1.5s linear;
	transition:  max-height 1.5s linear;
	overflow: hidden;
	background-color: #f2f2f2;
}

#frontpage-blog-title{
	position: absolute;
	z-index: 2;
	left: 2%;
}

#frontpage-blog-title a{
	color: white;
	font-size: 2em;
	font-weight: lighter;
	text-decoration: none;

}

#frontpage-blog-title .description{
	color: white;
}




#frontpage-image1{
	width: 100%;
	height: 320px;
	position: absolute;
	right: 330px;
	transform: skewX(-21deg);
	-ms-transform: skewX(-21deg);
	-webkit-transform: skewX(-21deg);
	background-position-x: right;
	overflow:hidden;

}

#frontpage-image1 img{
	transform: skewX(21deg);
	-ms-transform: skewX(21deg);
	-webkit-transform: skewX(21deg);
	margin-left: 300px;
	max-width: initial;
}



/* colorbox for frontpage */

#holdingcolorbox{overflow: hidden; width: 327px; right: 0;position: absolute;}
#maincolorbox{left:35px; position: relative; }
.colorbox1{background-color: #7acccc; -webkit-transform: skewX(-21deg);	-ms-transform: skewX(-21deg); transform: skewX(-21deg);height: 180px; width: 200px;}
.colorbox2{background-color: white; height: 180px; width: 200px; position: absolute;top: 0;left: 80px;z-index:1;}
.colorbox3{background-color: #309BBF; opacity: 0.8;}
.colorbox4{background-color: #f2a900;  -webkit-transform: skewX(21deg);	-ms-transform: skewX(21deg); transform: skewX(21deg);left: 0px; position:relative; }
.colorbox5{background-color: #7acccc; -webkit-transform: skewX(-21deg); -ms-transform: skewX(-21deg); transform: skewX(-21deg);height: 180px; width: 200px;position: absolute; left: 80px}
.colorbox6{background-color: white; height: 90px; width: 200px; position: absolute;top: 90px;left: 80px;z-index:1;opacity: 0.5;}
.colorbox7{background-color: #f2a900; height: 90px; width: 66px;left:50px;opacity: 0.5;}

.colorbox8{background-color: #7acccc; -webkit-transform: skewX(-21deg);	-ms-transform: skewX(-21deg); transform: skewX(-21deg);height: 180px; width: 200px;position: absolute; left: 80px;}
.colorbox9{background-color: transparent; height: 90px; width: 200px; position: absolute;top: 0;left: 115px;z-index:1; opacity: 0.5;}
.colorbox10{background-color: white; height: 90px; width: 66px; left:50px; opacity: 0.5;}
.colorbox11{position: absolute; background-color: white; height: 180px; width: 32px; left:148px; opacity: 0.5;}




@media only screen and (min-width: 800px) and (max-width: 1200px) {
	#page{width:800px;}
	#container{width:800px;}
	#header-container{width:800px;}
	#footerbar{width:800px;}
	#frontpage-image-overlap a{font-size: 1.5em;}
	#access .menu{max-width:480px;}
	#access{max-width:480px;}
	#access .menu li{width:45%;}


	#frontpage-image-overlap{height: 120px;}
	#frontpage-image-overlap a{font-size: 1em;}
	#frontpage-image1{ right: 238px;}
	#frontpage-image1 img{ margin-left: 200px; height: 120px; width: 600px; }
	#holdingcolorbox{width: 227px;}
	.colorbox1, .colorbox2, .colorbox5, .colorbox8, .colorbox11{height: 120px; }
	.colorbox2, .colorbox5, .colorbox6{left: 50px;}
	.colorbox4{left: 0px;}
	.colorbox6, .colorbox7, .colorbox9, .colorbox10{height: 60px; }
	.colorbox6{top: 60px; }
	.colorbox7{width: 50px;left:30px;}
	.colorbox9{left: 55px;}
	.colorbox10{width: 50px;}
	.colorbox11{width: 25px; left:93px;}
}

@media only screen and (min-width: 800px){
	#access-small {display: none !important;}
	#header-container{padding-right: 20px;	margin-left: -10px;}
}

@media only screen and (max-width: 800px){
	body{background-image: none !important;}
	ul{-webkit-padding-start: 20px;}
	#page{width:100%;}
	#container{width:90%;}
	#header-container{width:90%;}
	#footerbar{width:90%;}
	.footer-widget-area{display: block; margin: 20px 10px; width: 100% !important; border: none;}
	#primary{width:100%;}
	#side-widget-area{width:100%; margin-top: 20px;}
	.widget-widget-area{width:100% !important; left: 0; margin-top: 10px; display:block;}
	.empty-column{width: 0;}
	.post-item{width: 100%; }
	#frontpage-image-overlap{display: none;}
	#nav-container{width:100%; float: none; padding-top: 130px;}
	#access{display: none;}
	#logo-area{width:100%; height:150px; margin-left: 0;overflow: hidden;}
	#header{width: 70%;}
	#menuslider{	display: block;}
	#access{width:100%; display: none; text-align: left;}
	#access li{width:100%; margin-left: 10px;}
	#access .menu li{width: 100%;}
	#beneath-header-access ul {margin-left: -40px; -webkit-padding-start: 40px;}
	#beneath-header-access li {width: 46%; padding: 2% 1%; margin: 1%;}
	#search-form{float: none; text-align: center; border: 1px solid #f2f2f2; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
	#search-form input[type="text"]{font-size: 1.2em; padding: 10px 30px;}
	#search-form #searchsubmit{font-size: 1.2em; position: relative;}


}

@media only screen and (max-width: 560px){
	#frontpage-image-overlap{display: none; height: 60px;}
	#frontpage-image1{ right: 142px;}
	#frontpage-image1 img{ margin-left: 80px; height: 90px; width: 450px; }
	#holdingcolorbox{width: 120px;}
	.colorbox1, .colorbox2, .colorbox5, .colorbox8, .colorbox11{height: 60px; }
	.colorbox2, .colorbox5, .colorbox6{left: 20px;}
	.colorbox4{left: 0px;}
	.colorbox6, .colorbox7, .colorbox9, .colorbox10{height: 30px; }
	.colorbox6{top: 30px; }
	.colorbox7{width: 24px;left:15px;}
	.colorbox9{left: -2px;}
	.colorbox10{width: 50px;}
	.colorbox11{width: 12px; left:42px;}

}
/* Settings specific for WP labels */


.wp-caption{
	max-width: 100%;
}

.wp-caption.alignleft{
	float: left;
	margin-right:5px;
}

.wp-caption.alignright{
	float: right;
	margin-left:5px;
}

.wp-caption.aligncenter{
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text{
	font-style: italic;
	text-align: center;
	font-size: .95em;
	
}

blockquote{
	background-color: #309bbf;
	padding: 10px;
	font-size: 1.1em;
}


blockquote p{

	color: white;
}

img.avatar{
	padding: 0;
	margin: 0;
}

.nocomments{
	display: none;
}