// SASS Stuff
// 
// Mixins for radii and similar
// Border radius. Uses compass co-ordinates for rounding location. Ex n (lowercase) is top
@mixin border-radius($side: all, $radius: 3px) {
	@if $side == all {
		-webkit-border-radius: $radius;
		-moz-border-radius: $radius;
		border-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == n {
		-webkit-border-top-left-radius: $radius; -webkit-border-top-right-radius: $radius;
		-moz-border-radius-topleft: $radius; -moz-border-radius-topright: $radius;
		border-top-left-radius: $radius; border-top-right-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == ne {
		-webkit-border-top-right-radius: $radius;
		-moz-border-radius-topright: $radius;
		border-top-right-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == e {
		-webkit-border-top-right-radius: $radius; -webkit-border-bottom-right-radius: $radius;
		-moz-border-radius-topright: $radius; -moz-border-radius-bottomright: $radius;
		border-top-right-radius: $radius; border-bottom-right-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == se {
		-webkit-border-bottom-right-radius: $radius;
		-moz-border-radius-bottomright: $radius;
		border-bottom-right-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == s {
		-webkit-border-bottom-left-radius: $radius; -webkit-border-bottom-right-radius: $radius;
		-moz-border-radius-bottomleft: $radius; -moz-border-radius-bottomright: $radius;
		border-bottom-left-radius: $radius; border-bottom-right-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == sw {
		-webkit-border-bottom-left-radius: $radius;
		-moz-border-radius-bottomleft: $radius;
		border-bottom-left-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	@else if $side == w {
		-webkit-border-bottom-left-radius: $radius; -webkit-border-top-left-radius: $radius;
		-moz-border-radius-bottomleft: $radius; -moz-border-radius-topleft: $radius;
		border-bottom-left-radius: $radius; border-top-left-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box; 
	}
	@else if $side == nw {
		-webkit-border-top-left-radius: $radius;
		-moz-border-radius-topleft: $radius;
		border-top-left-radius: $radius;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
}
@mixin box-shadow($properties) {
	-webkit-box-shadow: #{$properties};
	-moz-box-shadow: #{$properties};
	box-shadow: #{$properties};
}
// Variables for colors
$box-bg: hsl(210, 100%, 97%);
$box-border: hsl(209, 54%, 59%);

/* !universal styles */
		.button {
			background-color: darken($box-bg, 7%+5%);
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(darken($box-bg, 7%)), to(darken($box-bg, 17%)));
			background: -moz-linear-gradient(top, darken($box-bg, 7%), darken($box-bg, 17%));
/* 			Gradient soup is for cross-browser */
			border: 1px solid $box-border;
			font-size: 16px;
			color: black;
			padding: 5px;
			text-shadow: 0px 1px 0px hsla(0,0%,100%,.7);
			
			@include box-shadow(inset 0px 1px 0px hsla(0,0%,100%,.6));
			@include border-radius(all, 10px);
			
			
			&:active {
			background-color: darken($box-bg, 7%+10%);
			background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(darken($box-bg, 7%)), to(darken($box-bg, 17%)));
			background: -moz-linear-gradient(bottom, darken($box-bg, 7%), darken($box-bg, 17%));
			}
		}

/* !Landing page */
.redditad-header {
	margin-top: none;
	
}

.column-container {
	width: 960px;
	margin: 0 auto;
}

.center-col-1, .center-col-2 {
	margin: 0 20px;
}

.center-col-2 {
	margin-left: 0px;
}

.column {
	width: 220px;
	float: left;
	position: relative;
	
	&.shown {
		margin: 0px;
	}

	.image {
		width: 220px;
		height: 128px;
		border: 1px solid $box-border;
	}
	
	.col-expando {
		width: 708px; //Borders and padding add width, among other things, so we have to compensate. 2*10px padding, 10px spacing, 2* 1px border = -32px. 740-32=708px
 		padding: 10px;
		background: $box-bg;
		height: 100%;
		position: absolute;
		left: 230px; top: 0px;
		z-index: 10;
		border: 1px solid $box-border;
		
		display: none;
		
		@include border-radius(all, 5px);
		
		
		.col-expando-header {
			margin: 0px;
			text-align: center;
		}
		
		.col-expando-close {
			position: absolute;
			top: 1px; left: 1px;
			line-height: 13px;
		}
		
		//Triangle
		.col-expando-tri-border {
			border-color: transparent $box-border transparent transparent;
			border-width: 15px; border-style: solid;
			height: 0px; width: 0px;
			position: absolute;
			top: 140px;
			left: -30px;
		}
		.col-expando-tri-body {
			border-color: transparent $box-bg transparent transparent;
			border-width: 15px; border-style: solid;
			height: 0px; width: 0px;
			position: absolute;
			top: 140px;
			left: -28px;
		}
	}
	
	.col-trigger {
		
		ul {
			list-style-type: disc;
			margin-left: 20px;
		}
		
	}
}

.col-bottom-box {
	background: $box-bg;
	border: 1px solid $box-border;
	padding: 10px;
	margin-top: 30px;
	
	@include border-radius(all, 5px);
	
	.bottom-box-title {
		font-size: 1.7em;
		font-weight: bold;
	}
	
	.ad-launch-buttons {
		float: right;
		padding-left: 10px;
        display: block;
		
		.manage-ads {
			font-size: 12px;
		}
        .button {
            display: block;
        }		
	}
	
}

#testimonial-parent {
	.testimonial-title {
		font-weight: bold;
		font-size: 1.7em;
		margin-bottom: 1em;
	}
	.testimonial {
		font-style: italic;
		font-size: 2em;
		font-family: Georgia, Times New Roman, Times, serif;
		text-align: center;

		q {
		    &::before {
		        content: "\201c"; //Pretty quote
		    }
		    &::after {
		        content: "\201d"; //Pretty quote
		    }
		}
		cite {
			font-size: .8em;
			display: block;
			text-align: right;
		}
	}
}

