/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

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

blockquote, q { quotes: none; }

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

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

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

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

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

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }


body { font:13px/1.231 sans-serif; *font-size:small; }

pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */
html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  
a:link { -webkit-tap-highlight-color: #FF5E99; }

a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
b, strong, th { font-weight: bold; }

td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

.ie6 legend, .ie7 legend { margin-left: -7px; } 

button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; }

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

label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

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

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

.ie7 img { -ms-interpolation-mode: bicubic; }


/**
 * You might tweak these..
 */

body, select, input, textarea {
  color: #444;
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }


/**
 * Primary styles
 *
 * Author: Matthew Lein
 */

@font-face {
    font-family: 'MuseoSlab';
    src: url('../fonts/Museo_Slab_500-webfont.eot');
    src: local("☺"),
         url('../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('../fonts/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Layout */
body {
	background-color: #7E7E7E;
	background-image: url('../images/bg-controls.png');
	color: #fff;
	min-width: 1000px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}
a {
	color: #fff;
	text-decoration: none;
}

input[type="text"],
input[type="password"],
input[type="email"] {
	padding: 4px;
	border: none;
	-webkit-border-radius: 1px;
	   -moz-border-radius: 1px;
	        border-radius: 1px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
	   -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
	     -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
	        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);	   
}



header {
	background-color: #545454;
	background-image: url('../images/bg-header.png');
	background-repeat: repeat-x;
	border-bottom: 1px solid #333333;
	padding: 12px;
}

header h1 {
	float: left;
}

header h1 a {
	display: block;
	width: 235px;
	height: 56px;
	background: url('../images/logo.png') no-repeat;
}

header nav {
	font-family: MuseoSlab, serif;
	padding: 13px 0;
}

header nav > ul > li {
	float: left;
	margin-right: 20px;
}

header nav a {
	text-shadow:0 1px rgba(0, 0, 0, 0.8);
	font-size: 14px;
	display: block;
	padding: 0.5em 1em;
}

header nav #account {
	float: right;
	position: relative;
}

header nav #about {
	width: 33px;
	height: 19px;
	background: url('../images/nav-about.png') no-repeat center center;
	margin: 6px 30px 0 20px;
}


.menu {
	position: absolute;
	left: -9999px;
	width: 200px;
	margin-top: 12px;
	margin-left: -75px;
	background-color: #fff;
	padding: 15px;
	opacity: 0;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
	        border-radius: 6px;
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
	   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
	     -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
	        box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -webkit-transition: opacity 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
       -moz-transition: opacity 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
        -ms-transition: opacity 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
         -o-transition: opacity 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
            transition: opacity 200ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}

.activeMenu .menu {
	left: auto;
	opacity: 1;
	z-index: 1;
}

.menu:before {
	content:'';
	background: #fff url() no-repeat;
	width: 20px;
	height: 20px;
	position: absolute;
	margin: -18px 0 0 85px;
     -moz-transform: rotate(45deg);  
       -o-transform: rotate(45deg);  
  -webkit-transform: rotate(45deg);  
      -ms-transform: rotate(45deg);  
          transform: rotate(45deg);  
}

.menu a {
	color: #6CABCC;
	text-shadow: none;
}

.menu a:hover  {
    text-decoration: underline;
}


#account .menu {
	margin-left: -115px;
    right: 0;
    width: 150px;
}

#account .menu:before {
	margin-left: 122px;
}






.button > a {
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	   -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	     -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	        box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	background: rgb(143,143,143); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(143,143,143,1) 0%, rgba(92,92,92,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,143,143,1)), color-stop(100%,rgba(92,92,92,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(143,143,143,1) 0%,rgba(92,92,92,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(143,143,143,1) 0%,rgba(92,92,92,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(143,143,143,1) 0%,rgba(92,92,92,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(143,143,143,1) 0%,rgba(92,92,92,1) 100%); /* W3C */
}
.button > a:active {
	padding-top: 0.6em;
	padding-bottom: 0.4em;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
	   -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
	     -o-box-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
	        box-shadow: 0 0 1px rgba(0, 0, 0, 0.65);
	background: rgb(92,92,92); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(92,92,92,1) 0%, rgba(143,143,143,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,92,92,1)), color-stop(100%,rgba(143,143,143,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(143,143,143,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(143,143,143,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(92,92,92,1) 0%,rgba(143,143,143,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(92,92,92,1) 0%,rgba(143,143,143,1) 100%); /* W3C */
}

.button-left {
	margin-right: 0;
}
.button-left > a {
	border-right: 1px solid hsl(0, 0%, 40%);
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.button-right > a {
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomleft: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.dropdown > a {
	padding-right: 1.4em;
}
.dropdown > a:after {
	margin-top: -2px;
	padding-left: .4em;
	content: url('../images/bg-dropdown.png');
	position: absolute;
	width: 5px;
	height: 4px;
}

.unselectable {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none; /* important to use instead of none */
	-o-user-select: none;
	user-select: none;
}


/* ---------------------------------------------------------------------
 * Controls
 * --------------------------------------------------------------------- */

#controls {
	width: 350px;
	float: left;
	font-size: 14px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none; /* important to use instead of none */
	-o-user-select: none;
	user-select: none;
	
}

.control {
	width: 25px;
	float: right;
	margin-top: 27px;
	font-size: 12px;
}

.slider {
	margin-right: 40px;
}

label {
	display: block;
	margin-bottom: 1px;
	line-height: 34px;
}

#preview {
	display: block;
	float: right;
}
#rotator {
	background-image: url('../images/bg-rotator.png');
	cursor: pointer;
	margin-left: 3px;
}

#colorLabel {
	float: right;
	line-height: 17px;
}
#colorInput,
#bgColorInput {
	width: 65px;
	margin-left: 5px;
}

#colorpicker,
#bgColor {
	position: absolute;
	background-color: #fff;
	border: 1px solid #999;
	z-index: 100;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
	        border-radius: 6px;
}
#colorpicker,
#bgColor {
	margin-left: -25px;
	margin-top: 5px;
}
#bgColor {
    margin-left: 0px;
}
#bgColorLabel {
    float: right;
    width: 140px;
    text-align: right;
    margin-top: -4px;
}


#modeLabel {
	float: right;
	clear: right;
	margin-top: 14px;
	line-height: 15px;
}
#modeCheck {
	margin-left: 5px;
}

.rotationText {
	position: relative;
	top: -33px;
}

#rotationLabel {
	width: 150px;
	vertical-align: top;
	line-height: 22px;
}
#rotationInput {
	vertical-align: top;
	margin-top: -22px;
}
.degrees {
	float: right;
	margin-left: 3px;
	position: relative;
	top: -22px;
}

#new {
	background: url('../images/new-stripe-icon.png') no-repeat;
	padding-left: 44px;
	margin: 0 190px 10px -4px;
	line-height: 27px;
	display: block;
	position: relative;
}
#new:active {
	top:1px;
	/*background-position: left 1px;*/
}

/* ---------------------------------------------------------------------
 * Stripes
 * --------------------------------------------------------------------- */


#stripeList { 
	list-style-type: none;
	margin: 0 -20px 20px -20px;
	padding: 0;
}
#stripeList li {
	background-image: url('../images/bg-controls.png');
	padding: 13px 30px 13px 60px;
	position: relative;
	cursor: pointer;
	border-top: 1px solid #6E6E6E;
	border-bottom: 1px solid #B2B2B2;
}
#stripeList li div {
	position: absolute;
}
#stripeList li .color-bar {
	height: 23px;
	position: relative;
	border: 1px solid #777;
}
	
	#stripeList .selected {
		/*background-color: rgba(255, 255, 255, 0.4);*/
		background: url('../images/bg-selected-stripe.png') repeat-x left bottom;
		border-top: solid 1px #B2B2B2;
	}
	
	.hidden {
		opacity: 0.5;
	}

	/* stripe icons */
	.close-box {
		background: url('../images/close-icon.png');
		width: 16px;
		height: 16px;
		right: 0px;
		top: 0px;
		cursor: pointer;
		z-index: 20;
		-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
		   -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
		     -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
		        box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
	}

	#stripeList li .hide-show {
		margin-top: -5px;
		left: 15px;
		background: url('../images/hide-show-icon.png') no-repeat;
		width: 36px;
		height: 33px;
		cursor: pointer;
	}




/* ---------------------------------------------------------------------
 * jQuery UI Overrides
 * --------------------------------------------------------------------- */


.ui-slider-horizontal .ui-slider-handle {
	cursor: pointer;
	top: -0.5em;
	-webkit-border-radius: 100px;
	   -moz-border-radius: 100px;
	        border-radius: 100px;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	   -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	     -o-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	        box-shadow: 0 0 3px rgba(0,0,0,0.3);
	-webkit-background-clip: padding-box;
	   -moz-background-clip: padding;
	        background-clip: padding-box;
}
.ui-slider-horizontal .ui-slider-handle:focus {
	outline: none;
}

.ui-slider-horizontal {
	height: 0.4em;
	border: 1px solid #A8A8A8;
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	   -moz-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	     -o-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
	        box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
    -webkit-background-clip: padding-box;
	   -moz-background-clip: padding;
	        background-clip: padding-box;
}




/* ---------------------------------------------------------------------
 * Tabs
 * --------------------------------------------------------------------- */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tabs {
	height: 32px; /* height of tabs */
	border-bottom: 1px solid #999;
	/* border-left: 1px solid #999;   Highlight*/
	background-color: #404040;
	background-image: url('../images/bg-stripes.png');
}
.tabs li {
	float: left;
	position: relative;
	height: 31px; /* 1 less than tab height */
	background-color: #585858;
}
.tabs li a {
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 32px; /* vertically align */
	display: block;
	padding: 0 20px;
	opacity: 0.5;
}
.tabs .active { /* active tab */
	height: 33px;
	z-index: 20;
	background-image: url('../images/bg-controls.png');
}
.tabs .active a {
	opacity: 1;
}

.panel-group {
	margin-top: -1px; /* pull over bottom border */ 
	border: 1px solid #333333;
	border-left: none;
	
}

.panel {
	background-image: url('../images/bg-controls.png');
	display: none;
	padding: 20px 20px 35px 20px;
	border-top: none;
	z-index: 30;
}

#codeOutput {
	font-family: courier, monospace;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-o-user-select: text;
	user-select: text;
}

#stripes-panel {
    padding-bottom: 10px;
}

/* ---------------------------------------------------------------------
 * Share links
 * --------------------------------------------------------------------- */

/*
.twitterbox {
	overflow: hidden;
}

.twitterbox iframe {
	float: left;
}
*/

.twitter-share {
	color: #6CABCC;
	display: block;
    line-height: 24px;
	padding: 0 0 0 32px;
	margin: 0 0 10px 10px;
	background: url('../images/social-icons.png') no-repeat top left;
}

.fb-share {
	background: url('../images/social-icons.png') no-repeat 0px -32px;
	padding: 0 0 0 32px;
	margin-left: 10px;
	height: 24px;
	display: block;
	line-height: 24px;
}


/* ---------------------------------------------------------------------
 * LIBRARY ITEMS
 * --------------------------------------------------------------------- */

#library-panel ul { 
	list-style-type: none;
	margin: 0 -20px 20px -20px;
	padding: 0;
}
#library-panel li {
	background-image: url('../images/bg-controls.png');
	border-top: 1px solid #6E6E6E;
	border-bottom: 1px solid #B2B2B2;
}

#library-panel li a {
    background-position: 17px 12px;
    background-repeat: no-repeat;
    display: block;
    padding: 17px 17px 64px 17px;
}

#library-panel li:hover {
	background: url('../images/bg-selected-stripe.png') repeat-x left bottom;
	border-top: solid 1px #B2B2B2;
}

#library-panel li span {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 5px;
}

/* specific items */
#lib-checker {
	background-image: url('../images/library-thumbs/checker.png');
}
#lib-argyle {
	background-image: url('../images/library-thumbs/argyle.png');
}
#lib-plaid {
	background-image: url('../images/library-thumbs/plaid.png');
}


#metadata {
	display: none;
}





/* ---------------------------------------------------------------------
 * error
 * --------------------------------------------------------------------- */
.warning {
    background-color: #000;
    color: #fff;
    display: none;
    position: absolute;
    top: 20%;
    left: 0px;
    right: 0px;
    z-index: 100000;
    text-align: center;
    padding: 30px;
}

.no-canvas .warning {
    display: block;
}

.warning h2 {
    font-size: 27px;
    font-family: MuseoSlab, serif;
    margin-bottom: 20px;
}
.warning p {
    margin-bottom: 20px;
}

.browsers {
    width: 660px;
    margin: auto;
}

.browsers a {
    width: 125px;
    height: 125px;
    float: left;
    margin-right: 20px;
    background: url('../images/browser-logos.jpg') no-repeat;
}
    .browsers .ch {
        background-position: 0 0;
    }
    .browsers .ff {
        background-position: -125px 0px;
    }
    .browsers .sf {
        background-position: -250px 0px;
    }
    .browsers .op {
        background-position: -375px 0px;
    }
    .browsers .ie {
        width: 55px;
        height: 55px;
        background-position: -500px 0px;
    }









/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }


/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
   nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/**
 * Placeholder media queries for responsive design. Modify as design requires.
 * These follow after, and will override, the primary ('mobile first') styles
 * The closing /mediaquery comment is required by respond.js min/max-width Media Query polyfill
 */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}/*/mediaquery*/

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}/*/mediaquery*/



/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}