/*
	* Gridless version 2.0

	* Credit is left inline and big thanks to Nicolas Gallagher and Jonathan Neal

	* Across this document we use safe CSS hacks: http://mathiasbynens.be/notes/safe-css-hacks
	* Selectors beggining with an underscore (_selector: property) target only IE6
	* Selectors beggining with an asterisk (*selector: property) target only IE6 and IE7
*/

/* HTML5 display definitions
---------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
	display: block;
}

/* Corrects inline-block not defined in IE6/7/8 and FF3 */
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls]) {
	display: none;
}

/* Ensures content is hidden from all presentations, including screenreaders */
[hidden] {
	display: none;
	visibility: hidden;
}

/* Base structure
---------------------------------------- */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/
html {
	height: 100%;
	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0 auto;
	min-height: 100%;
}

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
	font: 1em/1.625 Arial, serif;
	color: #222; /* Full black on white is too much contrast, #222 is a better default */
}

/* Add and/or remove tags as your baseline grid needs */
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img, figure, figcaption, button, hr {
	margin: 0 0 1.625em;
}

/* Headings/small
---------------------------------------- */

/*
	* Font sizes are based on the golden ratio of 16
	* See this for the modular scale: ow.ly/5jGl6
	* Line-heights and margins are adjusted to keep a 26px (1.625em) vertical rhythm across elements 
*/

h1, h2, h3, h4, h5, h6 {
	font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', FreeSerif, Georgia, serif;
	font-size: 1em;
	font-weight: bold;
}

h1 {
	font-size: 4.25em; /* 68px */
	line-height: 1.1471em;
	margin: 0 0 0.3824em;
}

h2 {
	font-size: 2.625em; /* 42px */
	line-height: 1.2381em;
	margin: 0 0 0.619em;
}

h3 {
	font-size: 1.625em; /* 26px */
	line-height: 1em;
	margin: 0 0 1em;
}

small {
	font-size: 0.625em; /* 10px */
	margin: 0 0 2.6em;
}

/* Preformatted text and code
---------------------------------------- */

/* Allows line wrapping of 'pre' */
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font: 1em/1.625em Menlo, Consolas, 'DejaVu Sans Mono', Monaco, 'Courier New', Courier, monospace;
}

/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	border: 0;
	*margin-left: -7px;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
input.text {margin-bottom:12px; padding:8px 5px 8px 10px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input {
	*overflow: auto;
}

/* Quotes
---------------------------------------- */

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

blockquote, q, cite {
	font-style: italic;
}

blockquote {
	padding-left: 1.625em;
	border-left: 1px solid #ddd;
}

blockquote > p {
	padding: 0;
}

/* Lists
---------------------------------------- */

ul, ol {
	list-style-position: inside;
	padding: 0;
}

li ul, li ol {
	margin: 0 1.625em;
}

dl dd {
	margin-left: 1.625em;
}

/* Links
---------------------------------------- */

a, a:visited {
}

a:hover {
}

a:focus {
}

a:hover, a:active {
}

/* Figures
---------------------------------------- */

figure {
	margin: 0;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	max-width: 100%; /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
	/* _width: 100%; /* IE6 doesn't support max-width, so we just use width. If the image is larger than the container, just uncomment this. If it is smaller than the container, uncomment and change the 100% value to an absolute one */
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* Abbreviations
---------------------------------------- */

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* Marked/inserted/deleted text
---------------------------------------- */

mark {
	background: #ff0;
}

ins {
	text-decoration: none;
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* Others
---------------------------------------- */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #ddd;
}

strong, b, dt {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

var, address {
	font-style: normal;
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* Helper classes
---------------------------------------- */

.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}
.clear {clear:both;}

/* Primary styles
---------------------------------------- */
html {background:url(../img/bg.jpg);}
/* Header -------------------- */
#header {width:320px; margin:0 auto; padding:20px 0;}
#medicalLogo {float:left; width:110px; margin:0px; padding-left:10px;}
#obgynLogo {float:right; width:170px; margin:0px; padding-right:10px;}
/* Nav -------------------- */
#mainNav {background:url(../img/navbg.png);}
#mainNav ul {width:320px; height:68px; margin:0 auto;}
#mainNav li {display:block; float:left; list-style-type:none;}
#mainNav a {display:block; float:left; width:78px; height:51px; padding:17px 0px 0px; font-family:'BebasNeueRegular', Arial, Helvetica; font-size:18px; line-height:19px; text-align:center; text-shadow:0 -1px 0px rgba(0, 0, 0, 0.35); color:#FFF; text-transform:uppercase; text-decoration:none; border-right:1px solid rgba(0, 0, 0, 0.25); border-left:1px solid rgba(255, 255, 255, 0.25);}
#mainNav li:first-child a {border-left:1px solid rgba(0, 0, 0, 0.25);}

/* Body -------------------- */
.themeBox {position:absolute;top:0px;right:0px; padding:5px 0px 5px 5px; background:rgba(0, 0, 0, 0.75);}
.themeBox a {display:block; float:left; width:30px; height:30px; margin-right:5px; text-indent:-9999px;}
.themeBox #greenTheme {background:#3c867d;}
.themeBox #yellowTheme {background:#fbbe41;}
.themeBox #lightBlueTheme {background:#51b6e2;}
.themeBox #purpleTheme {background:#796875;}
/* Home ---- */
#mainContent {position:relative; padding:14px 20px 20px;}
#mainContent .intro {position:relative; z-index:5; padding:0px;}
#mainContent p {font-size:14px;}
#mainContent h1 {position:relative; margin-bottom:2px; padding:0px; z-index:5; font-size:30px; text-align:center; line-height:35px;}
#mainContent h1, #mainContent h2 {font-family:'BebasNeueRegular', Arial, sans-serif; font-weight:normal;}
#mainContent h2 {font-size:26px;}
#mainContent .formWrap {position:relative; z-index:5; float:right; width:205px; padding:0 0 40px 0;}
#mainContent .babyNameForm input.text {margin-bottom:18px;}
#mainContent .radio {
	width: 25px;
	height: 25px;
	padding: 0px;
	margin-right:1px;
	display: block;
	clear: none;
	float: left;
}

#mainContent label {float:left; position:relative; top:4px; margin-right:9px; font-size:12px;}
#mainContent .babyNameForm .surprise {margin-right:0px;}
#mainContent .babyLastName {display:block; width:186px; margin-bottom:10px; padding:8px 5px 8px 10px;}
#mainContent .btnSubmit {display:block; width:204px; margin-top:10px; padding:7px 0 6px; font-size:20px; font-family:'BebasNeueRegular', Arial; color:#FFF; border:1px solid rgba(0, 0, 0, 0.35); text-decoration:none; 
	-moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;
	-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.25);
	text-shadow:0 -1px 0px rgba(0, 0, 0, 0.35); 
}
#mainContent .babyNameForm .btnSubmit {margin-top:15px;}
#bunny {position:absolute; width:160px; height:290px; overflow:hidden; left:-40px; bottom:-50px; z-index:1;}

/* Name Result---- */
#mainContent .nameResultWrap .formWrap {width:180px;}
#mainContent .nameResultWrap .intro {float:none; padding-top:12px;}
#mainContent .nameResultWrap p {margin:0px 0px 8px 0px;}
.nameResultWrap .nameResult {font-weight:bold;}
#mainContent .nameResultWrap .btnSubmit {width:178px; margin-bottom:10px;}
#mainContent .nameResultWrap .changeInfo {display:block; font-size:14px; padding:4px 0; text-align:center;}

/* Trending Names ---- */
#trendingContentWrap {max-width:480px; margin:0 auto; position:relative; z-index:4;}
#trendingContentWrap .tabContent {display:none;}
#pointingBunny {display:none; z-index:1;}
#trendingHeading {display:none;}
.trendingNames h2 {text-align:center; line-height:24px; margin:0px; padding:0px;}
#trendingNav {margin-bottom:10px; border-top:1px solid #333; border-bottom:1px solid #333; text-align:center; padding:6px 0 8px;}
#trendingNav ul {margin:0px; padding:0px;}
#trendingNav li {list-style-type:none; display:inline;}
#trendingNav a {display:inline; font-size:12px; font-weight:bold; padding:6px 5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-decoration:none;}
#trendingNav .active {color:#FFF !important;}
#lastUpdate {font-style:italic; font-size:11px; text-align: center; color: #333; margin:0px; padding:0px;}
#boysNames, #girlsNames {width:130px; margin-top:8px;}
#boysNames {float:left;}
#girlsNames {float:right;}
#boysNames .nameHeading, #girlsNames .nameHeading {padding:5px 0; margin-bottom:4px; text-align: center; color:#FFF; font-size:13px; font-weight:bold;}
#boysNames li, #girlsNames li {list-style-type:none; text-align:center;}

/* Name Test -------------------- */
#nameTestContentWrap p {}
#nameTestContentWrap .formWrap {width:282px; margin:0 auto; float:none; padding:0px;}
#nameTestContentWrap .formWrap .text {width:265px;}
#nameTestContentWrap .formWrap select {width:210px; float:right;}
#nameTestContentWrap .formWrap .btnSubmit {width:281px; margin-top:10px;}
#nameTestContentWrap .radioWrap {margin:5px 0 15px;}
#nameTestContentWrap .radioWrap label {width:70px; font-size:14px; top:3px;}
#nameTestContentWrap h2 {padding-bottom:8px;}
#nameTestContentWrap ol {}
#nameTestContentWrap li {text-indent: -2em; font-size: 14px; line-height: 24px; margin-left: 20px;}
#nameTestContentWrap .testName {font-weight: bold;}

/* Pregnancy Links -------------------- */
#linksContentWrap {max-width:380px; margin:0 auto; position:relative; z-index:4;}
#thumbsBunny {display:none; z-index:1;}

/* Landing Page---- */
#screenshot {width:250px; z-index:1; border: 8px solid gray; border-width: 5px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);}


/* Footer -------------------- */
#footer {position:relative; z-index:5; height:58px; padding:16px 0 6px;}
#footer p {color:#FFF; font-size:10px; line-height:12px; margin:0px; padding:0 0 4px; text-align:center;}


/* Media queries
---------------------------------------- */

/* The media queries included in here are only placeholder. Modify them as your content requires */

@media only screen and (min-width: 480px) {
	/* Wide mobile (480px+) styles go here */
}

@media only screen and (min-width: 768px) { 
	/* Header -------------------- */
	#header {width:640px; margin:0 auto; padding:20px 0;}
	#medicalLogo {float:left; width:220px; padding-left:30px;}
	#obgynLogo {float:right; width:327px; padding-right:32px;}
	#mainNav ul {width:640px; height:85px; margin:0 auto;}
	#mainNav a {width:156px; height:66px; padding:19px 0px 0px; font-size:26px; line-height:26px;}
	/* Body -------------------- */
	#bunny {width:235px; height:480px; overflow:hidden; left:0px;top:46px;}
	#bunny img {width:235px;}
	#mainContent {width:640px; min-height:580px; margin:0 auto;}
	#mainContent p {font-size:16px;}
	#mainContent .intro {float:right; width:420px; padding-top:50px; line-height:23px;}
	#mainContent .formWrap {width:310px; margin:25px 30px 0 0;}
	#mainContent .formWrap label {font-size:18px; top:-2px; margin:0 10px 0 6px;}
	#mainContent .formWrap input.boy {margin-left:15px;}
	#mainContent h1 {font-family:'BebasNeueRegular', Arial, Helvetica; font-size:50px; padding-bottom:10px; color:#66aba3; text-transform:uppercase;}
	#mainContent .babyLastName {width:288px; padding:8px 5px 8px 12px;}
	#mainContent .btnSubmit {width:308px; padding:12px 0 10px; font-size:24px;}
	#homeContentWrap {width:410px; margin-top:20px; float:right;}
	
	/* Name Result---- */
	#mainContent .nameResultWrap .formWrap {width:330px;}
	#mainContent .nameResultWrap .intro {float:none; padding-top:12px;}
	#mainContent .nameResultWrap p {margin:0px 0px 15px 0px;}
	.nameResultWrap .nameResult {font-weight:bold;}
	#mainContent .nameResultWrap .btnSubmit {width:250px; margin-bottom:10px;}
	#mainContent .nameResultWrap .changeInfo {display:block; font-size:16px; padding:4px 0; text-align:left;}
	
	/* Footer -------------------- */
	/*.push {height:58px;}*/
	#footer {height:30px; padding:25px 0;}
	#footerInner {width:570px; margin:0 auto;}
	#footerInner p {display:block;}
	#legal1 {float:left;}
	#legal1:after {content:"|"; color:#FFF; position:relative; left:22px;}
	#legal2 {float:right;}
	#legal3 {clear:both;}
	
	/* Trending Names -------------------- */
	#pointingBunny {display:block; position:absolute; left:-15px; top:30px;}
	#trendingContentWrap {width:480px; margin-top:20px; float:right;}
	#trendingNav {margin-top:20px; padding:10px 0;}
	#trendingNav a {font-size:14px; font-weight:bold; padding:8px 17px; margin:0 8px;}
	#mainContent h2 {font-size:34px; margin-top:28px;}
	#trendingHeading {display:block; font-size:50px;}
	#boysNames {width:162px; margin:20px 0 0 55px;}
	#girlsNames {width:162px; margin: 20px 55px 0 0;}
	#boysNames .nameHeading, #girlsNames .nameHeading {font-size:14px;}
	
	/* Name Test -------------------- */
	#nameTestContentWrap {width:415px; margin-top:20px; float:right;}
	#nameTestContentWrap p {font-size:16px; line-height:19px;}
	#nameTestContentWrap label {display:inline-block; width:100px;}
	#nameTestContentWrap .text {width:189px;}
	#nameTestContentWrap select {position:relative; left:-4px; width:207px;}
	
	/* Pregnancy Links -------------------- */
  #thumbsBunny {display:block; position:absolute; left:-15px; top:30px;}
	#linksContentWrap {width:480px; margin-top:20px; float:right;}
	#linksContentWrap h1 {padding-bottom:18px !important;}
	
	/* Landing Page---- */
	#screenshot {width:300px; z-index:1; border: 8px solid gray; border-width: 5px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);}
}

@media only screen and (min-width: 1024px) {
	html, body {height:100%;}
	/*.wrapper {min-height:100%; height:100% !important; height:100%; margin:0 auto -58px;}*/
	/* Header -------------------- */
	#header {width:640px; margin:0 auto; padding:20px 0;}
	#medicalLogo {float:left; width:220px; padding-left:30px;}
	#obgynLogo {float:right; width:327px; padding-right:32px;}
	/* Nav -------------------- */
	#mainNav ul {width:640px; height:85px; margin:0 auto;}
	#mainNav a {width:156px; height:66px; padding:19px 0px 0px; font-size:26px; line-height:26px;}
	/* Body -------------------- */
	#mainContent {width:640px; min-height:580px; margin:0 auto; }
	#mainContent p {font-size:16px;}
	#mainContent .intro {width:480px; padding-top:40px; line-height:23px;}
	#mainContent .formWrap {width:310px; margin:25px 65px 0 0;}
	#mainContent .formWrap label {font-size:18px; top:-2px; margin:0 10px 0 6px;}
	#mainContent .formWrap input.boy {margin-left:15px;}
	#mainContent h1 {font-family:'BebasNeueRegular', Arial, Helvetica; font-size:50px; padding-bottom:18px; color:#66aba3; text-transform:uppercase;}
	#mainContent .babyLastName {width:288px; padding:8px 5px 8px 12px;}
	#mainContent .btnSubmit {width:308px; padding:12px 0 10px; font-size:24px;}
	#homeContentWrap {width:480px; margin-top:20px; float:right;}
	#bunny {width:235px; height:480px; overflow:hidden; left:-28px;top:46px;}
	#bunny img {width:235px;}
	
	/* Name Result---- */
	#mainContent .nameResultWrap .formWrap {width:330px;}
	#mainContent .nameResultWrap .intro {float:none; padding-top:12px;}
	#mainContent .nameResultWrap p {margin:0px 0px 15px 0px;}
	.nameResultWrap .nameResult {font-weight:bold;}
	#mainContent .nameResultWrap .btnSubmit {width:250px; margin-bottom:10px;}
	#mainContent .nameResultWrap .changeInfo {display:block; font-size:16px; padding:4px 0; text-align:left;}

	/* Trending Names -------------------- */
	#pointingBunny {display:block; position:absolute; left:-80px; top:30px;}
	#trendingContentWrap {width:480px; margin-top:20px; float:right;}
	#trendingNav {margin-top:20px; padding:10px 0;}
	#trendingNav a {font-size:14px; font-weight:bold; padding:8px 17px; margin:0 8px;}
	#mainContent h2 {font-size:34px; margin-top:28px;}
	#trendingHeading {display:block; font-size:50px;}
	#boysNames {width:162px; margin:20px 0 0 55px;}
	#girlsNames {width:162px; margin: 20px 55px 0 0;}
	#boysNames .nameHeading, #girlsNames .nameHeading {font-size:14px;}

	/* Name Test -------------------- */
	#nameTestContentWrap {width:450px; margin-top:20px; float:right;}
	#nameTestContentWrap p {font-size:16px; line-height:19px;}
	#nameTestContentWrap label {display:inline-block; width:100px;}
	#nameTestContentWrap .text {width:189px;}
	#nameTestContentWrap select {position:relative; left:-3px; width:207px;}
	
	/* Pregnancy Links -------------------- */
	#linksContentWrap {width:640px; margin:20px auto 0;}
	
	/* Landing Page---- */
	#screenshot {width:300px; z-index:1; border: 8px solid gray; border-width: 5px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.05);}
	
	/* Footer -------------------- */
	/*.push {height:58px;}*/
	#footer {height:30px; padding:25px 0;}
	#footerInner {width:560px; margin:0 auto;}
	#footerInner p {display:block;}
	#legal1 {float:left;}
	#legal1:after {content:"|"; color:#FFF; position:relative; left:15px;}
	#legal2 {float:right;}
	#legal3 {clear:both;}
}


/* Color Themes
---------------------------------------- */

/* Yellow -------------------- */
.yellowTheme #mainContent h1, .yellowTheme a {color:#fbbe41;}
.yellowTheme #mainContent h2 {color:#fbbe41;} 
.yellowTheme #trendingNav {border-color:#fbbe41;}
.yellowTheme #trendingNav .active {background:#fbbe41;}
.yellowTheme .nameHeading {background:#fbbe41;}
.yellowTheme .radio {background:url(../img/radio-yellow.png);}
.yellowTheme #mainNavWrap, .yellowTheme .btnSubmit, .yellowTheme #footer {
	background: #fbbe41;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiYmU0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYzlkMjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #fbbe41 0%, #ec9d26 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbbe41), color-stop(100%,#ec9d26));
	background: -webkit-linear-gradient(top,  #fbbe41 0%,#ec9d26 100%);
	background: -o-linear-gradient(top,  #fbbe41 0%,#ec9d26 100%);
	background: -ms-linear-gradient(top,  #fbbe41 0%,#ec9d26 100%);
	background: linear-gradient(to bottom,  #fbbe41 0%,#ec9d26 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbbe41', endColorstr='#ec9d26',GradientType=0 );
}

.yellowTheme #mainNav .active {
	background: #fbbe41;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiYmU0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNDhhMTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #fbbe41 0%, #e48a17 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbbe41), color-stop(100%,#e48a17));
	background: -webkit-linear-gradient(top,  #fbbe41 0%,#e48a17 100%);
	background: -o-linear-gradient(top,  #fbbe41 0%,#e48a17 100%);
	background: -ms-linear-gradient(top,  #fbbe41 0%,#e48a17 100%);
	background: linear-gradient(to bottom,  #fbbe41 0%,#e48a17 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbbe41', endColorstr='#e48a17',GradientType=0 );
}

/* Light Blue -------------------- */
.lightBlueTheme #mainContent h1, .lightBlueTheme a {color:#51b6e2;}
.lightBlueTheme #mainContent h2 {color:#49a3cb;}
.lightBlueTheme #trendingNav {border-color:#51b6e2;}
.lightBlueTheme #trendingNav .active {background:#49a3cb;}
.lightBlueTheme .nameHeading {background:#51b6e2;}
.lightBlueTheme .radio {background:url(../img/radio-blue.png);}
.lightBlueTheme #mainNavWrap, .lightBlueTheme .btnSubmit, .lightBlueTheme #footer {
	background: #51b6e2;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxYjZlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzODlmZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #51b6e2 0%, #389fd6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51b6e2), color-stop(100%,#389fd6));
	background: -webkit-linear-gradient(top,  #51b6e2 0%,#389fd6 100%);
	background: -o-linear-gradient(top,  #51b6e2 0%,#389fd6 100%);
	background: -ms-linear-gradient(top,  #51b6e2 0%,#389fd6 100%);
	background: linear-gradient(to bottom,  #51b6e2 0%,#389fd6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51b6e2', endColorstr='#389fd6',GradientType=0 );
}
.lightBlueTheme #mainNav .active {
	background: #49a3cb;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5YTNjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNzc0YjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #49a3cb 0%, #1774b4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49a3cb), color-stop(100%,#1774b4));
	background: -webkit-linear-gradient(top,  #49a3cb 0%,#1774b4 100%);
	background: -o-linear-gradient(top,  #49a3cb 0%,#1774b4 100%);
	background: -ms-linear-gradient(top,  #49a3cb 0%,#1774b4 100%);
	background: linear-gradient(to bottom,  #49a3cb 0%,#1774b4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49a3cb', endColorstr='#1774b4',GradientType=0 );
}

/* Purple -------------------- */
.purpleTheme #mainContent h1, .purpleTheme a {color:#272025;}
.purpleTheme #mainContent h2 {color:#272025;}
.purpleTheme #trendingNav {border-color:#272025;}
.purpleTheme #trendingNav .active {background:#272025;}
.purpleTheme .nameHeading {background:#6F5F6B;}
.purpleTheme .radio {background:url(../img/radio-purple.png);}
.purpleTheme #mainNavWrap, .purpleTheme .btnSubmit, .purpleTheme #footer {
	background: #796875;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc5Njg3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDM0NDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #796875 0%, #443440 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#796875), color-stop(100%,#443440));
	background: -webkit-linear-gradient(top,  #796875 0%,#443440 100%);
	background: -o-linear-gradient(top,  #796875 0%,#443440 100%);
	background: -ms-linear-gradient(top,  #796875 0%,#443440 100%);
	background: linear-gradient(to bottom,  #796875 0%,#443440 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#796875', endColorstr='#443440',GradientType=0 );
}
.purpleTheme #mainNav .active {
	background: #6f5f6b;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmNWY2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNzIwMjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #6f5f6b 0%, #272025 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f5f6b), color-stop(100%,#272025));
	background: -webkit-linear-gradient(top,  #6f5f6b 0%,#272025 100%);
	background: -o-linear-gradient(top,  #6f5f6b 0%,#272025 100%);
	background: -ms-linear-gradient(top,  #6f5f6b 0%,#272025 100%);
	background: linear-gradient(to bottom,  #6f5f6b 0%,#272025 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f5f6b', endColorstr='#272025',GradientType=0 );
}

/* Green -------------------- */
.greenTheme #mainContent h1, .greenTheme a {color:#3c867d;}
.greenTheme #mainContent h2 {color:#3c867d;}
.greenTheme #trendingNav {border-color:#3c867d;}
.greenTheme #trendingNav .active {background:#3c867d;}
.greenTheme .nameHeading {background:#83bfb9;}
.greenTheme .radio {background:url(../img/radio-green.png);}
.greenTheme #mainNavWrap, .greenTheme .btnSubmit, .greenTheme #footer {
	background: #8bc5bf;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiYzViZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NmFiYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #8bc5bf 0%, #66aba3 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bc5bf), color-stop(100%,#66aba3));
	background: -webkit-linear-gradient(top,  #8bc5bf 0%,#66aba3 100%);
	background: -o-linear-gradient(top,  #8bc5bf 0%,#66aba3 100%);
	background: -ms-linear-gradient(top,  #8bc5bf 0%,#66aba3 100%);
	background: linear-gradient(to bottom,  #8bc5bf 0%,#66aba3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc5bf', endColorstr='#66aba3',GradientType=0 );
}
.greenTheme #mainNav .active {
	background: #75b3ac;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc1YjNhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYzg2N2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #75b3ac 0%, #3c867d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75b3ac), color-stop(100%,#3c867d));
	background: -webkit-linear-gradient(top,  #75b3ac 0%,#3c867d 100%);
	background: -o-linear-gradient(top,  #75b3ac 0%,#3c867d 100%);
	background: -ms-linear-gradient(top,  #75b3ac 0%,#3c867d 100%);
	background: linear-gradient(to bottom,  #75b3ac 0%,#3c867d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75b3ac', endColorstr='#3c867d',GradientType=0 );
}


/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}