/**
 * Title: efocus social media - default.css
 * @author lee.boonstra[AT]efocus.nl
 */


/*************************** Default Layout Styles */

* { 
	margin: 0; 
	padding: 0; 
}

body { 
	background: #e9eceb;
	color: #808080;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 100%;
}

div.pagewrapper {
	font-size: 0.688em;
	line-height: 1.545em;
	margin: 0 auto;
	width: 906px;
}

div.container {
	margin: 12px 0;
	overflow: hidden;
}

div.left_col .inner {
	background: url(/img/socialmedia/bg-content-left.png) repeat-y 0 top;
	overflow: hidden;
	padding: 0 15px;
}

div.right_col .inner {
	background: url(/img/socialmedia/bg-content-right.png) repeat-y 0 top;
	overflow: hidden;
	padding: 0 15px;
}

div.header div.inner,
div.footer div.inner {
	background: url(/img/socialmedia/bg-content.png) repeat-y 0 top;
	overflow: hidden;
	padding: 0 15px;
}

div.header, div.footer {
	background: url(/img/socialmedia/bg-top-rounding.png) no-repeat left top;
	clear: both;
	overflow: hidden;
	padding: 15px 0 0 0;
	width: 906px;
}

div.left_col {
	float: left;
	width: 413px; /* 405 */
}

div.center_col {
	float: left; 
	width: 177px; /* 185 */
}

div.right_col {
	float: left;
	width: 316px;
}

div.blog,
div.slideshare,
div.news,
div.twitter,
div.delicious,
div.linkedin {
	margin: 0 0 12px 0;
	overflow: hidden;
	padding: 15px 0 0 0;
}

div.blog,
div.slideshare,
div.news {
	background: url(/img/socialmedia/bg-top-rounding-left.png) no-repeat left top;
}

div.twitter,
div.delicious,
div.linkedin {
	background: url(/img/socialmedia/bg-top-rounding-right.png) no-repeat left top;
}

div.blog div.bottom,
div.slideshare div.bottom,
div.news div.bottom {
	background: url(/img/socialmedia/bg-bottom-rounding-left.png) no-repeat left bottom;
}

div.twitter div.bottom,
div.delicious div.bottom,
div.linkedin div.bottom {
	background: url(/img/socialmedia/bg-bottom-rounding-right.png) no-repeat left bottom;
}

div.header div.bottom, 
div.footer div.bottom {
	background: url(/img/socialmedia/bg-bottom-rounding.png) no-repeat left bottom;
}

div.bottom {
	height: 15px;
	overflow: hidden;
}

div.flickr,
div.youtube {
	margin: 15px 11px;
	overflow: hidden;
}

/*************************** Default styles */

h1, h2, p {
	margin: 0 0 10px 0;
}

h1, h3, h4, h5, h6 {
	color: #181847;
	font-size: 1.455em;
	font-weight: bold;
}

h2 {
	color: #181847;
	font-size: 1.273em;	
}

h3 {
	font-size: 1em;		
}

strong { 
	color: #181847
}

img {
	border: 0;	
}

hr {
	margin: 2em 0 2em 0;
	height: 1px;
	overflow: hidden;
	border: 0;
	border-bottom: 1px solid #ccc;
}

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

a:hover {
	text-decoration: underline;
	color: #e94112;
}

a.link {
	float: right;
	font-size: 0.818em;
	margin-top: 2px;
}

ul,
ol {
	margin: 0 0 1em;
	padding: 0 0 0 15px;
}

ul li {
	padding-left: 5px;
}

ol {
	padding-left: 20px;
}

.clear {
	clear: both !important;
	height: 0 !important;
	float: none !important;
	overflow: hidden !important;
}

.hidden {
	display: none;
}

.center { 
	text-align: center; 
}

.left { 
	float: left; 
}

.right { 
	float: right; 
}

/*************************** Functionalities */
div.news h2 a,
div.twitter h2 a {
	color: #181847;
}

div.news h2 a img,
div.twitter h2 a img {
	vertical-align: -3px;
	padding-right: 5px;
	background: #ffffff;
}

/******* Carrousel navigation ***/
ul.carrousel_nav {
	padding: 0;
	margin: 5px 0;
	position: relative;
	display: inline-block;
	width: 100%;
	height: 16px;
}

ul.carrousel_nav li {
	list-style: none;
	padding: 0;
}

ul.carrousel_nav li a {
	background: url(../../img/socialmedia/btn_carrousel.png) no-repeat;
	height: 16px;
	width: 16px;
	overflow: hidden;
	display: inline-block;
	text-indent: -99999px;
	position: absolute;
	top: 0;
}

ul.carrousel_nav li a.prev {
	background-position: left -16px;
	left: 0;
}

ul.carrousel_nav li a.next {
	background-position: left 0;
	right: 0;
}

ul.carrousel_nav li a.inactive {
	display: none;
}

/*************************** F1: Header */
div.header a.logo {
      background: url(../../img/socialmedia/logo.png) no-repeat left top;
      width: 179px;
      height: 46px;
      display: block;
      float: left;
      margin: 3px 20px 0 0;
}

div.header div.headercontent {
      float: left;
      width: 662px;
}

div.header div.headercontent h2 {
      margin-bottom: 0;
}

div.header div.headercontent p {
      font-size: 0.909em;
      line-height: 1.4em;
      margin-bottom: 0;
}


/*************************** F2: Tweets overview */
div.twitter h2 {
	padding: 0 0 5px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid #cccccc;
}

div.twitter img.twitterimg {
	position: absolute;
	left: 0;
	top: 4px;
	width: 32px;
	height: 32px;
}

div.twitter div.twittercontent {
	display: inline-block;
	position: relative;
	padding: 0 0 5px 37px;
	margin-bottom: 5px;
	border-bottom: 1px solid #cccccc;
	color: #808080;
}

div.twitter div.twittercontent a {
	color: #808080;
	display: inline-block;
}

div.twitter div.twitterinfo {
	color: #181847;
	font-size: 0.818em;
}

div.twitter div.twitterinfo a {
	color: #181847;
}

div.twitter p {
	margin: 0;
	float: left;
}

/*************************** F3: Blog */
div.blog h2 {
	background: url(../../img/socialmedia/icon_blogosphere.png) no-repeat left top;
	height: 16px;
	padding: 0 0 5px 20px;
	margin-bottom: 0;
	border-bottom: 1px solid #cccccc;
}

div.blog ul.blogitems {
	padding: 0;
	margin: 0 0 5px 0;
}

div.blog ul.blogitems > li {
	display: inline-block;
	width: 383px;
	position: relative;
}

div.blog ul.blogitems > li h3 {
	display: inline-block;
	line-height: 1em;
	font-weight: normal;
}

div.blog ul.blogitems > li h3 a {
	display: inline-block;
	color: #808080;
}

div.blog ul.blogitems > li h3 a:hover {
	text-decoration: underline;
}

div.blog ul.blogitems > li span.indicator {
	background: url(../../img/socialmedia/btn_blogaccordion.png) no-repeat right top;
	height: 16px;
	width: 16px;
	display: inline-block;
	cursor: pointer;
	position: absolute;
	top: 7px;
	right: 0;
}

div.blog ul.blogitems > li.open span.indicator {
	background-position: right bottom;
}

div.blog ul.blogitems > li h4 {
	color: #181847;
	font-size: 0.818em;
	font-weight: normal;
	line-height: 1.545em;
}

div.blog ul.blogitems > li span {
	margin-right: 5px;
}

div.blog ul.blogitems div.blogpost {

	width: 100%;
}

div.blog ul.blogitems div.blogpost div.innerblock {
	display: inline-block;
	margin: 10px 0;
}

/*************************** F4: Flickr */

div.flickr div.flickrcontent a {
	display: block;
	float: left;
}

div.flickr a.link {
	margin: 3px 0;
}

div.flickr img {
	height: 75px;
	width: 75px;
}

div.flickr a.flickrPic {
	margin: 0 5px 0 0;
}

div.flickr h2 {
	background: url(../../img/socialmedia/icon_flickr.png) no-repeat left 0;
	height: 16px;
	padding-left: 20px;
	display: inline-block;
	float: left;
}

div.flickrcontent {
	display: inline-block;
	clear: both;
	margin-top: 5px;
}

/*************************** F5: Youtube */
div.youtube h2 {
	background: url(../../img/socialmedia/icon_youtube.png) no-repeat left 0;
	height: 16px;
	padding-left: 20px;
	display: inline-block;
	float: left;
}

div.youtube div.carrousel_viewport_youtube {
	overflow: hidden;
	position: relative;
	width: 154px; 
	height: 116px;
}

div.youtube ul.carrousel_slides_youtube {
	width: 1400px;
	margin: 0;
	padding: 0;
}

div.youtube ul.carrousel_slides_youtube li {
	float: left;
	list-style: none;
	width: 154px; 
	height: 116px;
	padding: 0;
	position: relative;
}

div.youtube a.youtubeMovie span {
	background: url(../../img/socialmedia/btn_youtube_play.png) no-repeat 0 0;
	position: absolute;
	left: 40px;
	top: 30px;
	z-index: 999;
	width: 72px;
	height: 55px;
}

div.youtube a.youtubeMovie img {
	width: 155px;
	position: relative;
	z-index: 99;
}

/*************************** F6: Delicious */
/*************************** F9: Newsfeed */
div.delicious h2 {
	background: url(../../img/socialmedia/icon_delicious.png) no-repeat left 0;
	height: 16px;
	padding: 0 0 5px 20px;
	margin: 0;
}

div.news h2 {
	padding: 0 0 5px 0;
	margin: 0;
}

div.delicious ul,
div.news ul {
	padding: 0;
	margin: 0 0 5px 0;
	border-top: 1px solid #cccccc;
}

div.delicious ul li,
div.news ul li,
div.blog ul.blogitems > li {
	list-style: none;
	padding: 7px 0;
	border-bottom: 1px solid #cccccc;
}

div.news ul li {
	color: #181847;
	font-size: 0.818em;
	line-height: 1.545em;
}

div.delicious ul li a {
	color: #181847;
}

div.news ul li a {
	color: #808080;
	font-size: 11px;
}

/*************************** F7: Slideshare */
div.slideshare {
	position: relative;
}

div.slideshare h2 {
	background: url(../../img/socialmedia/icon_slideshare.png) no-repeat left 0;
	height: 16px;
	padding-left: 20px;
}

div.slideshare div.carrousel_viewport {
	overflow: hidden;
	position: relative;
	width: 375px;
	height: 96px;
}

div.slideshare ul.carrousel_slides {
	width: 1400px;
	margin: 0;
	padding: 0;
}

div.slideshare ul.carrousel_slides li {
	float: left;
	list-style: none;
	width: 127px; 
	height: 96px;
	padding: 0;
}

div.slideshare ul.carrousel_slides li a img {
	border-top: 3px solid #cccccc;
	border-bottom: 3px solid #cccccc;
}

/*************************** F8: Linkedin */
div.linkedin h2 {
	background: url(../../img/socialmedia/icon_linkedin.png) no-repeat left 0;
	height: 16px;
	padding-left: 20px;
}

/*************************** Footer */

div.footer p,
div.footer a {
    font-size: 0.909em;
    line-height: 1.4em;
    margin-bottom: 0;
	text-align: center;
}