/* GENERAL SKETCH STYLES */
#sketches {
  background: transparent;
  width: 1700px;
  height: 520px;
  position: absolute;
  left: 50%;
  top: 36%;
  margin: -15px 0 0 -850px;
  line-height: 0;
}

#sketches img {
  z-index: 0;
}

#sketches .active {
  position: absolute;
}

#sketches .glow {
  display: none;
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0 0;
  z-index: 0;
}

#sketchExamplePopup {
  height: 1px;
  position: absolute;
  display: none;
  z-index: 350;
}

#sketchExamplePopup > img {
  display: block;
  position: absolute;
  padding-bottom: 6px;
  bottom: 0;
  cursor: pointer;
}

#sketchExamplePopup > a {
  position: relative;
  display: block;
  top: 0; 
  border: 1px solid #5e9212;
  background: #ececec;
  background:         linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 100%);
  background:      -o-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 100%);
  background:    -moz-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 100%);
  background: -webkit-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 100%);
  background:     -ms-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 100%);
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(219,219,219)),color-stop(1, rgb(255,255,255)));
  border-radius: 9px;
  padding: 12px 8px; 
  font-size: 16px;
  line-height: 16px;
}

#sketchExamplePopup > a > span {
  font-family: arial, sans-serif;
  text-shadow: 1px 1px 1px #ffffff;
}

#sketchExamplePopup > a span.text {
  padding: 4px;
  font-size: 13px;
  border: 1px solid #ffa10c;
  border-radius: 2px;
  color: #464646;
  background: white;
}

#sketchExamplePopup > a span.text:hover {
  color: #df6105;
}

#sketchExamplePopup .eq {
  width: 13px;
  height: 15px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAK0lEQVQoz2O4ffMmw/8chv9E4///GUjTAMUDpQkfoK6mUT/RRdP//yQnWADUyOVAxQzeMwAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
  display: inline-block;
  vertical-align: text-top;
  margin-left: 8px;
}

#sketchExamplePopup .up {
  width: 21px;
  height: 10px;
  position: absolute;
  left: 20px;
  top: -9px;
  background: transparent url(http://www.wolframcdn.com/images/sketches/arrow-top.png) no-repeat scroll 0 0;
}

.no-datauri #sketchExamplePopup .eq {
    background: url("//www.wolframcdn.com/images/eq.png") no-repeat scroll 0 0 transparent;
}

#sketchImageGradient {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 1700px;
  height: 520px;
  z-index: 1;
}

#sketchImagePreload {
  display: none;
  width: 1px;
  height: 1px;
  position: absolute;
  left: -999px;
}

/* ADJUST AND HIDE PARTS OF THE FRONT PAGE FOR SKETCHES */
body.green-sketches,
body.blue-sketches,
body.gray-sketches,
body.orange-sketches {
  overflow-x: hidden;
  min-height: 785px;
} 

body.green-sketches #go-beyond-div,
body.green-sketches #tour,
body.blue-sketches #go-beyond-div,
body.blue-sketches #tour,
body.gray-sketches #go-beyond-div,
body.gray-sketches #tour,
body.orange-sketches #go-beyond-div,
body.orange-sketches #tour {
  display: none;
}

body.green-sketches #popanchor,
body.blue-sketches #popanchor,
body.gray-sketches #popanchor,
body.orange-sketches #popanchor {
  z-index: 440;
}


/* COLOR-SPECIFIC SKETCH STYLES */
body.green-sketches {
  background: #93bc59;
}

body.green-sketches header {
    background: rgba(122,163,65,.5);
}

body.green-sketches #fpsiteNav #oauth_signin:hover {
    color: #deeebf;
}

body.green-sketches #calculate,
body.green-sketches #notifier {
  box-shadow: 0 0 10px 2px #427e02;
}

body.green-sketches #sketchExamplePopup > a {
    box-shadow: 0 1px 10px #476E0E; 
}

body.green-sketches #sketchImageGradient {
  background-image: linear-gradient(top, rgba(147,188,89,0) 0%, rgba(147,188,89,1) 25%);
  background-image: -o-linear-gradient(top, rgba(147,188,89,0) 0%, rgba(147,188,89,1) 25%);
  background-image: -moz-linear-gradient(top, rgba(147,188,89,0) 0%, rgba(147,188,89,1) 25%);
  background-image: -webkit-linear-gradient(top, rgba(147,188,89,0) 0%, rgba(147,188,89,1) 25%);
  background-image: -ms-linear-gradient(top, rgba(147,188,89,0) 0%, rgba(147,188,89,1) 25%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(147,188,89,0)),color-stop(.25, rgba(147,188,89,1)));
}

body.green-sketches footer.common {
  color: #eff7df;
  background: rgba(123,164,66,.6);
  background: #7ba442; /* old browsers */
  background:         linear-gradient(bottom, rgba(123,164,66,.6) 0%, rgba(123,164,66,.9) 100%);
  background:      -o-linear-gradient(bottom, rgba(123,164,66,.6) 0%, rgba(123,164,66,.9) 100%);
  background:    -moz-linear-gradient(bottom, rgba(123,164,66,.6) 0%, rgba(123,164,66,.9) 100%);
  background: -webkit-linear-gradient(bottom, rgba(123,164,66,.6) 0%, rgba(123,164,66,.9) 100%);
  background:     -ms-linear-gradient(bottom, rgba(123,164,66,.6) 0%, rgba(123,164,66,.9) 100%);  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  filter: alpha(opacity=85);
}

body.green-sketches footer.common li {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfaDAMTABSsjh5SAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAABNJREFUGFdjOPNowX8mBiAglgAAnpIDYGaCII4AAAAASUVORK5CYII=");
}

body.green-sketches footer.common li,
body.green-sketches footer.common a,
body.green-sketches footer.common a:link,
body.green-sketches footer.common a:visited {
  color: #eff7df;
}

body.green-sketches footer .connect:hover i {
  box-shadow: 0 0 5px 2px rgba(255,255,255, 0.7);
}


/* BLUE */
body.blue-sketches {
  background: #98bac8;
} 

body.blue-sketches header {
    background: rgba(117,168,189,.5);
}   

body.blue-sketches #fpsiteNav #oauth_signin:hover {
    color: #b9d9e7; 
}

body.blue-sketches #calculate,
body.blue-sketches #notifier {
  box-shadow: 0 0 20px 2px rgba(0,62,92,.5);
} 

body.blue-sketches #sketchExamplePopup > a {
    box-shadow: 0 1px 10px #020e6e; /* TODO */
}   

body.blue-sketches #sketchImageGradient {
  background-image: linear-gradient(top, rgba(152,186,200) 0%, rgba(152,186,200) 25%);
  background-image: -o-linear-gradient(top, rgba(152,186,200) 0%, rgba(152,186,200) 25%);
  background-image: -moz-linear-gradient(top, rgba(152,186,200) 0%, rgba(152,186,200) 25%);
  background-image: -webkit-linear-gradient(top, rgba(152,186,200) 0%, rgba(152,186,200) 25%);
  background-image: -ms-linear-gradient(top, rgba(152,186,200) 0%, rgba(152,186,200) 25%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(152,186,200,0)),color-stop(.25, rgba(152,186,200,1)));
} 

body.blue-sketches footer.common {
  color: #d8eaf2;
  background: rgba(91,155,181,.6);
  background:         linear-gradient(bottom, rgba(91,155,181,.6) 0%, rgba(91, 155, 181,.9) 100%);
  background:      -o-linear-gradient(bottom, rgba(91,155,181,.6) 0%, rgba(91, 155, 181,.9) 100%);
  background:    -moz-linear-gradient(bottom, rgba(91,155,181,.6) 0%, rgba(91, 155, 181,.9) 100%);
  background: -webkit-linear-gradient(bottom, rgba(91,155,181,.6) 0%, rgba(91, 155, 181,.9) 100%);
  background:     -ms-linear-gradient(bottom, rgba(91,155,181,.6) 0%, rgba(91, 155, 181,.9) 100%) -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";  filter: alpha(opacity=85);
} 

body.blue-sketches footer.common li {
  background-image: url("data:image/gif;base64,R0lGODlhAQAKAIAAAKfK2AAAACH5BAAAAAAALAAAAAABAAoAAAIDhI8FADs="); 
}

body.blue-sketches footer.common li,
body.blue-sketches footer.common a,
body.blue-sketches footer.common a:link,
body.blue-sketches footer.common a:visited {
  color: #d8eaf2;
}

body.blue-sketches footer .connect:hover i {
  box-shadow: 0 0 5px 2px rgba(255,255,255, 0.7);
}



/* GRAY */
body.gray-sketches {
  background: #797979;
}

body.gray-sketches header {
    background: rgba(101,101,101,.5);
}

body.gray-sketches #fpsiteNav #oauth_signin:hover {
    color: #cdcdcd; 
}

body.gray-sketches #calculate,
body.gray-sketches #notifier {
  box-shadow: 0 0 20px 2px rgba(2,2,2,.4);
}

body.gray-sketches #sketchExamplePopup > a {
    box-shadow: 0 1px 10px #020202;
}

body.gray-sketches #sketchImageGradient {
  background-image: linear-gradient(top, rgba(121,121,121,0) 0%, rgba(121,121,121,1) 25%);
  background-image: -o-linear-gradient(top, rgba(121,121,121,0) 0%, rgba(121,121,121,1) 25%);
  background-image: -moz-linear-gradient(top, rgba(121,121,121,0) 0%, rgba(121,121,121,1) 25%);
  background-image: -webkit-linear-gradient(top, rgba(121,121,121,0) 0%, rgba(121,121,121,1) 25%);
  background-image: -ms-linear-gradient(top, rgba(121,121,121,0) 0%, rgba(121,121,121,1) 25%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(121,121,121,0)),color-stop(.25, rgba(121,121,121,1)));
}

body.gray-sketches footer.common {
  color: #cecece;
  background: rgba(84,84,84,.6);
  background:         linear-gradient(bottom, rgba(84, 84, 84, 0.6) 0%, rgba(84, 84, 84, 0.9) 100%);
  background:      -o-linear-gradient(bottom, rgba(84, 84, 84, 0.6) 0%, rgba(84, 84, 84, 0.9) 100%);
  background:    -moz-linear-gradient(bottom, rgba(84, 84, 84, 0.6) 0%, rgba(84, 84, 84, 0.9) 100%);
  background: -webkit-linear-gradient(bottom, rgba(84, 84, 84, 0.6) 0%, rgba(84, 84, 84, 0.9) 100%);
  background:     -ms-linear-gradient(bottom, rgba(84, 84, 84, 0.6) 0%, rgba(84, 84, 84, 0.9) 100%); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";  filter: alpha(opacity=85);
}

body.gray-sketches footer.common li {
  background-image: url("data:image/gif;base64,R0lGODlhAQAKAIAAAJ2dnQAAACH5BAAAAAAALAAAAAABAAoAAAIDhI8FADs="); 
}

body.gray-sketches footer.common li,
body.gray-sketches footer.common a,
body.gray-sketches footer.common a:link,
body.gray-sketches footer.common a:visited {
  color: #cecece;
}

body.gray-sketches footer .connect:hover i {
  box-shadow: 0 0 5px 2px rgba(255,255,255, 0.7);
}


/* ORANGE */
body.orange-sketches {
  background: #ffb33f; /* rgb(255,179,63) */
}

body.orange-sketches header {
    background: rgba(249,147,0,.5);
}

body.orange-sketches #fpsiteNav #oauth_signin:hover {
    color: #ffe3b3; 
}

/****
body.orange-sketches #calculate {
  box-shadow: 0 0 10px 2px #02027e;
}

body.orange-sketches #sketchExamplePopup > a {
    box-shadow: 0 1px 10px #020e6e;
}
*/
body.orange-sketches #sketchImageGradient {
  background-image: linear-gradient(top, rgba(255,179,63,0) 0%, rgba(255,179,63,1) 25%);
  background-image: -o-linear-gradient(top, rgba(255,179,63,0) 0%, rgba(255,179,63,1) 25%);
  background-image: -moz-linear-gradient(top, rgba(255,179,63,0) 0%, rgba(255,179,63,1) 25%);
  background-image: -webkit-linear-gradient(top, rgba(255,179,63,0) 0%, rgba(255,179,63,1) 25%);
  background-image: -ms-linear-gradient(top, rgba(255,179,63,0) 0%, rgba(255,179,63,1) 25%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,179,63,0)),color-stop(.25, rgba(255,179,63,1)));
}

body.orange-sketches footer.common {
  color: #fff2e4;
  background: rgba(244,132,0,.6);
  background:         linear-gradient(bottom, rgba(244, 132, 0, 0.6) 0%, rgba(244, 132, 0, 0.9) 100%); 
  background:      -o-linear-gradient(bottom, rgba(244, 132, 0, 0.6) 0%, rgba(244, 132, 0, 0.9) 100%);
  background:    -moz-linear-gradient(bottom, rgba(244, 132, 0, 0.6) 0%, rgba(244, 132, 0, 0.9) 100%);
  background: -webkit-linear-gradient(bottom, rgba(244, 132, 0, 0.6) 0%, rgba(244, 132, 0, 0.9) 100%);
  background:     -ms-linear-gradient(bottom, rgba(244, 132, 0, 0.6) 0%, rgba(244, 132, 0, 0.9) 100%); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";  filter: alpha(opacity=85);
}

body.orange-sketches footer.common li {
  background-image: url("data:image/gif;base64,R0lGODlhAQAKAIAAAP/SkAAAACH5BAAAAAAALAAAAAABAAoAAAIDhI8FADs="); 
}

body.orange-sketches footer.common li,
body.orange-sketches footer.common a,
body.orange-sketches footer.common a:link,
body.orange-sketches footer.common a:visited {
  color: #fff2e4;
}

body.orange-sketches footer .connect:hover i {
  box-shadow: 0 0 5px 2px rgba(255,255,255, 0.7);
}




/* Color picker for home page sketches */ 
#colorPicker {
  height: 26px;
  margin: 6px 0 0 6px;
  display: none;
}

.green-sketches #colorPicker,
.blue-sketches #colorPicker,
.gray-sketches #colorPicker,
.orange-sketches #colorPicker {
  display: block;
}

#colorPicker li { 
  width:  15px; 
  height: 15px;
  margin: 0 1px 0 0;
  border: 1px solid rgb(103,153,11); 
  cursor: pointer; 
  float:  left;
}

#colorPicker li.green { 
  background: rgb(153,189,85);
}

#colorPicker li.blue { 
  background: rgb(152,186,200);
}

#colorPicker li.gray {
  background: rgb(121,121,121); 
}

#colorPicker li.orange {
  background: rgb(255,179,63);
}

/* Different borders on different-colored sketch pages */
.blue-sketches #colorPicker li { 
  border: 1px solid rgb(105,147,165);
}
.blue-sketches #colorPicker li:hover {
  border: 1px solid white;
}

.gray-sketches #colorPicker li { 
  border: 1px solid rgb(72,72,72);
}
.gray-sketches #colorPicker li:hover {
  border: 1px solid white;
}

.orange-sketches #colorPicker li { 
  border: 1px solid rgb(208,136,0);
}
.orange-sketches #colorPicker li:hover {
  border: 1px solid white;
}


/* The "Try New Colors" message on the default-color sketch page */
#sketchTryColors {
  display: none;
  position: absolute;
  top: 30px;
  right: 150px;
  width: 250px;
  height: 38px;
}