$height-designer: 250px;
$height-toolbar: 45px;
$color-borders: #CECECE;

// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}
// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}

.avatar {
	border: 1px solid $color-page;
}
.chevron {
	border-color: #FFF transparent transparent;
	border-style: solid;
	border-width: 4px;
	width: 0;
	vertical-align: middle;
	margin-top: 2px;
}

.banner-corner-left,
.banner-corner-right {
	border-style: solid;
	border-width: 2px;
	position: absolute;
	width: 0;
}
// TODO: This attribution link below is broken
// @see http://perfectionorvanity.com/reset.html
a, abbr, address, article, aside, audio, b, blockquote, body, canvas,
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary,
sup, time, ul, var, video {
	border: 0;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

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

a, ins {
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

q:after, q:before {
	content: "";
}
@mixin linear-gradient($solidFill, $start: top, $color1: false, $color1pos: false, $color2: false, $color2pos: false, $color3: false, $color3pos: false, $color4: false, $color4pos: false) {

	// output solid fill for browsers not supporting CSS gradients
	@if $solidFill {
		background-color: $solidFill;
	}

	$mozBackground : "";
	$webkitBackground : "";

	// add gradient start type
	@if $start == top {
		$webkitBackground : "0% 0%, 0% 100%";
	} @else if $start == left {
		$webkitBackground : "0% 0%, 100% 0%";
	} @else if $start == right {
		$webkitBackground : "100% 0%, 0% 0%";
	}
	$mozBackground : $start;

	// add colors and their positions
	@if $color1 {
		$mozBackground : $mozBackground + ", " + $color1 + " " + $color1pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color1pos + ", " + $color1 + ")";
	}
	@if $color2 {
		$mozBackground : $mozBackground + ", " + $color2 + " " + $color2pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color2pos + ", " + $color2 + ")";
	}
	@if $color3 {
		$mozBackground : $mozBackground + ", " + $color3 + " " + $color3pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color3pos + ", " + $color3 + ")";
	}
	@if $color4 {
		$mozBackground : $mozBackground + ", " + $color4 + " " + $color4pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color4pos + ", " + $color4 + ")";
	}

	/* dev note(hyun): gecko, ms, and opera uses the html5 syntax.  None support non-vendor specific key currently (2012-3-19). */
	background-image: unquote("-moz-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-webkit-gradient(linear, " + unquote($webkitBackground) + ")");
	background-image: unquote("-o-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-ms-linear-gradient(" + unquote($mozBackground) + ")");
	/* background-image: unquote("linear-gradient(" + unquote($mozBackground) + ")"); */	/* uncomment this someday - hyun */
}

@mixin clear-linear-gradient($background-color: transparent) {
	background-image: none;
	background-color: $background-color;
}

@mixin radial-gradient($color1: false, $color2: false) {
	background-image: $color1; /* Old browsers */
	background-image: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%); /* FF3.6+ */
	background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background-image: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Opera 12+ */
	background-image: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* IE10+ */
	background-image: radial-gradient(ellipse at center, $color1 0%,$color2 100%); /* W3C */
}
@mixin clearfix {
	zoom: 1; // IE

	&:after {
		clear: both;
		content: " ";
		display: block;
		height: 0;
		overflow: hidden; // (BugId:11677)
		visibility: hidden;
	}
}
$spread-radius: 0;
$inset: false;

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $color, $inset: $inset, $spread-radius: $spread-radius) {
	@if $inset {
		box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
	} @else {
		box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
	}
}

@mixin clear-box-shadow {
	box-shadow: none;
}
// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}
$spread-radius: 0;
$inset: false;

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $color, $inset: $inset, $spread-radius: $spread-radius) {
	@if $inset {
		box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
	} @else {
		box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
	}
}

@mixin clear-box-shadow {
	box-shadow: none;
}
@mixin linear-gradient($solidFill, $start: top, $color1: false, $color1pos: false, $color2: false, $color2pos: false, $color3: false, $color3pos: false, $color4: false, $color4pos: false) {

	// output solid fill for browsers not supporting CSS gradients
	@if $solidFill {
		background-color: $solidFill;
	}

	$mozBackground : "";
	$webkitBackground : "";

	// add gradient start type
	@if $start == top {
		$webkitBackground : "0% 0%, 0% 100%";
	} @else if $start == left {
		$webkitBackground : "0% 0%, 100% 0%";
	} @else if $start == right {
		$webkitBackground : "100% 0%, 0% 0%";
	}
	$mozBackground : $start;

	// add colors and their positions
	@if $color1 {
		$mozBackground : $mozBackground + ", " + $color1 + " " + $color1pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color1pos + ", " + $color1 + ")";
	}
	@if $color2 {
		$mozBackground : $mozBackground + ", " + $color2 + " " + $color2pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color2pos + ", " + $color2 + ")";
	}
	@if $color3 {
		$mozBackground : $mozBackground + ", " + $color3 + " " + $color3pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color3pos + ", " + $color3 + ")";
	}
	@if $color4 {
		$mozBackground : $mozBackground + ", " + $color4 + " " + $color4pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color4pos + ", " + $color4 + ")";
	}

	/* dev note(hyun): gecko, ms, and opera uses the html5 syntax.  None support non-vendor specific key currently (2012-3-19). */
	background-image: unquote("-moz-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-webkit-gradient(linear, " + unquote($webkitBackground) + ")");
	background-image: unquote("-o-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-ms-linear-gradient(" + unquote($mozBackground) + ")");
	/* background-image: unquote("linear-gradient(" + unquote($mozBackground) + ")"); */	/* uncomment this someday - hyun */
}

@mixin clear-linear-gradient($background-color: transparent) {
	background-image: none;
	background-color: $background-color;
}

@mixin radial-gradient($color1: false, $color2: false) {
	background-image: $color1; /* Old browsers */
	background-image: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%); /* FF3.6+ */
	background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background-image: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Opera 12+ */
	background-image: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* IE10+ */
	background-image: radial-gradient(ellipse at center, $color1 0%,$color2 100%); /* W3C */
}
// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}
@mixin linear-gradient($solidFill, $start: top, $color1: false, $color1pos: false, $color2: false, $color2pos: false, $color3: false, $color3pos: false, $color4: false, $color4pos: false) {

	// output solid fill for browsers not supporting CSS gradients
	@if $solidFill {
		background-color: $solidFill;
	}

	$mozBackground : "";
	$webkitBackground : "";

	// add gradient start type
	@if $start == top {
		$webkitBackground : "0% 0%, 0% 100%";
	} @else if $start == left {
		$webkitBackground : "0% 0%, 100% 0%";
	} @else if $start == right {
		$webkitBackground : "100% 0%, 0% 0%";
	}
	$mozBackground : $start;

	// add colors and their positions
	@if $color1 {
		$mozBackground : $mozBackground + ", " + $color1 + " " + $color1pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color1pos + ", " + $color1 + ")";
	}
	@if $color2 {
		$mozBackground : $mozBackground + ", " + $color2 + " " + $color2pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color2pos + ", " + $color2 + ")";
	}
	@if $color3 {
		$mozBackground : $mozBackground + ", " + $color3 + " " + $color3pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color3pos + ", " + $color3 + ")";
	}
	@if $color4 {
		$mozBackground : $mozBackground + ", " + $color4 + " " + $color4pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color4pos + ", " + $color4 + ")";
	}

	/* dev note(hyun): gecko, ms, and opera uses the html5 syntax.  None support non-vendor specific key currently (2012-3-19). */
	background-image: unquote("-moz-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-webkit-gradient(linear, " + unquote($webkitBackground) + ")");
	background-image: unquote("-o-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-ms-linear-gradient(" + unquote($mozBackground) + ")");
	/* background-image: unquote("linear-gradient(" + unquote($mozBackground) + ")"); */	/* uncomment this someday - hyun */
}

@mixin clear-linear-gradient($background-color: transparent) {
	background-image: none;
	background-color: $background-color;
}

@mixin radial-gradient($color1: false, $color2: false) {
	background-image: $color1; /* Old browsers */
	background-image: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%); /* FF3.6+ */
	background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background-image: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Opera 12+ */
	background-image: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* IE10+ */
	background-image: radial-gradient(ellipse at center, $color1 0%,$color2 100%); /* W3C */
}

/*****************************
Primary & Secondary Wikia Buttons
These buttons are used everywhere on our wikis.
******************************/
a.wikia-button,
.wikia-single-button a,
.wikia-menu-button,
input[type="submit"]:not(.wds-button),
input[type="reset"],
input[type="button"],
.button,
button {
	@include linear-gradient($color-buttons, top, $color-button-highlight, 35%, $color-buttons, 65%);
	border: 1px solid $color-buttons;
	border-radius: 4px;
	color: $color-button-text;
	cursor: pointer;
	display: inline-block;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	height: 19px;
	line-height: 20px;
	margin: 0;
	padding: 0 10px;
	text-decoration: none;
	white-space: nowrap;
	&:hover {
		@include linear-gradient(darken($color-buttons, 4%), top, darken($color-button-highlight, 4%), 35%, darken($color-buttons, 4%), 65%);
		text-decoration: none;
	}
	&.active,
	&:active {
		@include linear-gradient(false, top, darken($color-buttons, 4%), 35%, darken($color-button-highlight, 4%), 65%);
		color: $color-button-text;
	}
	&[disabled] {
		cursor: default;
		opacity: .5;
		&:active {
			@include linear-gradient($color-buttons, top, $color-button-highlight, 35%, $color-buttons, 65%);
		}
	}
	img {
		vertical-align: text-bottom;
		&.chevron {
			margin-top: 1px;
			vertical-align: middle;
		}
	}
	&.secondary {
		@include linear-gradient($color-secondary-button, top, $color-secondary-button-highlight, 35%, $color-secondary-button, 65%);
		border: 1px solid $color-secondary-button-border;
		color: $color-text;
		&:hover {
			@include linear-gradient(darken($color-secondary-button, 4%), top, darken($color-secondary-button-highlight, 4%), 35%, darken($color-secondary-button, 4%), 65%);
		}
		&.active,
		&:active {
			@include linear-gradient($color-secondary-button, top, darken($color-secondary-button, 4%), 35%, darken($color-secondary-button-highlight, 4%), 65%);
		}
		img {
			&.chevron {
				border-color: $color-text transparent transparent;
			}
		}
	}
	&.big {
		font-size: 18px;
		height: 40px;
		line-height: 23px;
	}
	// BugId:19314 - fix for Firefox 4+
	// @see https://developer.mozilla.org/en/CSS/%3A-moz-focusring
	&:-moz-focusring {
		box-shadow: 0px 0px 1px 1px highlight;
	}
}

.wikia-menu-button-submit {
	input[type=submit] {
		border: none;
		height: 100%;
	}
}

// Border-box model: Inputs and buttons count border as part of height. Increase height. //
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	height: 21px;
}

// Fix Mozilla Button Sizing //
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}
$spread-radius: 0;
$inset: false;

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $color, $inset: $inset, $spread-radius: $spread-radius) {
	@if $inset {
		box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
	} @else {
		box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
	}
}

@mixin clear-box-shadow {
	box-shadow: none;
}
@mixin linear-gradient($solidFill, $start: top, $color1: false, $color1pos: false, $color2: false, $color2pos: false, $color3: false, $color3pos: false, $color4: false, $color4pos: false) {

	// output solid fill for browsers not supporting CSS gradients
	@if $solidFill {
		background-color: $solidFill;
	}

	$mozBackground : "";
	$webkitBackground : "";

	// add gradient start type
	@if $start == top {
		$webkitBackground : "0% 0%, 0% 100%";
	} @else if $start == left {
		$webkitBackground : "0% 0%, 100% 0%";
	} @else if $start == right {
		$webkitBackground : "100% 0%, 0% 0%";
	}
	$mozBackground : $start;

	// add colors and their positions
	@if $color1 {
		$mozBackground : $mozBackground + ", " + $color1 + " " + $color1pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color1pos + ", " + $color1 + ")";
	}
	@if $color2 {
		$mozBackground : $mozBackground + ", " + $color2 + " " + $color2pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color2pos + ", " + $color2 + ")";
	}
	@if $color3 {
		$mozBackground : $mozBackground + ", " + $color3 + " " + $color3pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color3pos + ", " + $color3 + ")";
	}
	@if $color4 {
		$mozBackground : $mozBackground + ", " + $color4 + " " + $color4pos;
		$webkitBackground : $webkitBackground + ", color-stop(" + $color4pos + ", " + $color4 + ")";
	}

	/* dev note(hyun): gecko, ms, and opera uses the html5 syntax.  None support non-vendor specific key currently (2012-3-19). */
	background-image: unquote("-moz-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-webkit-gradient(linear, " + unquote($webkitBackground) + ")");
	background-image: unquote("-o-linear-gradient(" + unquote($mozBackground) + ")");
	background-image: unquote("-ms-linear-gradient(" + unquote($mozBackground) + ")");
	/* background-image: unquote("linear-gradient(" + unquote($mozBackground) + ")"); */	/* uncomment this someday - hyun */
}

@mixin clear-linear-gradient($background-color: transparent) {
	background-image: none;
	background-color: $background-color;
}

@mixin radial-gradient($color1: false, $color2: false) {
	background-image: $color1; /* Old browsers */
	background-image: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%); /* FF3.6+ */
	background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background-image: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background-image: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* Opera 12+ */
	background-image: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%); /* IE10+ */
	background-image: radial-gradient(ellipse at center, $color1 0%,$color2 100%); /* W3C */
}


/*****************************
Wikia Menu Button
This list-based button is used in the page header for edit/history/delete actions
******************************/
.wikia-menu-button {
	*display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
	&:hover {
		@include linear-gradient($color-buttons, top, $color-button-highlight, 35%, $color-buttons, 65%);	/* fb:5020 - default hover overwrite, look below */
	}
	a:hover {
		text-decoration: none;
	}
	/* fb:5020 - highlight individual elements of menu button separately */
	>a, .drop, >li >a {
		display: inline-block;
		&:hover {
			@include linear-gradient(darken($color-buttons, 4%), top, darken($color-button-highlight, 4%), 35%, darken($color-buttons, 4%), 65%);
		}
		&:active {
			@include linear-gradient(false, top, darken($color-buttons, 4%), 35%, darken($color-button-highlight, 4%), 65%);
			color: $color-button-text;
		}
	}
	>a, >li >a {
		border-bottom-left-radius: 4px;
		border-right: 1px solid mix($color-button-text, $color-buttons, 40%);
		border-top-left-radius: 4px;
		color: $color-button-text;
		padding: 0 8px 0 5px;
	}
	.drop {
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-left: -3px;
		padding-left: 5px;
	}
	ul {
		background: $color-page;
		border: 1px solid $color-buttons;
		display: none;
		left: -1px;
		list-style: none;
		margin: 0;
		position: absolute;
		top: 19px;
		z-index: 100;
		@include box-shadow( 1px, 2px, 12px, darken($color-page,80%));
		a {
			color: $color-text;
			display: block;
			padding: 9px 9px 7px;
			&:hover {
				$dropdown-background: mix($color-buttons, $color-page, 20%);
				@if $is-dark-wiki {
					$dropdown-background: lighten($dropdown-background, 8%);
				}
				background-color: $dropdown-background;
			}
		}
		li {
			border-top: 1px solid $color-page-border;
			line-height: normal;
			&:first-child {
				border: 0;
			}
		}
	}
	.WikiaMenuElement {
		margin: 0;
	}
	.icon, img {
		vertical-align: text-bottom;
	}
	.chevron {
		border-top-color: $color-button-text;
		margin: 0 7px 0 1px;
	}
	&.active {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		ul {
			display: block;
		}
	}

}

/*****************************
Secondary Wikia Menu Button
This list-based button used for all additional actions
******************************/
.wikia-menu-button {
	&.secondary {
		border: 1px solid $color-page-border;
		*display: inline;
		list-style: none;
		margin: 0;
		position: relative;
		text-align: left;
		&:hover {
			@include linear-gradient($color-secondary-button, top, $color-secondary-button-highlight, 35%, $color-secondary-button, 65%);
		}
		&.combined {
			padding-left: 4px;
			&:hover {
				@include linear-gradient(darken($color-secondary-button, 4%), top, darken($color-secondary-button-highlight, 4%), 35%, darken($color-secondary-button, 4%), 65%);
			}
			.drop {
				&:hover {
					background: transparent;
				}
			}
		}
		>a,
		.drop,
		>li>a {
			color: $color-text;
			margin-top: -2px;
			&:hover {
				@include linear-gradient(darken($color-secondary-button, 4%), top, darken($color-secondary-button-highlight, 4%), 35%, darken($color-secondary-button, 4%), 65%);
			}
			&:active {
				@include linear-gradient($color-secondary-button, top, darken($color-secondary-button, 4%), 35%, darken($color-secondary-button-highlight, 4%), 65%);
			}
		}
		>a {
			border-right: 1px solid mix($color-text, $color-page-border, 0%);
		}
		ul {
			background: $color-page;
			border: 2px solid $color-page-border;
			display: none;
			left: -1px;
			list-style: none;
			margin: 0;
			position: absolute;
			top: 19px;
			z-index: 100;
			a {
				color: $color-text;
				display: block;
				&:hover {
					$dropdown-background: mix($color-buttons, $color-page, 20%);
					@if $is-dark-wiki {
						$dropdown-background: lighten($dropdown-background, 8%);
					}
					background-color: $dropdown-background !important;
				}
			}
			li {
				border-top: 1px solid $color-page-border;
				line-height: normal;
				&:first-child {
					border: 0;
				}
			}
		}
		&.active {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			ul {
				display: block;
			}
		}
	}
}
// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}

/*****************************
Wikia Chiclet Button
This list-based button is used in the page header for edit/history/delete actions
******************************/

$button-chiclet-opacity: .3;
@if $is-dark-wiki {
	$button-chiclet-opacity: .7;
}

.wikia-chiclet-button {
	background-image: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	height: 19px;
	opacity: $button-chiclet-opacity;
	padding: 0;
	position: relative;
	width: 19px;
	img {
		height: 15px;
		left: 2px;
		position: absolute;
		top: 2px;
		width: 15px;
	}
	&:hover {
		opacity: 1;
		background-image: none;
	}
}
button.wikia-chiclet-button {
	line-height: 1px;
	img {
		position: static;
		vertical-align: middle;
	}
}

.wikia-button.loginToEditProtectedPage{
	padding: 0px 5px;
	img {
		margin-right: 8px;
	}
}
/*****************************
Facebook style button
******************************/
a.wikia-button-facebook,
a.wikia-button.wikia-button-facebook {
	border-color: #afbdd6;
	border-radius: 2px;
	color: #fff;
	font-weight: bold;
	height: 21px;
	padding: 0 6px;
	&,
	&:active,
	&:hover {
		@include linear-gradient(#5E7BB2, top, #5E7BB2, 0%, #3C62A1, 100%);
	}
	> img {
		border-right: solid 1px #6381b4;
		margin-right: 6px;
	}
}
$wordmark-font: get_command_line_param("wordmark-font", "default");

@if $wordmark-font == "cpmono" {
	@font-face {
		font-family: 'CPMono_v07Bold';
		src: url('/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.woff') format('woff'), url('/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/cpmono/CPMono_v07_Bold-webfont.svg#webfont8SZ0NIeo') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "fontin" {
	@font-face {
		font-family: 'FontinSansBold';
		src: url('/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.woff') format('woff'), url('/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/fontin/fontin_sans_b_45b-webfont.svg#webfontaOEEV2k6') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "garton" {
	@font-face {
		font-family: 'GartonMedium';
		src: url('/skins/oasis/fonts/garton/garto16-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/garton/garto16-webfont.woff') format('woff'), url('/skins/oasis/fonts/garton/garto16-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/garton/garto16-webfont.svg#webfont9jUXe5iO') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "idolwild" {
	@font-face {
		font-family: 'IdolwildRegular';
		src: url('/skins/oasis/fonts/idolwild/idolwild-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/idolwild/idolwild-webfont.woff') format('woff'), url('/skins/oasis/fonts/idolwild/idolwild-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/idolwild/idolwild-webfont.svg#webfont2KYBVKLT') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "imfell" {
	@font-face {
		font-family: 'IMFELLDWPicaPRORegular';
		src: url('/skins/oasis/fonts/imfell/fepirm27c-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/imfell/fepirm27c-webfont.woff') format('woff'), url('/skins/oasis/fonts/imfell/fepirm27c-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/imfell/fepirm27c-webfont.svg#webfontkY4YPcYZ') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "josefin" {
	@font-face {
		font-family: 'JosefinSansStdLight';
		src: url('/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.woff') format('woff'), url('/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/josefin/JosefinSansStd-Light-webfont.svg#webfontmMSjIQwC') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "megalopolis" {
	@font-face {
		font-family: 'MEgalopolisExtraRegular';
		src: url('/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.woff') format('woff'), url('/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/megalopolis/megalopolisextra-webfont.svg#webfont0XV5Gd7h') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "orbitron" {
	@font-face {
		font-family: 'OrbitronMedium';
		src: url('/skins/oasis/fonts/orbitron/orbitron-medium-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/orbitron/orbitron-medium-webfont.woff') format('woff'), url('/skins/oasis/fonts/orbitron/orbitron-medium-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/orbitron/orbitron-medium-webfont.svg#webfont5FiGFJOa') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "pixiefont" {
	@font-face {
		font-family: 'PixieFontRegular';
		src: url('/skins/oasis/fonts/pixiefont/PixieFont-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/pixiefont/PixieFont-webfont.woff') format('woff'), url('/skins/oasis/fonts/pixiefont/PixieFont-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/pixiefont/PixieFont-webfont.svg#webfont78rOR6Do') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "prociono" {
	@font-face {
		font-family: 'ProcionoRegular';
		src: url('/skins/oasis/fonts/prociono/Prociono-Regular-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/prociono/Prociono-Regular-webfont.woff') format('woff'), url('/skins/oasis/fonts/prociono/Prociono-Regular-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/prociono/Prociono-Regular-webfont.svg#webfontnTm7Rj2p') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "tangerine" {
	@font-face {
		font-family: 'TangerineRegular';
		src: url('/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.woff') format('woff'), url('/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/tangerine/Tangerine_Regular-webfont.svg#webfonthdkJyIIt') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "titillium" {
	@font-face {
		font-family: 'TitilliumText22LRegular';
		src: url('/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.woff') format('woff'), url('/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/titillium/TitilliumText22L003-webfont.svg#webfontCVZ9BHQN') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "veggieburger" {
	@font-face {
		font-family: 'VeggieburgerBold';
		src: url('/skins/oasis/fonts/veggieburger/VeggiBol-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/veggieburger/VeggiBol-webfont.woff') format('woff'), url('/skins/oasis/fonts/veggieburger/VeggiBol-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/veggieburger/VeggiBol-webfont.svg#webfont2sUWj2TL') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}


@if $wordmark-font == "yanone" {
	@font-face {
		font-family: 'YanoneKaffeesatzRegular';
		src: url('/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.eot'); /* $wgResourceBasePath */
		src: local('☺'), url('/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.woff') format('woff'), url('/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'), url('/skins/oasis/fonts/yanone/YanoneKaffeesatz-Regular-webfont.svg#webfontlKPF1zIT') format('svg'); /* $wgResourceBasePath */
		font-weight: normal;
		font-style: normal;
	}
}
// Base variables
// @FIXME Breakpoints defined here are OUTDATED
// @see _wds-breakpoints.scss for up-to-date definition

$wds-breakpoint-m: 768px !default;
$wds-breakpoint-l: 1024px !default;
$wds-breakpoint-xl: 1084px !default;
$wds-breakpoint-xxl: 1596px !default;

$wds-screen: 'only screen';

$wds-breakpoint-s-up: "#{$wds-screen}" !default;
$wds-breakpoint-s-only: "#{$wds-screen} and (max-width:#{$wds-breakpoint-m - 1})" !default;

$wds-breakpoint-m-down: "#{$wds-screen} and (max-width:#{$wds-breakpoint-l - 1})" !default;
$wds-breakpoint-m-up: "#{$wds-screen} and (min-width:#{$wds-breakpoint-m})" !default;
$wds-breakpoint-m-only: "#{$wds-screen} and (min-width:#{$wds-breakpoint-m}) and (max-width:#{$wds-breakpoint-l - 1})" !default;

$wds-breakpoint-l-down: "#{$wds-screen} and (max-width:#{$wds-breakpoint-xl - 1})" !default;
$wds-breakpoint-l-up: "#{$wds-screen} and (min-width:#{$wds-breakpoint-l})" !default;
$wds-breakpoint-l-only: "#{$wds-screen} and (min-width:#{$wds-breakpoint-l}) and (max-width:#{$wds-breakpoint-xl - 1})" !default;

$wds-breakpoint-xl-up: "#{$wds-screen} and (min-width:#{$wds-breakpoint-xl})" !default;
$wds-breakpoint-xl-only: "#{$wds-screen} and (min-width:#{$wds-breakpoint-xl}) and (max-width:#{$wds-breakpoint-xxl - 1})" !default;

$wds-breakpoint-xxl-up: "#{$wds-screen} and (min-width:#{$wds-breakpoint-xxl})" !default;

/////////////////////////
// # Wikia Brand Colors
// ## Corporate Colors
$wds-color-blue-gray: #c5ced9;
$wds-color-dark-blue-gray: #39424d;
$wds-color-dark-blue: #092344;
$wds-color-faint-blue-gray: #f2f6fa;
$wds-color-light-blue-gray: #e6ebf2;
$wds-color-light-blue: #1a5eb8;
$wds-color-slate-gray: #656e78;

// ## Vertical Colors
$wds-color-books: #ff7f26;
$wds-color-comics: #ff5400;
$wds-color-games: #94d11f;
$wds-color-lifestyle: #ffd000;
$wds-color-movies: #09d3bf;
$wds-color-music: #c819ad;
$wds-color-tv: #00b7e0;

// ## Alerts
$wds-color-alert: #e81a3f;
$wds-color-message: #008c8f;
$wds-color-success: #018c30;
$wds-color-warning: #de5e33;

// ## Social network colors
$wds-color-social-facebook: #3b5998;
$wds-color-social-googleplus: #dd4b39;
$wds-color-social-instagram: #e02d69;
$wds-color-social-line: #00c300;
$wds-color-social-linkedin: #0077b5;
$wds-color-social-meneame: #ff6400;
$wds-color-social-nk: #4077a7;
$wds-color-social-odnoklassniki: #f96900;
$wds-color-social-reddit: #ff4500;
$wds-color-social-tumblr: #34465d;
$wds-color-social-twitter: #1da1f2;
$wds-color-social-vkontakte: #587ca3;
$wds-color-social-wykop: #fb803f;
$wds-color-social-weibo: #ff8140;
$wds-color-social-youtube: #cd201f;

/////////////////////////
// # Fandom Colors
$wds-color-link: #088488;

$wds-fandom-color-aqua: #00d6d6;
$wds-fandom-color-black: #0e191a;
$wds-fandom-color-button-background: #00cdd0;
$wds-fandom-color-coral: #ff776d;
$wds-fandom-color-dark-gray: #5f7a7b;
$wds-fandom-color-light-gray: #f2f5f5;
$wds-fandom-color-link: $wds-color-link;
$wds-fandom-color-link-hover: #005252;
$wds-fandom-color-mid-light-gray: #bed1cf;
$wds-fandom-color-middle-gray: #7f9998;
$wds-fandom-color-navy: #002a32;
$wds-fandom-color-purple: #5a2e4a;
$wds-fandom-color-red: #ee1a41;
$wds-fandom-color-beige: #eeecdc;
$wds-fandom-color-yellow: #dfec24;

/////////////////////////
// # Theming Colors
// ## Color Names
$wds-color-black: #1a1a1a;
$wds-color-dark-gray: #333;
$wds-color-faint-gray: #ccc;
$wds-color-gold: #e3bd00;
$wds-color-light-gray: #999;
$wds-color-medium-gray: #666;
$wds-color-mist-gray: #e6e6e6;
$wds-color-night-sky: #262626;
$wds-color-off-white: #f6f6f6;
$wds-color-white: #fff;

// ## Light Theme
$wds-color-light-c1: $wds-color-white;
$wds-color-light-c2: $wds-color-off-white;
$wds-color-light-c3: $wds-color-mist-gray;
$wds-color-light-c4: $wds-color-faint-gray;
$wds-color-light-c5: $wds-color-light-gray;
$wds-color-light-c6: $wds-color-dark-gray;
$wds-color-light-c7: $wds-color-medium-gray;
$wds-color-light-c8: $wds-color-gold;

// ## Dark Theme
$wds-color-dark-c1: $wds-color-night-sky;
$wds-color-dark-c2: $wds-color-black;
$wds-color-dark-c3: $wds-color-dark-gray;
$wds-color-dark-c4: $wds-color-medium-gray;
$wds-color-dark-c5: $wds-color-light-gray;
$wds-color-dark-c6: $wds-color-faint-gray;
$wds-color-dark-c7: $wds-color-white;
$wds-color-dark-c8: $wds-color-gold;

/////////////////////////
// # Gamepedia Colors
$wds-gamepedia-color-orange: #f58120;

$wds-icon-size: 24px;
$wds-icon-small-size: 18px;
$wds-icon-tiny-size: 12px;

$wds-player-icon-play-tiny: 30px;
$wds-player-icon-play-small: 42px;
$wds-player-icon-play-medium: 60px;
$wds-player-icon-play-large: 90px;
$wds-player-icon-play-xl: 120px;
$wds-player-icon-play-xxl: 150px;

// Font family - see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
$wds-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

// Line height
$wds-line-height: 1.5em;

// Typescale sizes
// @deprecated, use $wds-font-size- instead
$wds-typescale-size-minus-3: 10px;
$wds-typescale-size-minus-2: 12px;
$wds-typescale-size-minus-1: 14px;
$wds-typescale-size-base: 16px;
$wds-typescale-size-plus-1: 18px;
$wds-typescale-size-plus-2: 24px;
$wds-typescale-size-plus-3: 28px;
$wds-typescale-size-plus-4: 36px;
$wds-typescale-size-plus-5: 40px;
$wds-typescale-size-plus-6: 48px;
$wds-typescale-size-plus-7: 54px;

// Fandom Font family
$wds-fandom-font-family: Rubik, Helvetica, Arial, sans-serif;

// Fandom font weights
// @deprecated, use $wds-font-weight- instead
$wds-fandom-font-weight-light: 300;
$wds-fandom-font-weight-regular: 400;
$wds-fandom-font-weight-medium: 500;
$wds-fandom-font-weight-bold: 700;
$wds-fandom-font-weight-black: 900;

// Font weights
$wds-font-weight-light: 300;
$wds-font-weight-normal: 400;
$wds-font-weight-medium: 500;
$wds-font-weight-bold: 700;
$wds-font-weight-black: 900;

// Line heights
$wds-line-height-none: 1;
$wds-line-height-tight: 1.25;
$wds-line-height-normal: 1.5;
$wds-line-height-loose: 1.75;

// Font sizes
$wds-font-size-xxs: 10px;
$wds-font-size-xs: 12px;
$wds-font-size-s: 14px;
$wds-font-size-base: 16px;
$wds-font-size-l: 18px;
$wds-font-size-xl: 24px;
$wds-font-size-xxl: 28px;
$wds-font-size-3xl: 36px;
$wds-font-size-4xl: 52px;

$wds-only-screen: 'only screen';

// breakpoint sizes
$wds-breakpoint-small: 0;
$wds-breakpoint-medium: 768px;
$wds-breakpoint-large: 1024px;
$wds-breakpoint-xlarge: 1280px;
$wds-breakpoint-xxlarge: 1500px;

// content well margins
$wds-content-well-margins: 18px;

// how much space is available on any breakpoint
$wds-breakpoint-medium-available-width: $wds-breakpoint-medium - 2 * $wds-content-well-margins;
$wds-breakpoint-large-available-width: $wds-breakpoint-large - 2 * $wds-content-well-margins;
$wds-breakpoint-xlarge-available-width: $wds-breakpoint-xlarge - 2 * $wds-content-well-margins;
$wds-breakpoint-xxlarge-available-width: $wds-breakpoint-xxlarge - 2 * $wds-content-well-margins;

// "only" breakpoints
$wds-breakpoint-small-only:   "#{$wds-only-screen} and (max-width: #{$wds-breakpoint-medium - 1})";
$wds-breakpoint-medium-only:  "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-medium}) and (max-width: #{$wds-breakpoint-large - 1})";
$wds-breakpoint-large-only:   "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-large}) and (max-width: #{$wds-breakpoint-xlarge - 1})";
$wds-breakpoint-xlarge-only:  "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-xlarge}) and (max-width: #{$wds-breakpoint-xxlarge - 1})";
$wds-breakpoint-xxlarge-only: "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-xxlarge})";

// "up" breakpoints - note: we keep small-up and xxlarge-up for compatibility
$wds-breakpoint-small-up:   "#{$wds-only-screen}";
$wds-breakpoint-medium-up:  "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-medium})";
$wds-breakpoint-large-up:   "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-large})";
$wds-breakpoint-xlarge-up:  "#{$wds-only-screen} and (min-width: #{$wds-breakpoint-xlarge})";
$wds-breakpoint-xxlarge-up: $wds-breakpoint-xxlarge-only;

// "down" breakpoints - note: we keep small-down and xxlarge-down for compatibility
$wds-breakpoint-small-down:   $wds-breakpoint-small-only;
$wds-breakpoint-medium-down:  "#{$wds-only-screen} and (max-width: #{$wds-breakpoint-large - 1})";
$wds-breakpoint-large-down:   "#{$wds-only-screen} and (max-width: #{$wds-breakpoint-xlarge - 1})";
$wds-breakpoint-xlarge-down:  "#{$wds-only-screen} and (max-width: #{$wds-breakpoint-xxlarge - 1})";
$wds-breakpoint-xxlarge-down: "#{$wds-only-screen}";

$wds-grid-gap: 10px;
$wds-grid-columns: 12;

// how much width is taken by gaps
$wds-grid-gap-space: $wds-grid-gap * ($wds-grid-columns - 1);

// Z-Index Scale
// - - - - - - - - - - - - - - - - - - - - - - - - -

// Never --ever-- implement z-index that doesn't use this scale, if you have a use-case that
// for some reason falls out of this scale, ask for guidance before implementing one-offs.
//
// Copied from:
// https://github.com/Wikia/style-guide/blob/db89f1a3940c8f8302309e7d34346a605d5285f8/src/scss/lib/_settings.scss

$z-min : -1;
$z-1   : 100;
$z-2   : 200;
$z-3   : 300;
$z-4   : 400;
$z-5   : 500;
$z-6   : 600;
$z-7   : 700;
$z-8   : 800;
$z-9   : 900;
$z-max : 10000;

$wds-rounded-corner-radius: 3px;
// Component variables
$wds-button-transition-duration: 300ms;
$wds-community-header-background-height: 105px;
// Keep in sync with ThemeSettings::BACKGROUND_HEIGHT
$wds-community-header-background-height-small-breakpoint: 115px;
$wds-community-header-background-width: 430px;
// Keep in sync with ThemeSettings::BACKGROUND_WIDTH
$wds-community-header-background-width-small-breakpoint: 471px;
$wds-dropdown-border-radius: 4px;
$wds-dropdown-border-width: 1px;
$wds-dropdown-height: 270px;
$wds-dropdown-padding: 18px;
$wds-global-navigation-height: 55px;
$wds-list-item-vertical-padding: 11px;

$wds-button-horizontal-padding: 18px;
$wds-button-vertical-padding: 7px;
$wds-button-horizontal-gap: 6px;

$wds-dialog-padding: 24px;

// global navigation variables
$search-transition-duration: 200ms;

body {
	background: #F5F5F5;
	color: #666;
	font-family: $wds-font-family;
	font-size: 13px;
	margin: 0;
	overflow: hidden;
}

.Designer {
	height: $height-designer;
	position: relative;
	h1 {
		font-size: 18px;
	}
	h2 {
		font-size: 13px;
	}
	.form-questionmark {
		background: url(/extensions/wikia/ThemeDesigner/images/question-light.png); /* $wgResourceBasePath */
		height: 12px;
		width: 12px;
		display: inline-block;
	}

}

.Navigation {
	@include linear-gradient(transparent, left, #F5F5F5, 95%, #CCC, 100%);
	height: $height-designer;
	left: 50%;
	margin-left: -500px;
	position: absolute;
	width: 100px;
	li {
		@include linear-gradient(transparent, left, #F5F5F5, 0%, #E1E1E1, 95%, #CCC, 100%);
		border-bottom: 1px solid $color-borders;
		&.selected {
			@include box-shadow(-2px, 0, 2px, #CCC);
			background: #FFF;
			a {
				color: #2070AD;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
	a {
		color: #67a7d7;
		display: block;
		font-weight: bold;
		padding: 12px 10px;
		&:hover {
			text-decoration: underline;
		}
	}
}

.Toolbar {
	@include linear-gradient(#cfe1ed, top, #cfe1ed, 0%, #a6c4dc, 100%);
	border-bottom: 1px solid #999;
	bottom: 0;
	height: 45px;
	position: absolute;
	width: 100%;
	.inner {
		margin: 0 auto;
		position: relative;
		width: 1000px;
		button {
			position: absolute;
			top: 12px;
			&.save {
				right: 130px;
				*width: 150px;
			}
			&.cancel {
				right: 10px;
				width: 100px;
			}
		}
		.history {
			cursor: pointer;
			display: inline-block;
			font-size: 10px;
			left: 20px;
			position: relative;
			top: 10px;
			.revisions {
				background: #7392a7;
				border: 1px solid #fff;
				color: #fff;
				display: inline-block;
				font-size: 16px;
				margin-right: 3px;
				padding: 2px 5px 0;
			}
			.chevron {
				border-color: #2070AD transparent transparent;
			}
			ul {
				@include box-shadow(0, 4px, 6px, #999);
				background-color: #fff;
				border: 3px solid #eee;
				cursor: normal;
				display: none;
				left: -5px;
				min-width: 150px;
				padding: 5px;
				position: absolute;
				top: -5px;
				li {
					border-top: 1px solid #eee;
					cursor: pointer;
					padding: 5px;
					white-space: nowrap;
					&:first-child {
						border-top: none;
					}
					&:hover {
						background-color: #cce1ef;
					}
					.wikia-chiclet-button {
						margin-right: 3px;
						vertical-align: middle;
						img {
							background: url(/extensions/wikia/ThemeDesigner/images/icon-return.png) top left transparent no-repeat; /* $wgResourceBasePath */
							height: 12px;
							left: 3px;
							position: relative;
							top: 3px;
							width: 14px;
						}
					}
				}
			}
		}
	}
	.mode {
		color: #2070AD;
		font-size: 21px;
		left: 5px;
		position: relative;
		top: 12px;
	}
}

section {
	background: #FFF;
	border-right: 1px solid $color-borders;
	display: none;
	height: $height-designer;
	left: 50%;
	margin-left: -400px;
	position: absolute;
	width: 900px;
}

fieldset {
	border-right: 1px solid $color-borders;
	float: left;
	height: 165px;
	margin: 15px 0 15px 14px;
	&:last-child {
		border-right: 0;
	}
}

h1 {
	margin-bottom: 8px;
}

.PreviewFrame {
	height: 100px; /* initial settings - JS will change it */
	width: 100%;
}

#ColorTester {
	background-color: transparent;
	display: none;
}

$spread-radius: 0;
$inset: false;

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $color, $inset: $inset, $spread-radius: $spread-radius) {
	@if $inset {
		box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
	} @else {
		box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
	}
}

@mixin clear-box-shadow {
	box-shadow: none;
}

$color-chevron: #4175A7;
$color-selected-thumbnail: #72ADD5;

.ThemeTab {
	.slider {
		left: 35px;
		overflow: hidden;
		position: absolute;
		top: 20px;
		width: 760px;
	}
	ul {
		width: 2000px;
	}
	li {
		float: left;
		padding: 15px;
		&.selected {
			label {
				font-weight: bold;
			}
			img {
				@include box-shadow(0px, 0px, 5px, $color-selected-thumbnail);
				border-color: $color-selected-thumbnail;
			}
		}
	}
	label {
		display: block;
		padding: 5px;
	}
	img {
		border: 1px solid $color-borders;
		cursor: pointer;
		display: block;
		height: 100px;
		width: 120px;
	}
	.chevron {
		border-style: solid;
		border-width: 13px;
		cursor: pointer;
		height: 0;
		position: absolute;
		width: 0;
		&.disabled {
			cursor: default;
		}
	}
	.previous {
		border-color: transparent $color-chevron transparent transparent;
		left: 5px;
		top: 98px;
		&.disabled {
			border-color: transparent #CCC transparent transparent;
		}
	}
	.next {
		border-color: transparent transparent transparent $color-chevron;
		left: 799px;
		top: 98px;
		&.disabled {
			border-color: transparent transparent transparent #CCC;
		}
	}
}
.CustomizeTab {
	.background {
		max-width: 430px;

		.wrap-color {
			max-width: 50px;
		}

		.wrap-middle-color {
			max-width: 80px;
			position: relative;

			.middle-color-mask {
				display: none;
				height: 52px;
				position: absolute;
				bottom: 3px;
				width: 52px;
			}
		}

		.wrap-background {
			max-width: 140px;

			label {
				display: block;
				float: left;
			}
		}
		.not-split-option {
			display: none;
			float: left;

			.form-questionmark {
				margin: 5px 0 0 5px;
			}
		}
	}

	.page {
		max-width: 470px;
	}

	li {
		float: left;
		margin-right: 5px;

		img {
			border: 1px solid $color-borders;
			cursor: pointer;
			display: block;
			height: 50px;
			margin: 3px 0;
			width: 50px;
		}

		.background-image, .community-header-background-image {
			width: 120px;
		}

		.background-image {
			height: 65px;
		}

		.community-header-background-image {
			height: 33px;
		}

		input {
			vertical-align: middle;
		}
	}

	ul {
		@include clearfix;
	}
}

.OpacitySlider {
	margin-top: 12px;
	width: 84px;
}

.community-header-size-text {
	font-style: italic;
	text-align: center;
}

// Generic colors
$color-black: #000;
$color-white: #fff;
$color-red: #f00;

// Default colors
$color-links-default: #006CB0;
$color-header-default: #3a5766;
$color-body-default: #bacdd8;

// Main Color Variables //
$color-body: get_command_line_param('color-body', $color-body-default);
$color-body-middle: get_command_line_param('color-body-middle', $color-body); // default: same as color-body
$color-page: get_command_line_param('color-page', $color-white); // default: white
$color-buttons: get_command_line_param('color-buttons', $color-links-default); // default: blue
$color-community-header: get_command_line_param('color-community-header', $color-buttons); // default: blue as for buttons
$color-links: get_command_line_param('color-links', $color-links-default); // default: blue
$color-header: get_command_line_param('color-header', $color-header-default);
$background-image: get_command_line_param('background-image', '/skins/oasis/images/themes/oasis.png'); /* wgResourceBasePath */
$page-opacity: get_command_line_param('page-opacity', 100) / 100;	// default: 1


// Corporate colors
$color-wikia-light-blue: #1a5eb8;
$color-corporate-buttons: $color-wikia-light-blue;
$color-corporate-button-highlight: lighten($color-corporate-buttons, 10%);
$color-corporate-button-text: $color-white;

// Verticals colors
$color-wikiahome-videogames: #8ca038;
$color-wikiahome-entertainment: #07b2e0;
$color-wikiahome-lifestyle: #f60;
$color-wikiahome-community: #092140;
$color-wikiahome-community-bright: #ff5400;
$color-wikiahome-community-fawn: #ff7f26;

// Darkened verticals colors for buttons
$color-wikiahome-videogames-dark: #607727;
$color-wikiahome-entertainment-dark: #0496bd;
$color-wikiahome-lifestyle-dark: #c75000; // TODO: replace with value verified by design

$color-wikiahome-community-dark: #141e24;

$color-wikiahome-border-primary-brand-color: #c7d1d8;

////////// DO NOT CHANGE PER THEME - BASED ON ABOVE VALUES //////////
// Mixing colors

// Theme
$sprite-theme: 'dark';
$is-dark-wiki: false;
@if lightness($color-page) < 50 {
	$sprite-theme: 'light';
	$is-dark-wiki: true;
}

// Text color
$color-text-dark: #3a3a3a;
$color-text-light: #D5D4D4;

$color-text: $color-text-dark;
@if $is-dark-wiki {
	$color-text: $color-text-light;
}

// Generic Error text color
$color-text-error: mix($color-red, #d4d4d4, 75%);
@if $is-dark-wiki {
	$color-text-error: mix($color-red, #2b2b2b, 60%);
}

// Opposite page color (use this as the mixing value to darken, lighten towards the opposite of page darkness)
$color-page-opposite: $color-black;
@if $is-dark-wiki {
	$color-page-opposite: $color-white;
}

// Alternate text (used for secondary information, less important)
$color-alternate-text: mix($color-page, $color-black, 50%);
@if $is-dark-wiki {
	$color-alternate-text: mix($color-page, $color-white, 50%);
}

// GlobalHeader
$color-header-alt: mix($color-header, $color-black, 25%);
$color-header-text: $color-white;
@if lightness($color-header) > 75 {
	$color-header-text: black;
}
$color-menu-highlight: mix($color-links, $color-page, 20%);

// Tools Menu
$color-tools-nav: mix($color-buttons, $color-page, 20%);
@if lightness($color-page) < 50 {
	$color-tools-nav: lighten($color-tools-nav, 8%);
}

// Modules
// Rail modules now use solid colors, but there are still components that use the module highlight and shadow vars
$color-module-background: $color-page;
@if $is-dark-wiki {
	$color-module-background: mix($color-page, $color-white, 97%);
}
$color-module-highlight: lighten($color-page, 2%);
$color-module-shadow: darken($color-page, 5%);

// Page Borders
$color-page-border: mix($color-page, $color-black, 80%);
@if $is-dark-wiki {
	$color-page-border: mix($color-page, $color-white, 80%);
}
$color-page-border-subtle: mix($color-page-border, $color-page, 50%);


$color-page-shadow: #333;
@if $is-dark-wiki {
	$color-page-shadow: $color-black;
}

// Buttons
$color-button-highlight: lighten($color-buttons, 10%);
$color-button-text: $color-white;
@if lightness($color-buttons) > 49 {
	$color-button-text: $color-black;
}
$color-secondary-button-highlight: mix($color-page, $color-white, 94%);
$color-secondary-button: mix($color-page, $color-black, 90%);
$color-secondary-button-border: mix($color-page, $color-black, 80%);

@if lightness($color-page) < 50 {
	$color-secondary-button-highlight: lighten($color-page, 8%);
	$color-secondary-button: lighten($color-page, 3%);
	$color-secondary-button-border: lighten($color-page, 10%);
}

// Speech Bubbles (Article Comments, Wall)
$color-speech-bubble: mix($color-text, $color-page, 5%);
$color-speech-bubble-alt: mix($color-links, $color-page, 5%);

$color-speech-bubble-current: $color-speech-bubble;

@if $is-dark-wiki {
	$color-speech-bubble-current: mix(#ff63f6, $color-speech-bubble, 10%);
} @else {
	$color-speech-bubble-current: mix(#ff4481, $color-speech-bubble, 10%);
}

// TOC
$color-article-toc-background: transparent;
$color-article-toc-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-toc-border: lighten(darken($color-page, 100%), 25%);
}

// Images
$color-article-thumb-background: darken($color-page, 5%);
$color-article-thumb-border: darken(lighten($color-page, 100%), 15%);
@if $is-dark-wiki {
	$color-article-thumb-border: lighten(darken($color-page, 100%), 25%);
}

// Headline border
$color-headline-border: $color-page-border;

// User pages tabs
$color-tab-background: $color-page-border;
$color-tab-background-top: mix($color-tab-background, $color-page, 50%);
$color-tab-background-bottom: mix($color-tab-background, $color-page, 80%);
$color-active-tab-background-top: mix($color-buttons, $color-page, 50%);
$color-active-tab-background-bottom: mix($color-buttons, $color-page, 80%);
$color-active-tab-shadow: #4E4E4E;
$color-tab-hover-background: mix($color-links, $color-page, 30%);

// Notifications
$color-confirmation-background: #90e491;
$color-confirmation-text: #002a39;
$color-notification-background: $color-buttons;
$color-notification-highlight: $color-button-highlight;
$color-notification-text: $color-button-text;
$color-notification-links: $color-button-text;
$color-notification-details-background: darken($color-notification-background, 10%);
$color-notification-details-text: $color-button-text;

//Error handling
$color-error: #f33;

//Diff and History pages
$color-pagehistory: darken($color-page, 5%);
@if $is-dark-wiki {
	$color-pagehistory: lighten($color-page, 15%);
}
$color-diff-text: darken($color-text-dark, 5%);
@if $is-dark-wiki {
	$color-diff-text: lighten($color-text-light, 15%);
}
$color-diffchange-text: $color-diff-text;

$color-diff-context: darken($color-page, 3%);
@if $is-dark-wiki {
	$color-diff-context: lighten($color-page, 5%);
}
$color-diff-context-border: #e6e6e6;
@if $is-dark-wiki {
	$color-diff-context-border: #444;
}

$color-diff-addedline-border: #a3d3ff;
@if $is-dark-wiki {
	$color-diff-addedline-border: #293e4f;
}
$color-diff-deletedline-border: #ffe49c;
@if $is-dark-wiki {
	$color-diff-deletedline-border: #964c4c;
}

$color-diff-addedline-diffchange: #d8ecff;
@if $is-dark-wiki {
	$color-diff-addedline-diffchange: #293e4f;
}
$color-diff-deletedline-diffchange: #feeec8;
@if $is-dark-wiki {
	$color-diff-deletedline-diffchange: #964c4c;
}

// Vertical colors
$color-vertical-books: #ff7f26;
$color-vertical-comics: #ff5400;
$color-vertical-anime: #ff5400;
$color-vertical-games: #94d11f;
$color-vertical-lifestyle: #ffd000;
$color-vertical-movies: #09d3bf;
$color-vertical-music: #c819ad;
$color-vertical-tv: #00b7e0;


$color-vertical-books-secondary: #e76400;
$color-vertical-comics-secondary: #e1390b;
$color-vertical-anime-secondary: #e1390b;
$color-vertical-games-secondary: #76bf06;
$color-vertical-lifestyle-secondary: #ffad00;
$color-vertical-movies-secondary: #09b3a6;
$color-vertical-music-secondary: #981093;
$color-vertical-tv-secondary: #008cce;

//Site modernizations (ticket CONCF-119) module background
$color-unified-module-background: mix($color-page, $color-black, 90%);
@if $is-dark-wiki {
	$color-unified-module-background: mix($color-page, $color-white, 90%);
}
$spread-radius: 0;
$inset: false;

@mixin box-shadow($offset-x, $offset-y, $blur-radius, $color, $inset: $inset, $spread-radius: $spread-radius) {
	@if $inset {
		box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
	} @else {
		box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
	}
}

@mixin clear-box-shadow {
	box-shadow: none;
}

$previewheight: 65px;
$previewwidth: 250px;

.WordmarkTab {
	fieldset {
		width: 260px;
		height: 175px;
	}
	button, input[type='submit'] {
		margin-top: 5px;
	}
	h2 {
		margin-bottom: 5px;
	}
	.graphic {
		padding: 0 15px;
		.preview {
			border: 1px solid #eaeaea;
			color: #CCC;
			height: $previewheight;
			margin-top: 10px;
			position: relative;
			width: $previewwidth;
			.wordmark {
				cursor: pointer;
				&.selected {
					@include box-shadow(0px, 0px, 5px, #72ADD5);
					border-color: #72ADD5;
					cursor: default;
				}
			}
			a {
				background: #FFF;
				color: #666;
				display: none;
				padding: 2px;
				position: absolute;
				right: 0;
				top: 0;
			}
			span {
				display: block;
				text-align: center;
				line-height: $previewheight;
			}
			&.active {
				border: 0;
				float: left;
				width: auto;
				span {
					display: none;
				}
				&:hover {
					a {
						display: block;
					}
				}
			}
		}
	}
	.favicon {
		padding: 0 15px;
		.preview {
			color: #CCC;
			border: 1px solid #eaeaea;
			display: block;
			float: left;
			margin-top: 10px;
			height: 16px;
			overflow: visible;
			width: 16px;
			img {
				float: left;
				margin-right: 5px;
			}
			span {
				display: block;
				margin-left: 21px;
			}
			a {
				background: #FFF;
				color: #666;
				display: none;
			}
			&.active {
				border: 0;
				width: $previewwidth;
				span {
					display: none;
				}
				&:hover {
					a {
						display: block;
					}
				}
			}
		}
	}
	.controls {
		@include clearfix;
		margin-bottom: 10px;
		li {
			float: left;
			margin-right: 10px;
		}
	}
	#wordmark-edit-button {
		margin-top: 15px;
	}

	input.file-upload {
		width: 100%;
	}

}

body .tooltip {
	.tooltip-inner {
		background-color: white;
		border: 1px solid #EAEAEA;
	}
	&.right .tooltip-arrow {
		border-right: 5px solid white;
	}
}
.ThemeDesignerPicker {
	@include box-shadow(0, 0, 10px, #CCC);
	background: #FFF;
	border: 5px solid #accfe5;
	display: none;
	padding-bottom: 10px;
	position: absolute;
	width: 235px;
	z-index: 3;
	.color {
		display: none;
		.swatches {
			background: url(/extensions/wikia/ThemeDesigner/images/color_shadow.png) bottom center no-repeat; /* $wgResourceBasePath */
		}
	}
	.image, .community-header {
		display: none;
		.swatches {
			background: url(/extensions/wikia/ThemeDesigner/images/image_shadow.png) bottom center no-repeat; /* $wgResourceBasePath */
			li, img {
				height: 50px;
				width: 60px;
			}
			.no-image {
				background: #EEE url(/extensions/wikia/ThemeDesigner/images/void_button.png) 50% 27px no-repeat; /* $wgResourceBasePath */
				font-size: 9px;
				text-align: center;
			}
		}
	}
	&.color {
		display: block;
		.color {
			display: block;
		}
	}
	&.image, &.community-header {
		display: block;
		width: 311px;
	}

	&.image {
		.image {
			display: block;
		}
	}

	&.community-header {
		.community-header {
			display: block;
		}
	}

	h1 {
		margin: 10px 20px 5px;
	}

	.swatches {
		@include clearfix;
		padding: 0 15px 10px 20px;

		li {
			border: 1px solid #FFF;
			cursor: pointer;
			display: block;
			float: left;
			height: 16px;
			margin: 0 7px 7px 0;
			outline: 1px solid #999;
			width: 16px;
		}
	}
}

.ColorNameForm {
	@include clearfix;
	margin: 0 20px;

	input[type="text"] {
		width: 145px;
	}

	input[type="submit"] {
		float: right;
	}
}

.BackgroundImageForm, .CommunityHeaderBackgroundImageForm {
	@include clearfix;
	margin: 0 20px;
}