src/scss/content/_global.scss
/* Global Fonts & Colours */
body, select, input, textarea, button { font-size: 0.9em; }
body { color: #444; background: #fff; }
	body.texture, body.texture-nohighlight, body.texture-ducksymbol { background: #f2f2f2; }
body, h2, h3, h4, h5, h6, select, input, textarea, button, .sans, .feedback-title, .thread-title h1, .idea-title h1, .content h1  { 
	font-family: "Helvetica Neue","HelveticaNeueLT Std","Segoe UI","Nimbus Sans L","Liberation Sans","Open Sans",FreeSans,Helvetica,Arial,sans-serif; 
}
.topmsg { font-family: 'Arial Black', sans-serif;} 

body.texture:before, body.texture:after, body.texture-ducksymbol:before {
	display: block; 
	position: absolute; 
	width: 100%; 
	content: ""; 	
	height: 100%;
	z-index: -2;
	left: 0; 	
}
body.texture:before  {
	bottom: 200px;	
	background-image: -moz-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
	background-image: -webkit-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
	background-image: -o-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
	background-image: -ms-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
	background-image: radial-gradient(20% 20%, ellipse contain, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
}
body.texture:after {
	right: 0;
	top: 0;
	bottom: 0;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

.ducksymbol, body.texture-ducksymbol:before {
	/* The hero that DukGo deserves... but not the one it needs right now. */
	background: url('../img/ducksymbol-spotlight.png') 100% 0 no-repeat;
}

body.texture-ducksymbol:before {
	top: 25px;
}

a, .fakelink { color: #3363b3; text-decoration: none; }
/*	a:hover { color: #3e77d5; }
	a:visited { color: #6933b3; }
*/

/* 
	Global Elements 
*/

#wrapper { width: 100%; overflow: hidden; position: relative; }

h1, h2, h3, h4, h5, h6 {	
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	position: relative;
	display: block;
	font-weight: normal;
	line-height: 1;
}

h1, .headfont { 
	font-family: "Proxima Nova",ProximaNova,'familiar_probold',Segoe,Segoe UI,Frutiger,"Frutiger Linotype","Myriad Pro",Myriad,Univers,Tahoma,"Gill Sans","Gill Sans MT","DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;	
	font-weight: bold;
}

h1, .h1 { font-size:36px; color: #48505b; letter-spacing: -0.025em; text-align: center; }
h2 , .h2{ font-size:24px; }
h3 , .h3{ font-size:20px; } 
h4, .h4 { font-size:18px; }
h5, .h5 { font-size:16px; }
h6, .h6 { font-size:14px; font-weight: normal; }

h1, h2, h3, h4, h5, h6 { margin: 0 auto 10px; }
h1 { margin: 30px auto 40px; }	
p, ul { margin: 0 auto 18px; }
img { max-width: 100%; }

hr { border: none; background: #e8e8e8; display: block; height: 1px; margin: 18px auto; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; }

pre, tt, code {
	font-family: Consolas, ‘Andale Mono WT’, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, Monaco, ‘Courier New’, monospace;
}

pre, tt { 
	color: #fafafa;
	background: #333;
	-webkit-border-radius: 4px;
    border-radius: 4px;
	background-clip: padding-box;
	-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 0 #000;
}
tt { padding: 0 3px 1px; }
pre {	
	display: block;
	max-width: 100%;
	position: relative;
    margin: 0 0 18px 0; 
	overflow: auto;	
	padding: 11px;		    
	-moz-tab-size: 1;
	-o-tab-size: 1;
	tab-size: 1;
	-ms-word-break: normal;
	word-break: normal;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: pre-wrap;
	
	word-wrap: normal;
}

pre code {
	background: none;
	white-space: pre;
	overflow: hidden;
}

.duckduckhack-docs pre {
	padding: 0;
}

.duckduckhack-docs pre code {
	font-size: 12px;
}

.duckduckhack-docs p > code {
	background: #e1e1e1;
    padding: 2px 3px;
    border-radius: 2px;
}

/* For syntax highlighting in code blocks */
code > .synComment { color: lightblue; }
code > .synConstant { color: lightgreen; }
code > .synIdentifier { color: aqua; }
code > .synStatement { color: yellow; }
code > .synPreProc { color: #f8f; }
code > .synType { color: lime; }
code > .synSpecial { color: #f8f;  }
code > .synUnderlined { color: #f8f; text-decoration: underline; }
code > .synError { background-color: red; color: white; font-weight: bold; }
code > .synTodo { background-color: yellow; color: black; }
code > .Linenum { color: yellow; }

blockquote { padding: 0 0 0 28px; position: relative; }	
	blockquote p { color: #828487; position: relative; z-index: 1;}
	blockquote:before { 
		font-family:Georgia, serif; 
		content: "\201C"; 
		font-size:14em; 
		line-height: 1;
		margin-top:0; 		
		float:left; 
		color: #666; 
		opacity: 0.1; 
		position: absolute;
		top: -30px;
		left: 0;
		z-index: 0;
	}
		.lt-ie9 blockquote:before { color: #f2f2f2; }

/* 	
	Semantic Helper Classes 
*/

.left { float: left; }
.right { float: right; }
.mid, .intro-message { text-align: center; }
.no-js .no-js-hide, .js .js-hide { display: none !important; }
.header-pad { padding: 18px 0; }

.text-light { color: #e9e9e9; }
.text-enormous { font-size: 12em; }

.row--floated {
    /* a row that needs to play nice with a neighboring float */
    display: table-cell;
    width: 10000px;
}

.banner-list li {
	display: inline-block;
}

a.fill {
	display: block;
	height: 100%;
}


/* grid spacing classes */
.gw, .grid-wrap { margin-left: -18px; }
	.g, .grid { padding-left: 18px; }
	
	.gw--sm, .gw--10 { margin-left: -10px; }
		.gw--sm > .g, .gw--10 > .g { padding-left: 10px; }

.sortby {
	display: block;
	position: relative;
	color: inherit;
}
	.sortby:after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -2px;
		border: 5px solid transparent;		
		border-bottom-color: transparent;
	}
		.sortby:hover:after { border-top-color: #444; }
/*
    special note: .content-wrap is removed in the single IA Page (e.g. duck.co/ia/view/airlines) and Dev Pipeline (duck.co/ia/dev/pipeline).
    see the following files: src/ia/js/IAPage.js and src/ia/js/IADevPipeline.js
*/
.content-wrap {
	width: 100%;
	min-width: 600px;
	max-width: 960px;
	margin: auto;	
	position: relative;
}

/* 
	nav stylin' 
*/	
.nav {
	/* navs are usually 'ul's, so we're going to reset them sum-bitches */
	margin: 0;
	list-style: none;
	/* and that's pretty much all we need for now */
}
		.nav-item { display: block; }
		.nav-item__link, .nav-item__title { 
			display: block; 
			cursor: pointer; 
		}
	
.nav--panels {
	/* ok now we know what kind of nav this is, so we're going to go ahead and style it */
	background-color: #f5f5f5;
	border: 1px solid #d7d7d7;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 10px;
}
	.nav--panels .nav-item { 
		border-top: 1px solid #d7d7d7; 	
		min-height: 2.9em;
		overflow: hidden; 
	}
		.nav--panels .nav-item:first-child { border-top: none; }
		
	.nav--panels .nav-item:first-child .nav-item__title   {		
		-webkit-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}
	.nav--panels .nav-item:last-child  .nav-item__title  {
		-webkit-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
	}
	.nav-item__title {
		color: inherit; 
		font-weight: bold; 
		padding: 0.7em 1.25em;
		line-height: 1.75;
		background-color: #fff;
		position: relative;
		border-bottom: 1px solid #d7d7d7;
		margin-bottom: -1px;
	}
		.nav-item__link:hover { 
			background-color: #fcfcfc;  			
		}
			.nav-item__link:active { background-color: #f7f7f7; }
		.nav-item--active .nav-item__title { 			
			color: #fff;
			background-color: #6b7b94; 			
			text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
		}
			.nav-item--active .nav-item__title:active { background-color: #277adb; }
		
	.nav--sub {		
		overflow: hidden;
	}
		.sub-item:first-child {
			padding-top: 0.75em;
		}
		.sub-item:last-child {
			padding-bottom: 0.75em;
		}
		.sub-item__title {
			display: block;
			padding: 0.5em 1.5em; 
		}
		
		.sub-item--active {
			font-weight: bold; 
		}
			.sub-item--active .sub-item__title, 
			.sub-item__link:hover {
				background-color: #efefef;
				color: inherit;
				box-shadow: inset 0 1px 1px #ddd;
			}
		
		/* 
		 * this animation could work one of two ways.  
		 * either it's slow to open, or it's slow to close.
		 * Max-height makes it slow to close, margin-top makes it slow to open.  
		 * I've combined the two and now it's pretty snappy!
		 */		
		.nav--sub.is-open {			
			margin-top: 0;
			max-height: 1000px;				
			-webkit-transition: max-height 1s ease-in-out, margin-top 0.5s ease-in-out; 
			-moz-transition: max-height 1s ease-in-out, margin-top 0.5s ease-in-out; 
			-o-transition: max-height 1s ease-in-out, margin-top 0.5s ease-in-out; 
			transition: max-height 1s ease-in-out, margin-top 0.5s ease-in-out; 			
		}
		.nav--sub.is-closed {				
			max-height: 0px;	
			margin-top: -1000%;
			-webkit-transition: margin-top 1s ease-in-out, max-height 0.5s ease-in-out; 
			-moz-transition: margin-top 1s ease-in-out, max-height 0.5s ease-in-out; 
			-o-transition: margin-top 1s ease-in-out, max-height 0.5s ease-in-out; 
			transition: margin-top 1s ease-in-out, max-height 0.5s ease-in-out; 	
		}
			.lt-ie8 .nav--sub.is-open { display: block; }
			.lt-ie8 .nav--sub.is-closed { display: none; }		
		
/* clearfix */
.group:after, .wrap:after, .breadcrumb-nav:after, .content-box .head:after, .comment_reply:after,
.row:after, .one-field:after, .author-info:after, .comment-foot:after, .nav:after, .nav-item:after, .forum-item:after, .account-actions:after  {
  content: "";
  display: table;
  clear: both;
}

/* 
	Header
*/
.site-header { 
	position: relative;
	overflow: initial;
	min-height: 65px;
	width: 100%;
	box-shadow: 0 1px 0 rgba(0,0,0,0.15);
	z-index: 3;
}
.site-header {
	border-top: 4px $blue-light solid;
	background: white;	
}
	.lt-ie9 .site-header { background: #e2e2e2;}
	.site-header .content-wrap { 
	    overflow: initial;
	}
	.header-logo { float: left; }
		.header-logo__logo { 
			width: 46px;
			height: 46px; 
			padding: 13px 19px 0 0;
			float: left;			
		}
        .header-logo__text {
            overflow: hidden;
        }
		.header-logo h2, .header-logo h3 { 
			line-height: 1.25; 
			margin: 0; 
			text-align: left; 
			position: relative; 
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;			
		}
		.header-logo h2 { color: #4c4c4c; font-weight: bold; font-size: 21px; padding-top: 8px; left: -1px; }
			.header-logo h2 i { font-style: normal; color: #48af04; }
		.header-logo h3 { color: #a2a2a2; font-weight: normal; padding-top: 0; font-size: 12px; }
	
		.header-account-info {
			padding-top: 17px; 
			line-height: 1;
			float: right;
			padding-left: 22px;
			position: relative;
		}
			.header-account-info .user-notifications {
				position: absolute;
				top: 11px; left: 22px;
			}
			.user-notifications {
				position: relative;
				overflow: hidden;
			}
				.user-notifications__num {
					display: block;
					position: relative;
					font-weight: bold;
					background: #CB2202;
					color: #fff;
					text-align: center;
					z-index: 5;
				
				    -moz-animation-name: dropNotice;
					-moz-animation-iteration-count: once;
					-moz-animation-timing-function: ease-in;
					-moz-animation-duration: 0.5s;

					-webkit-animation-name: dropNotice;
					-webkit-animation-iteration-count: once;
					-webkit-animation-timing-function: ease-in;
					-webkit-animation-duration: 0.5s;
				}
				/* animate notification numbers... because it's fun! */
				@-moz-keyframes dropNotice {
					0% {
						top: -40px;
					}
					100% {
						top: 0;
					}
				}
				@-webkit-keyframes dropNotice {
					0% {
						top: -40px;
					}
					100% {
						top: 0;
					}
				}
				
			
			.user-avatar, .user-notifications, .user-notifications__num {
				-webkit-border-radius: 3px;
				border-radius: 3px;
				
			}
			.user-avatar {				
				float: left; 
				position: relative;
				line-height: 36px;
				text-align: center;
				color: #64656a;				
			}
				.user-avatar img { 
					position: absolute; 
					top: -1px;
					left: -1px;
					border: 1px solid #fff;
					-webkit-border-radius: 3px;
					border-radius: 50%;
					z-index: 2;
				}
			
			.header-account-info .user-notifications {				
				width: 33px; height: 33px; line-height: 33px;
			}
			.header-account-info .user-avatar {
				margin: 0 11px 0 0;		
				width: 31px;
				height: 31px;
				line-height: 36px;
				font-size: 140%;
			}		
			.header-account-info .user-name { 
				color: #606060; 
				padding: 2px 0; 
				display: block; 
				float: left;
				height: 1em;
				overflow: hidden;				
				white-space: nowrap;
				word-wrap: break-word;
				text-overflow: ellipsis;
				padding-top: 9px;
				cursor: pointer;

				a {
				    color: #111;
				    font-weight: 500;
				}

				a:hover, a:active {
				    color: #60a5da;
				}
			}

			.header-account-info .account-links {  }
			.header-account-info .account-links { display: block; text-shadow: 0 1px 0 #fff; padding-top: 6px; }
			.header-account-info .account-links a { 
				border-left: 1px solid #c1c1c1; 
				padding: 0 10px; 
				font-size: 12px;
				display: block;
				float: left;
				color: #111;
				font-weight: 500;
			}	
				.header-account-info .account-links a:hover { color: #60a5da; }
				.header-account-info .account-links a.first { border-left: none; padding-left: 0; }
	
		.header-login { 
			float: right; 
		}			
			.account-actions { 
			    padding-top: 22px;
                display: inline-block; 
                white-space: nowrap;
                word-wrap: break-word; 
            }			
			.account-actions a {
			    color: #111;
			    font-weight: 500;
			    text-transform: capitalize;
			    padding: 0 0 9px 22px; 
			}

			.account-actions a:hover {
			    color: $blue-light;
			}

			.page-signup .header-login .nav-signup { 
			    display: none;
			    padding: 0 22px 9px;
			}
				.page-signup .header-login .nav-login { 
					-webkit-border-radius: 5px;
					border-radius: 5px;
				}
	
	.header-notice {
		overflow: hidden;
		margin-top: 7px;
	}
		.header-notice .notice {
			margin-bottom: 0;
		}
	
	
	.header-nav { float: left; text-align: center; }
		.header-nav ul { 
			list-style: none; 
			float: left;
			margin: 0; 
			padding: 0;			
			/*
			border-left: 1px solid #d5d5d5;
			border-right: 1px solid #f3f3f3;		
			*/
			}
		.header-nav li { 
			display: inline-block; 
			list-style: none; 
			padding: 0; 
			margin: 0 0 0 -1px;
			float: left;
		}
		.header-nav a { 
			display: block; 
			color: #111;
			font-weight: 500;
			padding: 26px 15px 21px; 
			line-height: 1; 
		}
			
		.header-nav .active a, .header-nav a:hover, .header-nav ul li:first-child a:hover, .page-home li.nav-home a, .page-blog li.nav-blog a, .page-translate li.nav-translate a, .page-develop li.nav-develop a, .page-forums li.nav-forums a, .page-help li.nav-help a  { 
			color: $blue-light; 
		}
			.page-home .header-nav ul { border-left-color: #c3c3c3; }
			
/* 
	Site Content
*/

.site-main { min-width: 85%; margin-bottom: 5em; position: relative; overflow: hidden; padding: 15px 0; }		
	.intro-message { max-width: 95%; line-height: 1.38; margin: -30px auto 40px; }
	h1 + .intro, .intro--mg { margin-top: -20px; }
		.page-home .intro-message { max-width: 85%; }		
	.disclaimer{ padding: 0 17px; margin: 28px auto; }
		.disclaimer h6, .disclaimer p{ font-size: 0.8em; line-height: 1.52; margin: 0; }

.breadcrumb-nav { padding-bottom: 10px; min-height: 26px;}	
	.breadcrumb-nav + h1, .breadcrumb-right + h1 { margin-top: 0; }
	.breadcrumbs { float: left; font-size: 0.9em; }
	.breadcrumbs a { border-bottom: 1px solid #3262b4; }
		.breadcrumbs a:hover { border-bottom-color: transparent; }
	.language_nav { float: right; margin-top: -5px; }
		.language_nav .button { float: right; padding: 4px; margin-left:4px; font-weight: normal; }
		.language_nav .select2-container, .language_nav select { height: 29px; }
		.language_nav .select2-container { font-size: 0.9em; min-width: 200px; }
		.language_nav .select2-default span { color: #3364b3; font-weight: bold; }

.breadcrumb-right {
	float: right;
	padding-bottom: 10px;
	margin-top: -42px;
}

.content-box {
	position: relative;
	margin: 0 auto 18px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;		
}
	.content-box-toggleclick .head{ cursor: pointer; }
	.content-box .head, .content-box__head { 
		background: #ffde85;
		color: #484438;
		border: 1px solid #d8be74;
		padding: 9px 8px 9px;
		-webkit-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
		-webkit-background-clip: padding-box; 
		background-clip: padding-box;
		margin-bottom: -1px;
		position: relative;
	}
	.content-box .head--round, .content-box.is-closed .head {
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	.content-box .head.head--grey, .head--grey {
		border-color: #cacaca;
		background-color: #f3f3f3;
	}
		.content-box .head h2, 
		.content-box .head h3, 
		.content-box .head h4, 
		.content-box .head h5,
		.content-box__head__title { 
			display: inline-block;
			margin: 0; 
			padding: 3px 0 2px 7px;		
			font-weight: normal; 	
			line-height: 20px; 
		}
			.content-box .head h2,
			.content-box__head__title { font-size: 20px; }
			.content-box .head h3 { font-size: 18px; }
			.content-box .head h4 { font-size: 16px; }
			.content-box .head h5 { font-size: 14px; }
			.content-box .head h2 a, 
			.content-box .head h3 a, 
			.content-box .head h4 a, 
			.content-box .head h5 a {
				color: inherit;
			}
			
		.content-box .head .icn--sup,
		.content-box .head .icn {
			text-shadow: -1px 0 1px rgba(255,255,255,0.1);
			color: #be9c43;
			position: relative;			
		}		
		.content-box .head .icn {
			font-size: 20px;			
		}
		.content-box .head .icn--sup {
			padding-left: 8px;
			font-size: 90%;			
			top: -2px;
		}
		.icn--pulled {
			top: 3px;
			right: 8px;
		}
		
		.content-box .head .userpic {
			position: absolute; 
			top: 7px;
			left: 9px;
		}
			.content-box .head .userpic + h2 { padding-left: 42px; }
			.content-box .head .button { margin: -2px auto; }
				.content-box .head .button + .button { margin-left: 4px; }
				/* oh my god specificity nightmare - don't try this at home */
				.content-box .head .button-group .button + .button { margin-left: -1px; }
				.content-box .head .button.disabled { opacity: 1; }
				
			.content-box .head .admin-badge {
				margin: -6px auto;
				position: relative;
				top: 3px;
			}
		.content-box .head .toggle-icons {
			font-size: 18px;
			padding-right: 8px;
		}		
		.toggle-icon { display: none; opacity: 0.3; }
			.toggle-icon:hover { opacity: 0.4; }
			.toggle-icon:active { opacity: 0.5;	}
			
			.is-open .toggle-icon--closed,
			.is-closed .toggle-icon--opened { display: none !important; }
			.is-open .toggle-icon--opened { display: inline-block; }
			.is-closed .toggle-icon--closed { display: inline-block; }
			
		
	.content-box .body, .content-box__body {
		color: #48505b;
		background: #fff;
		border: 1px solid #d7d7d7;
		border-top: none;
		-webkit-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
		-webkit-background-clip: padding-box; 
		background-clip: padding-box;	
	}
		.content-box .body--round, .body--round{
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
		.content-box .body--round > .row:first-child {
			-webkit-border-radius: 5px 5px 0 0;
			border-radius: 5px 5px 0 0;
		}
	.content-box .row {
		clear: both;
		border-top: 1px solid #d7d7d7;
		padding: 8px 8px 8px 18px;
		position: relative;
	}	
		.content-box .row .row {
			padding: 8px 0;
			border: none;
		}
		.content-box .row.half {
			clear: none;
		}			
		.content-box .row.mid {
			padding-left: 8px;
		}
 
		
	.content-box .button {
		height: 28px; 
		line-height: 28px;
		padding-top: 0;
		padding-bottom: 0;
	}
		.content-box input.button { line-height: 18px; }
	
	.user-info-box .icn, .user-info-box .flag {
		margin-left: -10px;
		margin-right: 5px;
		color: #bbb;
	}

    .comment-meta .user-info { display: inline-block; }
    .userpic { vertical-align: middle; }
	
/*
	Site Bottom
*/
.site-bottom {
    // The sidebar for the dev page (which has a z-index of 1) needs to be underneath the footer.
    z-index: $site-bottom-z-index;
	padding: 50px 0 20px 0;
	overflow: hidden;
}
	.site-bottom .nav-col { padding-left: 25px; }
		.site-bottom h4 { margin: 0 0 16px; color: #E1E5E8; font-size: 1.2em; font-weight: 500; }
		.site-bottom ul { list-style: none; padding: 0; margin: 0; font-size: 0.90em; }
		.site-bottom li { list-style: none; margin: 0 0 6px; padding: 0; line-height: 1; }
		.site-bottom a { color: #E1E5E8; text-decoration: none; }
			.site-bottom a:hover { color: white; }
	
/* 
	Site Footer
*/
.site-footer {
    // The sidebar for the dev page (which has a z-index of 1) needs to be underneath the footer.
    z-index: 2;
	background: #2b2b2b;
	color: #c3c3c3;
	padding: 12px 0 25px; 
	overflow: hidden;
}	
	.site-footer a { color: #93beff; }
		.site-footer a:hover { color: #c5dcff; }
		
	.site-footer p { margin-bottom: 0; padding-left: 25px; }
	.footer-nav a { display: inline-block; padding-right: 16px; }

/* 
	Margin Helpers
	At the bottom of this file to be more helpful :)
*/
.mg-top { margin-top: 10px; }
.mg-top--base { margin-top: 18px; }
.mg-top--big { margin-top: 30px; }
.mg-top--double { margin-top: 20px; }
.mg-top--small { margin-top: 5px; }
.mg-top--none { margin-top: 0; }

.mg-bottom { margin-bottom: 10px; }
.mg-bottom--base { margin-bottom: 18px; }
.mg-bottom--big { margin-bottom: 30px; }
.mg-bottom--double { margin-bottom: 20px; }
.mg-bottom--small { margin-bottom: 5px; }
.mg-bottom--none { margin-bottom: 0; }	
	
/* 
	Fun fun Rotation!
*/

.rotate {	
  -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
          transform: rotate(90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);		  
}

.rotate--ccw {
  -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg); 
      -ms-transform: rotate(-90deg); 
       -o-transform: rotate(-90deg); 
          transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.rotate--180 {
  -webkit-transform: rotate(180deg); 
     -moz-transform: rotate(180deg); 
      -ms-transform: rotate(180deg); 
       -o-transform: rotate(180deg); 
          transform: rotate(180deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
	
/* 
	Media Queries
*/
@media only screen and (min-width: 1000px) {
	/* keep the footer at the bottom for larger screens where the height is known */
	html, body { height: 100%; min-height: 100%; }
	#wrapper { min-height: 100%; }
	.site-main { padding-bottom: 200px; }
	.site-footer, .site-bottom { position: absolute; left: 0; width: 100%; }
	.site-bottom { position: absolute; bottom: 50px; margin-top: -320px; }
	.site-footer { bottom: 0; left: 0; }	
	
}
@media only screen and (max-width: 1060px) {
	.topmsg + .content-wrap h1 { max-width: 85%; }
}
@media only screen and (max-width: 930px) {
		.header-logo.wide { width: 300px; }
	.header-account-info { position: absolute; top: 0; right: 0; }	
}
@media only screen and (max-width: 830px) {
	.site-header .user-avatar { visibility:hidden; }
}
@media only screen and (max-width: 788px) {
	.site-main .content-wrap { min-width: 100%; }	
	.topmsg { zoom: 0.85; }
	.site-header .user-avatar { visibility: visible; }
	.header-notice { padding-bottom: 4px; }
}
@media only screen and (max-width: 60em) {		
	body, .content-wrap {
		min-width: 320px;
	}
	
	.head.group .pull-left,
	.head.group .pull-right{
		float: none;
		margin: auto;
		padding: 4px 0;
	}
	
	.language_nav { margin-top: 6px; }
}

@media only screen and (max-width: 430px) {
/*
	.loggedin .header-logo, .header-account-info { float: none; clear: both; margin: 0 auto; }
		.loggedin .header-logo { width: 14.8em; }
		.header-account-info { width: 13em; }
			.header-account-info .user-avatar { margin-right: 19px; }
*/	
	.header-account-info .user-avatar, .header-account-info .user-notifications {
		visibility: hidden;		
	}
	.breadcrumb-right { margin-top: 0; }	
}
@media only screen and (max-width: 375px) {
		.header-logo__logo {
			padding-right: 9px;
		}
	.header-logo h2 {
		font-size: 18px;
		padding-top: 10px;
	}
	.header-account-info { margin-right: -5px; }	
}
