/*
Theme Name: DML Hub 2015
Theme URI: http://dmlhub.net/
Description: Theme for DML Hub
Author: Anh Nguyen
Author URI: http://dmlhub.net/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
Text Domain: dmlhub
License:
License URI:
General comments (optional)
*/

/**********************************************************************************************************************
	*  DML Hub Site Wide Template & Template Part Bits
	********************************************************************************************************************/
body, #header { background: url('./images/bg-global.png') }
#outer-wrapper { background: url("./images/bg-top-circles.png") no-repeat scroll center 0 transparent; }

#header {
	-webkit-border-radius: 15px;
	-webkit-border-top-right-radius: 0;
	-moz-border-radius: 15px;
	-moz-border-radius-topright: 0;
	border-radius: 15px;
	border-top-right-radius: 0;
}
#header-banner img { height: 100px; }

.social-media-menu { clear: right; margin: 10px 0; }
.social-media-menu li { max-width: 48px; max-height: 48px; }
.social-media-menu li a { display: block; text-indent: -9999px; max-width: 48px; width: 48px; height: 48px; background-size: 48px 48px; }
.social-media-menu li a.spigot { background-image: url("./images/icons/spigot.png") }
.social-media-menu li a.youtube { background-image: url("./images/icons/youtube.png") }
.social-media-menu li a.facebook { background-image: url("./images/icons/fb.png") }
.social-media-menu li a.dmlcentral { background-image: url("./images/icons/dmlcentral.png") }
.social-media-menu li a.rss { background-image: url("./images/icons/rss.png") }
.social-media-menu li a.twitter { background-image: url("./images/icons/twitter.png") }
.social-media-menu li, .social-media-menu > li > a:hover { border: none !important; outline: 0 }

.navbar { margin-top: 20px; clear: right;}

.main-content {
	background: #ffffff url("./images/bg-corner.png") no-repeat right top scroll;
	padding-bottom: 25px;
	padding-top: 25px;
	-webkit-border-radius: 15px;
	-webkit-border-top-right-radius: 0;
	-moz-border-radius: 15px;
	-moz-border-radius-topright: 0;
	border-radius: 15px;
	border-top-right-radius: 0;
}

#right-column p { color: 	#666; }
#right-column a:hover { color: purple; text-decoration: none; }

#footer a { color: white; }

#footer {
	background: url("./images/bg-footer-circles.png") no-repeat scroll center 35px rgba(0, 0, 0, 0);
	clear: both;
	color: #FFFFFF;
	height: 175px;
	padding: 100px 0 0;
	position: relative;
}

#footer .inner {
	background: url("./images/bg-footer.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
	height: 175px;
	margin-bottom: -50px;
}

#footer .ribbon {
	background: url("./images/bg-ribbon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	height: 30px;
	margin: -10px auto auto auto;
	padding: 2px 50px 0 50px;
	width: 1040px;
}

#footer .ribbon li a { font-weight: bold }

/**********************************************************************************************************************
	*  Formatter, affect text and elements
	********************************************************************************************************************/
.title { margin: 0 0 10px 0; color: #656071 }
.title a { color: #656071 }
.title a:hover { color: #8C2882; text-decoration: none;}

.text-center img { margin: auto; }

img.shadow, .shadow img { box-shadow: 0 3px 6px #999999 }
img.border { border: solid 1px #666666 }

div.aligncenter { margin: 0 auto; }
div.alignright { margin: 0 0 0 auto; }

.border-left-line { border-left: solid 1px #666666 }
.border-right-line { border-right: solid 1px #666666 }
.border-bottom-line { border-bottom: solid 1px #666666 }

.purple, p.purple, #right-column p.purple { color: #c6258f }

.clearfix { clear: both }

div.aligncenter, img.aligncenter { margin: 0 auto; }
div.alignright {
	float: right;
	margin: 0 0 0 auto;
}

img.alignright {
	float: right;
	margin: 10px 0 10px 10px !important;
}

img.alignleft {
	float: left;
	margin: 10px 10px 10px 0 !important;
}


/**********************************************************************************************************************
	*  Home Page Specific
	********************************************************************************************************************/
#home-carousel { margin-bottom: 50px; }
#home-carousel .carousel-indicators { bottom: -40px;  }
#home-carousel img {
	margin: 0 auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#home-carousel .carousel-indicators li { border-color: dimgrey; }
#home-carousel .carousel-indicators li.active { background-color: dimgrey; }
#home-carousel .carousel-control { background-image: none; }

#wall a { color: black; }
#wall a:hover { color: purple; text-decoration: none; }
#wall iframe { border: solid 1px #666666}

.infinite-scroll-item {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #CCCCCC;
	color: #333333;
	padding: 20px 10px 10px 10px;
	margin: 10px 0.25% 10px 0.25%;
	float: left;
}

.infinite-scroll-item p {
	overflow:hidden;
	word-wrap:break-word;
}

.infinite-scroll-item img { margin-bottom: 10px; }

.infinite-scroll-item .flag {
	font-size: 13px;
	position: absolute;
	text-transform: uppercase;
	top: -22px;
	left: 0px;
	width: 80%;
	line-height: 24px;
	margin-top: 10px;
	padding-left: 5px;
	color: white;
	background: url("./images/sprite-flag.png") no-repeat scroll rgba(0, 0, 0, 0);
}

.infinite-scroll-item .flag.webinar { background-position: 0 -137px; }
.infinite-scroll-item .flag.post { background-position: 0 -68px; }
.infinite-scroll-item .flag.announcement { background-position: 0 -34px; }
.infinite-scroll-item .flag.video { background-position: 0 -102px; }
.infinite-scroll-item .flag.publication { background-position: 0 -206px; }
.infinite-scroll-item .flag.blog { background-position: 0 -68px; }

.infinite-scroll-item iframe { width: 100%; }
.infinite-scroll-item img { width: 100%; }

.tweet {
	float: left;
	height: 150px;
	background-color: white;
	padding: 0px 5px 0px 5px;
	margin: 10px 0.25% 10px 0.25%;
}

.tweet img { float: left; margin: 0px 10px 10px 0px; }
.tweet p a { color: blue }
.tweet p a:hover, .tweet p a:active, .tweet p a:visited { color: purple}

.tweet .flag {
	background: url('./images/bg-tweet-white.png') scroll;
	font-size: 13px;
	color: white;
	font-weight: bold;
	height: 30px;
	width: 100px;
	position: relative;
	top: -15px;
	left: -5px;
}

/**********************************************************************************************************************
	*  DML Conferences
	*******************************************************************************************************************/
#conference-banner { background-color: #B6EFF0; }
#conference-banner a { color: darkblue }
#past-conferences { color: white; background-color: #C9398E; }
#past-conferences a { color: white }
#conference-videos { background-color: #E6E5E8; padding: 20px; }

#conference-videos .video { height: 250px;}

/**********************************************************************************************************************
	*  Profiles
	*******************************************************************************************************************/
#archive-people .person, .person { height: 125px; margin-bottom: 10px }

.purple-bg { background-color: #C6258F; border-radius: 5px; }
.purple-bg a { color: white }
.purple-bg a:hover { color: purple }

/**********************************************************************************************************************
	*  Publication
	*******************************************************************************************************************/
#archive-publications .publication { margin-top: 10px; }
a.ebook { width: 40px; height: 40px; float: left; margin-right: 5px; }
a.ebook img { width: 40px; height: 40px }

/**********************************************************************************************************************
	*  Archives & Indexes
	*******************************************************************************************************************/
#archive-presentations .presentation:nth-child(2n),
#expertise-directory .expert:nth-child(2n)
{ background-color: #E6E5E8 }

#archive-presentations { background-color: white; min-height: 500px; margin-top: 50px;}
#archive-presentations .presentation { display: block; background-color: white; }

#archive-in_the_news .in-the-news,
#archive-media_releases .media-release,
#archive-announcements .announcement,
#archive-interviews .interview,
#archive-people .person { margin: 10px auto; }

#archive-initiatives .initiative { height: 400px }
#archive-initiatives .initiative img { height: 200px }
#archive-initiatives .initiative .image { height: 200px }

#expertise-directory .expert { padding: 10px; }
#expertise-directory .expert div { vertical-align: middle }
#expertise-directory .expert img { margin: 0px; }

/**********************************************************************************************************************
	*  Responsive CSS
	*******************************************************************************************************************/
@media (max-width: 480px){
	#wall { margin: 0 2% }
	.infinite-scroll-item { width: 98% }
}

@media (min-width: 481px) and (max-width: 768px)
{
	.infinite-scroll-item { width: 49%; }
	#conference-banner, #past-conferences { padding: 10px;  }
}

@media (max-width: 768px)
{
	.navbar-brand img { height: 25px; }
	.main-content { margin: 0 10px; }
	#archive-people .person { height: 150px }
    .social-media-menu li a { margin: 0; }
    .navbar { margin-top: 0; }
}

@media (min-width: 768px)
{
	#header { padding-top: 10px; }
	.navbar { margin-top: 0; margin-bottom: 5px; }
	#right-column { padding: 40px 60px; }
    #right-column img { margin: 0 20px 20px 0; }
	#archive-presentations .presentation { padding: 20px 40px }
    .big-padding { padding: 40px 60px }
	#conference-banner, #past-conferences { padding: 10px; }
    .infinite-scroll-item { width: 32%; }
    #main-nav { margin-top: 5px; }
	#archive-people .person { height: 110px }
}

@media (min-width: 768px) and (max-width: 992px) {
	.social-media-menu li a { margin-top: 15px; }
	.social-media-menu li { padding: 0; }
}

@media (min-width: 992px)
{
	#conference-banner { float: left; margin-left: -10px; height: 250px }
	#past-conferences { float: right; margin-right: -10px; height: 250px }
    .infinite-scroll-item { width: 24%;}
    #main-nav .navbar-collapse { padding-left: 0; padding-right: 0; }
	#main-nav .navbar-default { background: none; border: none; box-shadow: none; }
    .main-content { padding-bottom: 50px; min-height: 600px; }
}

@media (min-width: 1200px)
{
	.infinite-scroll-item { width: 16%;}
	#home-carousel { margin-top: 50px}
	#wall { margin: 0 2.5%; }
	#main-nav .container-fluid { padding-right: 0; padding-left: 0 }
    #main-nav input[type="text"] { width: 225px }
}

@media (min-width: 1600px)
{
	#wall { margin: 0 10%; }
}