/*

Color codes:
Dark Dark Blue, #082c3f
Dark Blue, #093e5e
Light Blue, #a7d4ed
*/

.bar.top {
	background: #082c3f;
}

.bar.middle {
	background: #093e5e;
}

.bar.bottom {
	background: #a7d4ed;
}

.branding {
	float: left;
	width: 75px;
}

.search-form-wrapper {
	float: left;
	width: 600px;
}

.context-menu-cqplus {
	float: right;
	width: 150px;
}

.search-form {
	padding: 10px 0;
}

.search-form .search-input {
	width: 50%;
	height: auto;
	margin: 0
}

.context-menu .trending-topics-nav {
	float: left;
	display: inline-block; 
	margin-top: 0;
	padding: 5px 0;
	font-size: 12px; 
}

.context-menu .trending-topics-nav li:first-child::before { 
	content: "Trending >  ";
	display: inline-block; 
	color: #1b3f59;
	font-weight: bold;
}

.context-menu .trending-topics-nav li {
	display: inline-block;
	margin-right: 10px;
}

.context-menu .trending-topics-nav li:last-child {
	margin-right: 0;
}

.context-menu .trending-topics-nav li a {
	color: #1b3f59
}


@media only screen and (max-width: 939px) {
	.branding {
		width: 55px;
	}

	#wicketDebugLink {
	display: none
	}
}



/* ============================================== */
/* General Header CSS
/* ============================================== */

.bar.top, .bar.middle, .bar.bottom {padding: 0 15px}

.top-bar {background: #093e5e}

/* ============================================== */
/* Search bar
/* ============================================== */

input.search-input.component-simplesearchbox {
	float: left;
	display: inline-block;
    border: none;
	background: #f9f9f9;
    border-radius: 0;
    color: #333;
    font-size: 14px;
    height: 28px;
    margin: 0;
    outline: none;
    text-indent: 10px;
    padding: 0;
    width: 300px;
    vertical-align: miiddle;}

header .search-button {
	float: left;
	display: inline-block;
	background: #59a0c7 url("search-bar-icon.png") no-repeat scroll center center;
	box-shadow: none;
    border: none;
    border-radius: 0;
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
    font-size: 0;
    margin: 0;
    height: 28px;
    width: 50px;
    vertical-align: miiddle;}
    
header .search-button:hover{background: #59a0c7 url("search-bar-icon.png") no-repeat scroll center center;}

header a.search-advanced, header a.search-advanced:visited {
	float: left;
	display: inline-block;
	margin: 7px 0 0 10px;
	color: #fff !important;
	font-size: 12px;
	font-weight: bold;}
	
.suggest-panel{margin-top: -3px;}

/* ============================================== */
/* switch to button
/* ============================================== */
	
button.switch-to-btn{
	float: right;
    display: inline-block;
    width: auto;
    background: #c7451b;
    border-radius: 15px;
    padding: 7px 15px;
    margin: 11px 10px;
    font-size:12px;
    box-shadow: 0 0px 0 rgba(255, 255, 255, 0.5) inset;
    border: 1px solid transparent;
    font-weight:bold;
    font-weight:500;
    }

button.switch-to-btn a{
	font-weight:500;
	color:#fff;}
	
button.switch-to-btn:hover{
	background: #ee6235;
	transition: all 0.2s ease 0s;}
	
button.switch-to-btn img {margin-left:3px;}

/* ============================================== */
/* Media Queries
/* ============================================== */

@media only screen and (max-width: 768px) {
	.search-form-wrapper {
		width: 250px;
	}
	
	input.search-input.component-simplesearchbox {
		width: 200px;
	}
	
	.cqplus-jumpto-wrapper {
		display: none;
	}
	
	header a.search-advanced {
		display: none;
	}
}

/* iPad Landscape and Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.search-form-wrapper {
		width: 500px;
	}
	
	input.search-input.component-simplesearchbox {
		width: 250px;
	}

	a.search-advanced {
		font-size: 11px;
	}
}


/* iPad Portrait breakpoint for displaying hamburger*/
@media only screen and (max-width: 939px) {
	.bar.middle {
	  padding: 0;
	}
}

	
@media all and (max-width: 496px) {input.search-input.component-simplesearchbox{ width: 100px;} }

@media all and (max-width: 485px) {
	.search-form-wrapper {width: auto;}
	input.search-input.component-simplesearchbox {width: 150px;}  
	}


@media all and (max-width: 435px) { 
	.switch-to-text{font-size:10px;} 
	
	button.switch-to-btn{
	padding: 3px 10px;
	margin: 13px 0px;}
	}