<div class="widget__container">
	<h2 class="title text--ruby">Widget title</h2>
	<ul class="tabs">
		<li class="widget-tab no-select selected" data-tab="tab-one">Tab One</li
		><li class="widget-tab no-select" data-tab="tab-two">Tab Two</li
		><li class="widget-tab no-select" data-tab="tab-three">Tab Three</li>
	</ul>
	<div class="tab-page visible" data-tab="tab-one-seg">
		<div class="content">
			<h2 class="subtitle">Sub 1</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 2</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 3</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
	</div>
	<div class="tab-page" data-tab="tab-two-seg">
		<div class="content">
			<h2 class="subtitle">Sub 4</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 5</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 6</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
	</div>
	<div class="tab-page" data-tab="tab-three-seg">
		<div class="content">
			<h2 class="subtitle">Sub 7</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 8</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
		<div class="content">
			<h2 class="subtitle">Sub 9</h2>
			<div class="placeholder">image goes here</div>
			<p class="description">Description of sub</p>
		</div>
	</div>
	<p class="footnote">Place copyright or source info (URL, author, etc) here</p>
</div>

// mixins
// @include border-radius(10px 0 15px 5px)
@mixin border-radius($top-left-radius, $top-right-radius, $bottom-right-radius, $bottom-left-radius) {
	-webkit-border-top-left-radius: $top-left-radius;
	-moz-border-top-left-radius: $top-left-radius;
	-ms-border-top-left-radius: $top-left-radius;
	border-top-left-radius: $top-left-radius;
	
	-webkit-border-top-right-radius: $top-right-radius;
	-moz-border-top-right-radius: $top-right-radius;
	-ms-border-top-right-radius: $top-right-radius;
	border-top-right-radius: $top-right-radius;
	
	-webkit-border-bottom-right-radius: $bottom-right-radius;
	-moz-border-bottom-right-radius: $bottom-right-radius;
	-ms-border-bottom-right-radius: $bottom-right-radius;
	border-bottom-right-radius: $bottom-right-radius;
	
	-webkit-border-bottom-left-radius: $bottom-left-radius;
	-moz-border-bottom-left-radius: $bottom-left-radius;
	-ms-border-bottom-left-radius: $bottom-left-radius;
	border-bottom-left-radius: $bottom-left-radius;
}// end border-radius(...)


/* apply a natural box layout model to all elements, but allowing components to change */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-family: sans-serif;
}

h2 {
	font-size: 30px;
	line-height: 1.2;
	margin: 0;
}

a, a:hover, a:visited {
	color: inherit;
	text-decoration: none;
}

p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
}

ul {
	margin-left: 0;
}

.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.text--ruby {
	color: #840028;
}


.widget__container {
	color: white;
	margin: 0 auto;
	max-width: 1130px;
	position: relative;
	
	.tabs {
		top: 69px;
		position: absolute;
		
		.widget-tab {
			@include border-radius(10px, 10px, 0, 0);
			background-color: #eeeeee;
			border: 1px solid #9b9b9b;
			border-bottom: none;
			color: #002f51;
			cursor: pointer;
			display: inline-block;
			height: 39px;
			padding: 10px 20px;
			position: relative;
			z-index: 1;
		}
		
		.selected {
			background-color: white;
			color: #9b9b9b;
			z-index: 2;
		}
	}// end .tabs
	
	.heading {
		margin-bottom: 10px;
	}
	.title {
		border-bottom: 1px solid #c0c0c0;
		padding:0 0 10px 20px;
	}
	
	.tab-page {
		@include border-radius(0, 10px, 10px, 10px);
		background-color: white;
		border: 1px solid #c0c0c0;
		display: none;
		height: 100%;
		margin-top: 60px;
		position: relative;
		z-index: 1;
		
		.content {
			display: inline-block;
			margin: 0 auto;
			text-align: center;
			width: 33%;
			
			.subtitle {
				margin: 20px 0;
			}
			
			&:nth-child(1) .subtitle {
				color: #306caa;
			}
			&:nth-child(2) .subtitle {
				color: #519d00;
			}
			&:nth-child(3) .subtitle {
				color: #802e9f;
			}
			
			.placeholder {
				border: 1px solid #c0c0c0;
				color: #c0c0c0;
				height: 256px;
				width: 256px;
				margin: 0 auto;
			}
			
			.description {
				color: black;
			}
		}// end .content
	}// end .tab-page
	
	.footnote {
		color: black;
		font-size: 12px;
		text-align: center;
	}
	
	.visible {
		display: block;
	}
	
	h4 {
		color: inherit;
		margin: 0;
	}
	
	ul {
		margin: 0;
		padding: 0;
	}
}// end widget__container

$(document).ready(function(){
	$('.widget-tab').click(function() {
		switchTabs($(this));
	});
});


// 
function switchTabs(that) {
	var parent = that.parent();
	var grandparent = parent.parent();
	var showSegment = that.attr('data-tab') + '-seg';
	
	// remove selected class from tabs and add it to the current tab
	parent.find('.selected').removeClass('selected');
	that.addClass('selected');
	
	// display selected segment
	grandparent.find('.visible').removeClass('visible');
	grandparent.find('[data-tab=' + showSegment + ']').addClass('visible');
}// end switchTabs(that)