Chapter 6 Template/Week 6/css/homework.css
/* */
html {
background-image: url("../images/background.jpg");
height:100%;
display:flex;
flex-direction: column;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
max-width: 1080px;
width: 95%; /* fixed width was 800 */
height: 450%;
background-color: rgba(255, 255, 255, 0.1); /* White
background with 10% opacity */
margin: 0 auto;
padding: 0;
border: 0px solid black;
/* box-shadow: 0 9px 18px 9px; */
}
h1, h2, h3, p {
margin: 0;
padding: 0;
}
/* Header */
header {
background-image: -webkit-linear-gradient(45deg, white 0%,
blue 75%, green 100%);
background-image: -moz-linear-gradient(45deg, white 0%,
blue 75%, green 100%);
background-image: -o-linear-gradient(45deg, white 0%, blue
75%, green 100%);
background-image: linear-gradient(45deg, white 0%, blue
75%, green 100%);
padding: .9375em 1.875% .9375em 1.875%; /* 15 / 16; 15 /
800 x 100 */
}
header img {
float: left;
padding-right: 1.875%; /* 15 / 800 x 100 */
width: 10.6%;
max-width: 85px;
min-width: 40px;
}
header h2 {
font-size: 230%;
}
header h3 {
font-size: 125%;
padding-bottom: 15px;
}
h2#result {
color: red;
}
/* Drag and Drop */
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px;
}
#boxB { background-color: #FF6699; width:150px;
height:150px; }
div#group {
float: left;
}
div#twoBoxesTop {
float: left;
}
div#imgDiv {
float: left;
}
div#twoBoxesBot {
float: left;
}
div#div1 {
width: 100px;
height: 100px;
padding: 0px;
border: 1px solid #aaaaaa;
float: left;
}
div#div2 {
width: 100px;
height: 100px;
padding: 0px;
border: 1px solid #aaaaaa;
float: right;
}
div#div3 {
width: 100px;
height: 100px;
padding: 0px;
border: 1px solid #aaaaaa;
float: left;
}
div#div4 {
width: 100px;
height: 100px;
padding: 0px;
border: 1px solid #aaaaaa;
float: right;
}
/* background video */
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../../images/videoframe.jpg') center center /
cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
.logo {
width: 180px;
height: 100px;
float: left;
}
.rImage {
width: 80px;
height: 60px;
float: left;
}
/* main */
main.main {
}
main p#a1 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: blue;
text-align: center;
font-weight: bold
}
div#mainContent {
width: 700px;
height: 600px;
border: 1px solid blue;
}
div#mainContent p#mt {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: center;
font-weight: normal;
font-size: 34pt;
}
div#mainContent p#et {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: center;
font-weight: normal;
font-size: 24pt;
}
div#mainContent p#ed {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: center;
font-weight: normal;
font-size: 24pt;
}
div#mainContent p#msg01 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: normal;
font-size: 14pt;
}
div#img01 {
padding-left: 215px;
}
video#mainVideo {
border: 1px solid #021a40;
}
div#mainVideo {
border: 1px solid blue;
width: 320px;
height: 240px;
}
textarea#txta01 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: blue;
text-align: left;
}
label{
display:inline-block;
width:150px;
}
label#bigLabel{
display:inline-block;
width:500px;
}
label#bigLabel2{
display:inline-block;
width:400px;
}
label#lbl01 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
}
label#lbl02 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
}
label#lbl03 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:300px;
}
label#lbl04 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:300px;
}
label#lbl05 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:300px;
}
label#lbl06 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:300px;
}
label#lbl07 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:200px;
}
label#lbl08 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: bold;
width:200px;
}
label#lblc01 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: center;
font-weight: bold;
font-size: 24pt;
}
label#lblc02 {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: black;
text-align: left;
font-weight: normal;
}
input#foreColor {
font-family: Verdana, Arial, Helvetica, sans-serif, "Courier
New","Times New Roman";
color: red;
text-align: left;
}
fieldset {
background-color:#ccffcc;
}
legend {
color: red;
font-weight: bold;
}
/* Table */
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #ffffcc;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: #66ffcc;
color: black;
}
table img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
table img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
iframe {
display:block;
}
/* Sidebar */
aside {
float: left;
width: 100px;
padding: 5px 0;
}
aside#table {
float: left;
width: 50px;
padding: 5px 0;
}
aside#leftside {
float: left;
width: 33%;
padding: 5px 0;
height: 750px;
}
aside a {
color:white;
}
/* Navigation menu */
#nav_menu {
clear: left;
}
#nav_menu ul {
list-style: none;
position: relative;
}
#nav_menu ul li {
float: left;
width: 20%; /* 160 / 800 x 100 */
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after {
content: "";
clear: both;
display: block;
}
#nav_menu ul {
margin: 0;
padding: 0;
}
#nav_menu ul li:hover ul {
width: 100%;
}
#nav_menu ul li a {
text-align: center;
display: block;
padding: .7em 0;
text-decoration: none;
background-color: #00ff00;
color: red;
}
#nav_menu ul li a.current {
color: orange;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
background-color: #ffff99;
}
#nav_list ul {
list-style: none;
padding-left: 1.5em;
}
#nav_list ul li {
width: 100px;
margin-bottom: .5em;
border: 2px solid black; }
#nav_list ul li a {
display: block;
font-weight: bold;
text-decoration: none;
background-color: orange;
padding: .5em 0 .5em .5em;
color: black;
}
/* Section */
section {
width: 720px;
float: right;
padding: 5px 5px 5px 5px;
}
section#table {
width: 820px;
float: right;
padding: 5px 5px 5px 5px;
}
section img {
float: left;
padding-right: 1.875%;
}
img#i1 {
float: right;
}
section h1 {
font-size: 140%;
margin-bottom: .5em;
}
section h1:first-letter {
font-size: 140%;
}
section h2 {
font-size: 125%;
margin: .8em 0 .5em 0;
}
section h3 {
font-size: 110%;
margin: .8em 0 .5em 0;
text-shadow: 2px 2px 5px red;
}
section h4 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px
darkblue;
}
section p {
margin-bottom: .5em;
}
section p#dr1 {
color: Blue;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px
darkblue;
font-size: 185%;
}
section a {
font-weight: bold;
color: orange;
}
section a:link, main a:visited {
color: orange;
}
section a:hover, main a:focus {
color: green;
}
section#form h2 {
color: green;
}
section#form h3 {
color: blue;
}
section h1#v1 { text-shadow: 2px 2px 5px red;
}
section p#audio1 {
text-align: center;
max-width: 320px;
color: blue;
background-color: yellow;
}
audio#audioControls {
padding-left: 10px;
}
/*
p#v4 {
color:black;
}
*/
canvas#drawing {
background-color: rgba(255, 255, 255, 0.6); /* White
background with 60% opacity */
/* width: 600px;
height: 300px; */
border: 1px solid #0000ff;
}
div#c1 {
background-color: rgba(255, 255, 255, 0.1); /* White
background with 10% opacity */
max-width: 350px;
max-height: 180px;
}
/*
div#div1 {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 8s;
animation-name: example;
animation-duration: 8s;
}
*/
/* use combinator to set p section within div to yellow
background */
div#d1 > p {
background-color: yellow;
}
/* use combinator to set p section after div to blue background
and text to white */
div#d3 + p {
color: white;
background-color: blue;
}
div#twoCol {
padding: 0px;
margin: 0px
width:550px;
}
div#fcs {
float: left;
padding-right: 0px;
margin: 0px
}
div#leftCol1 {
float: left;
padding-right: 0px;
margin: 0px
}
div#rightCol1 {
float: right;
padding-left: 0px;
margin: 0px
}
div#leftCol2 {
float: left;
padding-right: 30px;
margin: 0px
}
div#rightCol2 {
float: right;
padding-left: 30px;
margin: 0px
}
select#fcs {
background-color: blue;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* Standard syntax */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
/* Footer */
footer {
clear: both;
border-top: 2px solid black;
padding: 15px;
background-image: -webkit-linear-gradient(45deg, black 0%,
orange 25%, white 100%);
background-image: -moz-linear-gradient(45deg, black 0%,
orange 25%, white 100%);
background-image: -o-linear-gradient(45deg, black 0%,
orange 25%, white 100%);
background-image: linear-gradient(45deg, black 0%, orange
25%, white 100%);
}
footer p {
font-size: 90%;
text-align: center;
}
Chapter 6 Template/Week 6/css/jquery-ui.css
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css,
button.css, controlgroup.css, checkboxradio.css, datepicker.css,
dialog.css, draggable.css, resizable.css, progressbar.css,
selectable.css, selectmenu.css, slider.css, sortable.css,
spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit
http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayX
Pos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bg
HeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPo
s=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHig
hlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPo
s=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgO
verlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgConte
ntRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepe
at=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-
icons_555555_256x240.png%22)&iconsHighlight=url(%22imag
es%2Fui-
icons_777620_256x240.png%22)&iconsHeader=url(%22images
%2Fui-
icons_444444_256x240.png%22)&iconsError=url(%22images%
2Fui-
icons_cc0000_256x240.png%22)&iconsDefault=url(%22images
%2Fui-
icons_777777_256x240.png%22)&iconsContent=url(%22images
%2Fui-
icons_444444_256x240.png%22)&iconsActive=url(%22images
%2Fui-
icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlO
verlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHea
der=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=
&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D3
0)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShado
wPerc=30&opacityOverlayPerc=30&iconColorHover=%235555
55&iconColorHighlight=%23777620&iconColorHeader=%2344
4444&iconColorError=%23cc0000&iconColorDefault=%237777
77&iconColorContent=%23444444&iconColorActive=%23ffffff
&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOp
acityError=95&bgImgOpacityHighlight=55&bgImgOpacityCont
ent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bg
ImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureSha
dow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgText
ureHighlight=flat&bgTextureContent=flat&bgTextureHeader=fl
at&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefa
ult=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Aria
l%2CHelvetica%2Csans-
serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessSha
dow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opac
ityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.
3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderCol
orError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%
23777620&borderColorHighlight=%23dad55e&bgColorHighligh
t=%23fffa90&fcContent=%23333333&borderColorContent=%23
dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&bo
rderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fc
Active=%23ffffff&borderColorActive=%23003eff&bgColorActi
ve=%23007fff&fcHover=%232b2b2b&borderColorHover=%23c
ccccc&bgColorHover=%23ededed&fcDefault=%23454545&bor
derColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed
MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0); /* support: IE8 */
}
.ui-front {
z-index: 100;
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
/* Icons
----------------------------------*/
.ui-icon {
display: inline-block;
vertical-align: middle;
margin-top: -.25em;
position: relative;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
.ui-widget-icon-block {
left: 50%;
margin-left: -8px;
display: block;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin: 2px 0 0 0;
padding: .5em .5em .5em .7em;
font-size: 100%;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: 0;
}
.ui-menu .ui-menu {
position: absolute;
}
.ui-menu .ui-menu-item {
margin: 0;
cursor: pointer;
/* support: IE10, see #8844 */
list-style-image:
url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///y
H5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
margin: 5px 0;
height: 0;
font-size: 0;
line-height: 0;
border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: -1px;
}
/* icon support */
.ui-menu-icons {
position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
padding-left: 2em;
}
/* left-aligned */
.ui-menu .ui-icon {
position: absolute;
top: 0;
bottom: 0;
left: .2em;
margin: auto 0;
}
/* right-aligned */
.ui-menu .ui-menu-icon {
left: auto;
right: 0;
}
.ui-button {
padding: .4em 1em;
display: inline-block;
position: relative;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Support: IE <= 11 */
overflow: visible;
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
width: 2em;
box-sizing: border-box;
text-indent: -9999px;
white-space: nowrap;
}
/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
text-indent: 0;
}
/* button icon element(s) */
.ui-button-icon-only .ui-icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
.ui-button.ui-icon-notext .ui-icon {
padding: 0;
width: 2.1em;
height: 2.1em;
text-indent: -9999px;
white-space: nowrap;
}
input.ui-button.ui-icon-notext .ui-icon {
width: auto;
height: auto;
text-indent: 0;
white-space: normal;
padding: .4em 1em;
}
/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
border: 0;
padding: 0;
}
.ui-controlgroup {
vertical-align: middle;
display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
float: left;
margin-left: 0;
margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
display: block;
float: none;
width: 100%;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-
controlgroup-item {
border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-
controlgroup-item {
border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-
content {
border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-
content {
border-bottom: none;
}
/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
/* Support: IE8 only, Android < 4.4 only */
width: 75%;
width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
border-top-style: solid;
}
.ui-checkboxradio-label .ui-icon-background {
box-shadow: inset 1px 1px 1px #ccc;
border-radius: .12em;
border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
width: 16px;
height: 16px;
border-radius: 1em;
overflow: visible;
border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-
icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover
.ui-icon {
background-image: none;
width: 8px;
height: 8px;
border-width: 4px;
border-style: solid;
}
.ui-checkboxradio-disabled {
pointer-events: none;
}
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
}
.ui-datepicker .ui-datepicker-header {
position: relative;
padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: absolute;
top: 2px;
width: 1.8em;
height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
left: 2px;
}
.ui-datepicker .ui-datepicker-next {
right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
top: 50%;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
margin: 0 2.3em;
line-height: 1.8em;
text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: 45%;
}
.ui-datepicker table {
width: 100%;
font-size: .9em;
border-collapse: collapse;
margin: 0 0 .4em;
}
.ui-datepicker th {
padding: .7em .3em;
text-align: center;
font-weight: bold;
border: 0;
}
.ui-datepicker td {
border: 0;
padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
margin: .7em 0 0 0;
padding: 0 .2em;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
float: right;
margin: .5em .2em .4em;
cursor: pointer;
padding: .2em .6em .3em .6em;
width: auto;
overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-
current {
float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
width: 95%;
margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-
header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-
header {
border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
clear: left;
}
.ui-datepicker-row-break {
clear: both;
width: 100%;
font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
right: 2px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
left: 2px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
right: 1px;
left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
left: 1px;
right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-
datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-
header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-
header {
border-right-width: 0;
border-left-width: 1px;
}
/* Icons */
.ui-datepicker .ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
left: .5em;
top: .3em;
}
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 20px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-n {
height: 2px;
top: 0;
}
.ui-dialog .ui-resizable-e {
width: 2px;
right: 0;
}
.ui-dialog .ui-resizable-s {
height: 2px;
bottom: 0;
}
.ui-dialog .ui-resizable-w {
width: 2px;
left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
width: 7px;
height: 7px;
}
.ui-dialog .ui-resizable-se {
right: 0;
bottom: 0;
}
.ui-dialog .ui-resizable-sw {
left: 0;
bottom: 0;
}
.ui-dialog .ui-resizable-ne {
right: 0;
top: 0;
}
.ui-dialog .ui-resizable-nw {
left: 0;
top: 0;
}
.ui-draggable .ui-dialog-titlebar {
cursor: move;
}
.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-progressbar {
height: 2em;
text-align: left;
overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
background:
url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///y
H/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAA
AKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKX
qymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1
frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+H
ycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObk
pOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAA
AApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS1
8y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+v
UWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZx
QIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2
o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Y
y22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3q
LVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8p
ma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+D
iHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaU
AAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FN
WtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ
1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8Hm
HEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGN
ileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAI
fkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMF
WW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT
1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELse
fVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBno
BwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJA
QABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tn
SeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEm
JRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+Bbe
ZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoS
UI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAA
AAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZr
Kt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUun
BmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+M
XSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeo
mCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgA
AAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqV
euOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKo
NWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNad
oYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSll
Zmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/o
LvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq
+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY
3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9
yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAA
ACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVr
VhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcw
kpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB
2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl
5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
height: 100%;
filter: alpha(opacity=25); /* support: IE8 */
opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
background-image: none;
}
.ui-selectable {
-ms-touch-action: none;
touch-action: none;
}
.ui-selectable-helper {
position: absolute;
z-index: 100;
border: 1px dotted black;
}
.ui-selectmenu-menu {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
}
.ui-selectmenu-menu .ui-menu {
overflow: auto;
overflow-x: hidden;
padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
font-size: 1em;
font-weight: bold;
line-height: 1.5;
padding: 2px 0.4em;
margin: 0.5em 0 0 0;
height: auto;
border: 0;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-text {
display: block;
margin-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 14em;
}
.ui-selectmenu-icon.ui-icon {
float: right;
margin-top: 0;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
.ui-slider-vertical {
width: .8em;
height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
top: 0;
}
.ui-sortable-handle {
-ms-touch-action: none;
touch-action: none;
}
.ui-spinner {
position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;
}
.ui-spinner-input {
border: none;
background: none;
color: inherit;
padding: .222em 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 2em;
}
.ui-spinner-button {
width: 1.6em;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
}
.ui-spinner-up {
top: 0;
}
.ui-spinner-down {
bottom: 0;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll
bug (element with position: relative inside container with
overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor
{
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
}
body .ui-tooltip {
border-width: 2px;
}
/* Component containers
----------------------------------*/
.ui-widget {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
}
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
}
.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
}
.ui-widget-content a {
color: #333333;
}
.ui-widget-header {
border: 1px solid #dddddd;
background: #e9e9e9;
color: #333333;
font-weight: bold;
}
.ui-widget-header a {
color: #333333;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to
make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
color: #454545;
text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
border: 1px solid #cccccc;
background: #ededed;
font-weight: normal;
color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
color: #2b2b2b;
text-decoration: none;
}
.ui-visual-focus {
box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
border: #003eff;
background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
color: #ffffff;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: #fffa90;
color: #777620;
}
.ui-state-checked {
border: 1px solid #dad55e;
background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #f1a899;
background: #fddfdf;
color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
filter:Alpha(Opacity=70); /* support: IE8 */
font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
filter:Alpha(Opacity=35); /* support: IE8 */
background-image: none;
}
.ui-state-disabled .ui-icon {
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url("images/ui-
icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
background-image: url("images/ui-
icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
background-image: url("images/ui-
icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
background-image: url("images/ui-
icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
background-image: url("images/ui-
icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url("images/ui-
icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
background-image: url("images/ui-
icons_777777_256x240.png");
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px;
}
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px;
}
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -
48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px;
}
.ui-icon-arrowthick-2-se-nw { background-position: -176px -
48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -
48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -
48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -
48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -
48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px;
}
.ui-icon-arrowreturnthick-1-n { background-position: -16px -
64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -
64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -
64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px;
}
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px;
}
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px;
}
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px;
}
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px;
}
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px;
}
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead
*/
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px;
}
.ui-icon-circle-triangle-s { background-position: -64px -192px;
}
.ui-icon-circle-triangle-w { background-position: -80px -192px;
}
.ui-icon-circle-triangle-n { background-position: -96px -192px;
}
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px;
}
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px;
}
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -
208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px;
}
.ui-icon-squaresmall-plus { background-position: -48px -208px;
}
.ui-icon-squaresmall-minus { background-position: -64px -
208px; }
.ui-icon-squaresmall-close { background-position: -80px -
208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -
224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -
224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -
224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -
224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px;
}
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 3px;
}
/* Overlays */
.ui-widget-overlay {
background: #aaaaaa;
opacity: .003;
filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
-webkit-box-shadow: 0px 0px 5px #666666;
box-shadow: 0px 0px 5px #666666;
}
Chapter 6 Template/Week 6/css/normalize.css
/*! normalize.css v2.1.1 | MIT License | git.io/normalize */
/*
===============================================
===========================
HTML5 display definitions
===============================================
=========================== */
/**
* Correct `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* Prevent modern browsers from displaying `audio` without
controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
[hidden] {
display: none;
}
/*
===============================================
===========================
Base
===============================================
=========================== */
/**
* 1. Prevent system color scheme's background color being
used in Firefox, IE,
* and Opera.
* 2. Prevent system color scheme's text color being used in
Firefox, IE, and
* Opera.
* 3. Set default font family to sans-serif.
* 4. Prevent iOS text size adjust after orientation change,
without disabling
* user zoom.
*/
html {
/*background: #fff; */
color: #000; /* 2 */
font-family: sans-serif; /* 3 */
-ms-text-size-adjust: 100%; /* 4 */
-webkit-text-size-adjust: 100%; /* 4 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/*
===============================================
===========================
Links
===============================================
=========================== */
/**
* Address `outline` inconsistency between Chrome and other
browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in
all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/*
===============================================
===========================
Typography
===============================================
=========================== */
/**
* Address variable `h1` font-size and margin within `section`
and `article`
* contexts in Firefox 4+, Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and
Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap;
}
/**
* Set consistent quote types.
*/
q {
quotes: "201C" "201D" "2018" "2019";
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all
browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/*
===============================================
===========================
Embedded content
===============================================
=========================== */
/**
* Remove border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/*
===============================================
===========================
Figures
===============================================
=========================== */
/**
* Address margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/*
===============================================
===========================
Forms
===============================================
=========================== */
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero
out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5,
and Chrome.
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using
`!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button`
and `select`.
* All other form control elements do not inherit `text-
transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and
IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys
native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between
image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to `content-box` in IE 8/9.
* 2. Remove excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and
Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and
Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5
and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/*
===============================================
===========================
Tables
===============================================
=========================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Chapter 6 Template/Week 6/css/slicknav.css
/*
Mobile Menu Core Style
*/
.slicknav_btn {
position: relative;
display: block;
vertical-align: middle;
float: right;
padding: 0.438em 0.625em 0.438em 0.625em;
line-height: 1.125em;
cursor: pointer;
}
.slicknav_menu .slicknav_menutxt {
display: block;
line-height: 1.188em;
float: left;
}
.slicknav_menu .slicknav_icon {
float: left;
margin: 0.188em 0 0 0.438em;
}
.slicknav_menu .slicknav_no-text {
margin: 0
}
.slicknav_menu .slicknav_icon-bar {
display: block;
width: 1.125em;
height: 0.125em;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0.188em
}
.slicknav_nav {
clear: both
}
.slicknav_nav ul, .slicknav_nav li {
display: block
}
.slicknav_nav .slicknav_arrow {
font-size: 0.8em;
margin: 0 0 0 0.4em;
}
.slicknav_nav .slicknav_item {
display: block;
cursor: pointer;
}
.slicknav_nav a {
display: block
}
.slicknav_nav .slicknav_item a {
display: inline
}
.slicknav_menu:before, .slicknav_menu:after {
content: " ";
display: table;
}
.slicknav_menu:after {
clear: both
}
/* IE6/7 support */
.slicknav_menu {
*zoom: 1
}
/*
User Default Style
Change the following styles to modify the appearance of the
menu.
*/
.slicknav_menu {
font-size: 16px;
}
/* Button */
.slicknav_btn {
margin: 5px 5px 6px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #222222;
}
/* Button Text */
.slicknav_menu .slicknav_menutxt {
color: #FFF;
font-weight: bold;
text-shadow: 0 1px 3px #000;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #f5f5f5;
}
.slicknav_menu {
background: #4c4c4c;
padding: 5px;
}
.slicknav_nav {
color: #fff;
margin: 0;
padding: 0;
font-size: 0.875em;
}
.slicknav_nav, .slicknav_nav ul {
list-style: none;
overflow: hidden;
}
.slicknav_nav ul {
padding: 0;
margin: 0 0 0 20px;
}
.slicknav_nav .slicknav_item {
padding: 5px 10px;
margin: 2px 5px;
}
.slicknav_nav a {
padding: 5px 10px;
margin: 2px 5px;
text-decoration: none;
color: #fff;
}
.slicknav_nav .slicknav_item a {
padding: 0;
margin: 0;
}
.slicknav_nav .slicknav_item:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #fff;
}
.slicknav_nav a:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #222;
}
.slicknav_nav .slicknav_txtnode {
margin-left: 15px;
}
Chapter 6 Template/Week 6/css/spectrum.css
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
.sp-container {
position:absolute;
top:0;
left:0;
display:inline-block;
*display: inline;
*zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
}
.sp-container.sp-flat {
position: relative;
}
/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
*/
.sp-top {
position:relative;
width: 100%;
display:inline-block;
}
.sp-top-inner {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.sp-color {
position: absolute;
top:0;
left:0;
bottom:0;
right:20%;
}
.sp-hue {
position: absolute;
top:0;
right:0;
bottom:0;
left:84%;
height: 100%;
}
.sp-clear-enabled .sp-hue {
top:33px;
height: 77.5%;
}
.sp-fill {
padding-top: 80%;
}
.sp-sat, .sp-val {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.sp-alpha-enabled .sp-top {
margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
display: block;
}
.sp-alpha-handle {
position:absolute;
top:-4px;
bottom: -4px;
width: 6px;
left: 50%;
cursor: pointer;
border: 1px solid black;
background: white;
opacity: .8;
}
.sp-alpha {
display: none;
position: absolute;
bottom: -14px;
right: 0;
left: 0;
height: 8px;
}
.sp-alpha-inner {
border: solid 1px #333;
}
.sp-clear {
display: none;
}
.sp-clear.sp-clear-display {
background-position: center;
}
.sp-clear-enabled .sp-clear {
display: block;
position:absolute;
top:0px;
right:0;
bottom:0;
left:84%;
height: 28px;
}
/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider,
.sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging
.sp-input, .sp-container button {
-webkit-user-select:none;
-moz-user-select: -moz-none;
-o-user-select:none;
user-select: none;
}
.sp-container.sp-input-disabled .sp-input-container {
display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-
container {
display: none;
}
.sp-palette-only .sp-picker-container {
display: none;
}
.sp-palette-disabled .sp-palette-container {
display: none;
}
.sp-initial-disabled .sp-initial {
display: none;
}
/* Gradients for hue, saturation and value instead of images.
Not pretty... but it works */
.sp-sat {
background-image: -webkit-gradient(linear, 0 0, 100% 0,
from(#FFF), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(left, #FFF,
rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(left, #fff, rgba(204,
154, 129, 0));
background-image: -o-linear-gradient(left, #fff, rgba(204,
154, 129, 0));
background-image: -ms-linear-gradient(left, #fff, rgba(204,
154, 129, 0));
background-image: linear-gradient(to right, #fff, rgba(204,
154, 129, 0));
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(GradientType =
1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
filter :
progid:DXImageTransform.Microsoft.gradient(GradientType =
1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
background-image: -webkit-gradient(linear, 0 100%, 0 0,
from(#000000), to(rgba(204, 154, 129, 0)));
background-image: -webkit-linear-gradient(bottom, #000000,
rgba(204, 154, 129, 0));
background-image: -moz-linear-gradient(bottom, #000,
rgba(204, 154, 129, 0));
background-image: -o-linear-gradient(bottom, #000,
rgba(204, 154, 129, 0));
background-image: -ms-linear-gradient(bottom, #000,
rgba(204, 154, 129, 0));
background-image: linear-gradient(to top, #000, rgba(204,
154, 129, 0));
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#0
0CC9A81, endColorstr=#FF000000)";
filter :
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0
0CC9A81', endColorstr='#FF000000');
}
.sp-hue {
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00
17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%,
#ff0000 100%);
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00
17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%,
#ff0000 100%);
background: -o-linear-gradient(top, #ff0000 0%, #ffff00
17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%,
#ff0000 100%);
background: -webkit-gradient(linear, left top, left bottom,
from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33,
#00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff),
color-stop(0.83, #ff00ff), to(#ff0000));
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00
17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%,
#ff0000 100%);
background: linear-gradient(to bottom, #ff0000 0%, #ffff00
17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%,
#ff0000 100%);
}
/* IE filters do not support multiple color stops.
Generate 6 divs, line them up, and do two color gradients for
each.
Yes, really.
*/
.sp-1 {
height:17%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff
0000', endColorstr='#ffff00');
}
.sp-2 {
height:16%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff
ff00', endColorstr='#00ff00');
}
.sp-3 {
height:17%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0
0ff00', endColorstr='#00ffff');
}
.sp-4 {
height:17%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0
0ffff', endColorstr='#0000ff');
}
.sp-5 {
height:16%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#0
000ff', endColorstr='#ff00ff');
}
.sp-6 {
height:17%;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff
00ff', endColorstr='#ff0000');
}
.sp-hidden {
display: none !important;
}
/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }
/* Mobile devices, make hue slider bigger so it is easier to slide
*/
@media (max-device-width: 480px) {
.sp-color { right: 40%; }
.sp-hue { left: 63%; }
.sp-fill { padding-top: 60%; }
}
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
position:absolute;
top:0;
left: 0;
}
.sp-slider {
position: absolute;
top:0;
cursor:pointer;
height: 3px;
left: -1px;
right: -1px;
border: 1px solid #000;
background: white;
opacity: .8;
}
/*
Theme authors:
Here are the basic themeable display options (colors, fonts,
global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-
color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode",
"Lucida Sans", Geneva, Verdana, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.sp-top {
margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
border: solid 1px #666;
}
/* Input */
.sp-input-container {
float:right;
width: 100px;
margin-bottom: 4px;
}
.sp-initial-disabled .sp-input-container {
width: 100%;
}
.sp-input {
font-size: 12px !important;
border: 1px inset;
padding: 4px 5px;
margin: 0;
width: 100%;
background:transparent;
border-radius: 3px;
color: #222;
}
.sp-input:focus {
border: 1px solid orange;
}
.sp-input.sp-validation-error {
border: 1px solid red;
background: #fdd;
}
.sp-picker-container , .sp-palette-container {
float:left;
position: relative;
padding: 10px;
padding-bottom: 300px;
margin-bottom: -290px;
}
.sp-picker-container {
width: 172px;
border-left: solid 1px #fff;
}
/* Palettes */
.sp-palette-container {
border-right: solid 1px #ccc;
}
.sp-palette-only .sp-palette-container {
border: 0;
}
.sp-palette .sp-thumb-el {
display: block;
position:relative;
float:left;
width: 24px;
height: 15px;
margin: 3px;
cursor: pointer;
border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-
thumb-active {
border-color: orange;
}
.sp-thumb-el {
position:relative;
}
/* Initial */
.sp-initial {
float: left;
border: solid 1px #333;
}
.sp-initial span {
width: 30px;
height: 25px;
border:none;
display:block;
float:left;
margin:0;
}
.sp-initial .sp-clear-display {
background-position: center;
}
/* Buttons */
.sp-palette-button-container,
.sp-button-container {
float: right;
}
/* Replacer (the little preview div that shows up instead of the
<input>) */
.sp-replacer {
margin:0;
overflow:hidden;
cursor:pointer;
padding: 4px;
display:inline-block;
*zoom: 1;
*display: inline;
border: solid 1px #91765d;
background: #eee;
color: #333;
vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111;
}
.sp-replacer.sp-disabled {
cursor:default;
border-color: silver;
color: silver;
}
.sp-dd {
padding: 2px 0;
height: 16px;
line-height: 16px;
float:left;
font-size:10px;
}
.sp-preview {
position:relative;
width:25px;
height: 20px;
border: solid 1px #222;
margin-right: 5px;
float:left;
z-index: 0;
}
.sp-palette {
*width: 220px;
max-width: 220px;
}
.sp-palette .sp-thumb-el {
width:16px;
height: 16px;
margin:2px 1px;
border: solid 1px #d0d0d0;
}
.sp-container {
padding-bottom:0;
}
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee,
#cccccc);
background-image: -moz-linear-gradient(top, #eeeeee,
#cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee,
#cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
text-align: center;
text-shadow: 0 1px 0 #eee;
vertical-align: middle;
}
.sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd,
#bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd,
#bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd,
#bbbbbb);
background-image: -o-linear-gradient(top, #dddddd,
#bbbbbb);
background-image: linear-gradient(to bottom, #dddddd,
#bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0
#eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0
#eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0
#eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0
#eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
font-size: 11px;
color: #d93f3f !important;
margin:0;
padding:2px;
margin-right: 5px;
vertical-align: middle;
text-decoration:none;
}
.sp-cancel:hover {
color: #d93f3f !important;
text-decoration: underline;
}
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
border-color: #000;
}
.sp-preview, .sp-alpha, .sp-thumb-el {
position:relative;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
AAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+
YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg
==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display:block;
position:absolute;
top:0;left:0;bottom:0;right:0;
}
.sp-palette .sp-thumb-inner {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
ABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQ
BBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsg
JFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIf
OJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8kl
k9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC
9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CY
II=);
}
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
ABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAA
RnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvq
GQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Lj
EwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahE
AZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2
BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0
tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQ
LY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6
HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+
6vH4G0P5wdkAAAAASUVORK5CYII=);
}
.sp-clear-display {
background-repeat:no-repeat;
background-position: center;
background-image:
url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZm
Z2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx
8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvo
MGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhK
UJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA
8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSq
Mico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsAB
iZAEFB06gIBWC1mLVgBa0AAOw==);
}
Chapter 6 Template/Week 6/images/background.jpg
Chapter 6 Template/Week 6/images/background2.jpg
Chapter 6 Template/Week 6/images/favicon_week2-1.ico
Chapter 6 Template/Week 6/images/FinishedImage.JPG
Chapter 6 Template/Week 6/images/image-lg.jpg
Chapter 6 Template/Week 6/images/image-sm.jpg
Chapter 6 Template/Week 6/images/img_avatar2.png
Chapter 6 Template/Week 6/images/jpegat20012quality.jpg
Chapter 6 Template/Week 6/images/Planets2013.svg.png
Chapter 6 Template/Week 6/images/rsImage.jpg
Chapter 6 Template/Week 6/images/rsImage02.jpg
Chapter 6 Template/Week 6/images/rummage_sale_week2-1.png
Chapter 6 Template/Week 6/images/submit3.jpg
Chapter 6 Template/Week 6/images/submit3_web.gif
Chapter 6 Template/Week 6/images/Thumbs.db
Chapter 6 Template/Week 6/js/jquery.collapser.min.js
/* jQuery - Collapser - Plugin v2.0 www.aakashweb.com (c)
2014 Aakash Chakravarthy MIT License. */
(function(e,m,p,q){function
l(b,f){this.o=e.extend({},n,f);this.e=e(b);this.init()}var
n={target:"next",mode:"words",speed:"slow",truncate:10,ellipsi
s:"...",effect:"fade",controlBtn:"",showText:"Show
more",hideText:"Hide text",showClass:"show-
class",hideClass:"hide-
class",atStart:"hide",lockHide:!1,dynamic:!1,changeText:!1,bef
oreShow:null,afterShow:null,beforeHide:null,afterHide:null};l.p
rototype={init:function(){var
b=this;b.mode=b.o.mode;b.remaining={};b.ctrlHtml=' <a
href="#" data-ctrl class="'+
(e.isFunction(b.o.controlBtn)?"":b.o.controlBtn)+'"></a>';e(b.e)
.each(function(){e(this).data("oCnt",b.e.html());var
a=e.isFunction(b.o.atStart)?b.o.atStart.call(b.e):b.o.atStart,a="u
ndefined"!==typeof b.e.attr("data-start")?b.e.attr("data-
start"):a;"hide"==a?b.hide(b.e,0):b.show(b.e,0)});var
f;e(m).on("resize",function(){b.o.dynamic&&"lines"==b.mode&
&(clearTimeout(f),f=setTimeout(function(){b.reInit(b.e)},100))
})},show:function(b,f){var a=this,c=e(b);"undefined"===typeof
f&&(f=a.o.speed);var
g=function(){e.isFunction(a.o.afterShow)&&
a.o.afterShow.call(a.e,a)};e.isFunction(a.o.beforeShow)&&a.o.b
eforeShow.call(a.e,a);switch(a.mode){case "chars":case
"words":var d=c.height();c.html(c.data("tHTML"));var
h=c.height();c.height(d);c.animate({height:h},f,function(){c.hei
ght("auto");g()}).removeClass(a.o.hideClass).addClass(a.o.show
Class);c.data("tHTML",c.html());break;case
"lines":0==c.children("div").length&&c.wrapInner("<div>");var
k=c.children("div"),d=k.height(),h=k.html(c.data("oCnt")).css("
height","").height();k.css("height",d);
k.animate({height:h},f,function(){k.height("auto");g()});c.remo
veClass(a.o.hideClass).addClass(a.o.showClass);break;case
"block":a.blockMode(c,"show",f,g)}a.status=1;if(!0==a.o.lockH
ide)return c.find("[data-
ctrl]").remove(),"";if("block"==a.mode)c.off("click.coll").on("c
lick.coll",function(b){b.preventDefault();a.hide(c)});else
0!=c.find("[data-
ctrl]").length||e.isFunction(a.o.controlBtn)||c.append(a.ctrlHtml)
,a.ctrlBtn=e.isFunction(a.o.controlBtn)?a.o.controlBtn.call(a.e):
e(c.find("[data-ctrl]")),
a.ctrlBtn.off("click.coll").on("click.coll",function(b){b.prevent
Default();a.hide(c)}).html(a.o.hideText)},hide:function(b,f){var
a=this,c=e(b);"undefined"===typeof f&&(f=a.o.speed);var
g=function(){e.isFunction(a.o.afterHide)&&a.o.afterHide.call(a.
e,a)};e.isFunction(a.o.beforeHide)&&a.o.beforeHide.call(a.e,a);
c.find("[data-ctrl]").remove();switch(a.mode){case "chars":var
d=e.trim(c.text());a.remaining.chars=d.length-
a.o.truncate;d.length>a.o.truncate&&(c.data("tHTML",c.html())
,d=a.pad(d.slice(0,
a.o.truncate),d.slice(a.o.truncate,d.length)),c.html(d).removeCla
ss(a.o.showClass).addClass(a.o.hideClass),g());break;case
"words":d=e.trim(c.text());d=d.split("
");a.remaining.words=d.length-
a.o.truncate;d.length>a.o.truncate&&(c.data("tHTML",c.html())
,d=a.pad(d.slice(0,a.o.truncate).join("
"),d.slice(a.o.truncate,d.length).join("
")),c.html(d).removeClass(a.o.showClass).addClass(a.o.hideCla
ss),g());break;case
"lines":0==c.children("div").length&&c.wrapInner("<div>");d=
c.children("div").css("height",
"");d.html(d.text());var h=d.height();"undefined"===typeof
c.data("lHeight")?(temp=d.clone(),lHeight=temp.text("a").insert
After(d).height(),c.data("lHeight",lHeight),d.next().remove()):l
Height=c.data("lHeight");lines=h/lHeight;a.remaining.lines=line
s-
a.o.truncate;0<a.remaining.lines&&(d.css("overflow","hidden"),
d.animate({height:lHeight*a.o.truncate},f).data("tHeight",h),c.r
emoveClass(a.o.showClass).addClass(a.o.hideClass),0!=c.find("
[data-
ctrl]").length||e.isFunction(a.o.controlBtn)||c.append(a.ctrlHtml)
,
g());break;case
"block":a.blockMode(c,"hide",f,g)}a.status=0;"block"==a.mode
?c.unbind("click.coll").bind("click.coll",function(b){b.preventD
efault();a.show(c)}):(a.ctrlBtn=e.isFunction(a.o.controlBtn)?a.o
.controlBtn.call(a.e):e(c.find("[data-
ctrl]")),a.ctrlBtn.off("click.coll").on("click.coll",function(b){b.
preventDefault();a.show(c)}).html(a.o.showText),g=a.o.showTe
xt,d={chars:["character","characters"],words:["word","words"],l
ines:["lines","lines"]},g=g.replace("%s",a.remaining[a.mode]+(
1==a.remaining[a.mode]?
" "+d[a.mode][0]:"
"+d[a.mode][1])),a.ctrlBtn.html(g))},pad:function(b,f){return
b+'<span class="coll-
ellipsis">'+this.o.ellipsis+"</span>"+(e.isFunction(this.o.ctrlBt
n)?"":this.ctrlHtml)+'<span class="coll-hidden"
style="display:none">'+f+"</span>"},blockMode:function(b,f,a,
c){var
g=["fadeOut","slideUp","fadeIn","slideDown"],d="fade"==this.
o.effect?0:1,g="hide"==f?g[d]:g[d+2];if(e.isFunction(this.o.targ
et))this.o.target.call(this.e)[g](a,c);else
if(e.fn[this.o.target])e(b)[this.o.target]()[g](a,
c);"show"==f?(b.removeClass(this.o.showClass).addClass(this.o
.hideClass),this.o.changeText&&b.text(this.o.hideText)):(b.rem
oveClass(this.o.hideClass).addClass(this.o.showClass),this.o.ch
angeText&&b.text(this.o.showText))},reInit:function(b){b.find(
"[data-
ctrl]").remove();b.html(this.e.data("oCnt"));0==this.status?this.
hide(b,0):this.show(b,0)}};e.fn.collapser=function(b){return
this.each(function(){e.data(this,"collapser")||e.data(this,"collaps
er",new l(this,b))})}})(jQuery,window,document);
Chapter 6 Template/Week 6/js/jquery.slicknav.min.js
/*!
SlickNav Responsive Mobile Menu
(c) 2013 Josh Cope
licensed under GPL and MIT
*/
(function(e,t,n){var
r={label:"MENU",duplicate:true,duration:200,easingOpen:"swin
g",easingClose:"swing",closedSymbol:"&#9658;",openedSymbo
l:"&#9660;",prependTo:"body",parentTag:"a",closeOnClick:fals
e,allowParentLinks:false},i="slicknav",s="slicknav";e.fn[i]=fun
ction(n){return this.each(function(){function h(e){var
t=e.data("menu");if(!t){t={};t.arrow=e.children("."+s+"_arrow"
);t.ul=e.next("ul");t.parent=e.parent();e.data("menu",t)}if(e.pare
nt().hasClass(s+"_collapsed")){t.arrow.html(o.openedSymbol);t.
parent.removeClass(s+"_collapsed");p(t.ul,true)}else{t.arrow.ht
ml(o.closedSymbol);t.parent.addClass(s+"_collapsed");p(t.ul,tru
e)}}function p(e,t){var n=v(e);var
r=0;if(t)r=o.duration;if(e.hasClass(s+"_hidden")){e.removeClas
s(s+"_hidden");e.slideDown(r,o.easingOpen);e.attr("aria-
hidden","false");n.attr("tabindex","0");d(e,false)}else{e.addClas
s(s+"_hidden");e.slideUp(r,o.easingClose,function(){e.attr("aria
-hidden","true");n.attr("tabindex","-
1");d(e,true);e.hide()})}}function d(t,n){var
r=t.children("li").children("ul").not("."+s+"_hidden");if(!n){r.ea
ch(function(){var t=e(this);t.attr("aria-hidden","false");var
r=v(t);r.attr("tabindex","0");d(t,n)})}else{r.each(function(){var
t=e(this);t.attr("aria-hidden","true");var
r=v(t);r.attr("tabindex","-1");d(t,n)})}}function v(e){var
t=e.data("menu");if(!t){t={};var n=e.children("li");var
r=n.children("a");t.links=r.add(n.children("."+s+"_item"));e.dat
a("menu",t)}return t.links}function m(t){if(!t){e("."+s+"_item,
."+s+"_btn").css("outline","none")}else{e("."+s+"_item,
."+s+"_btn").css("outline","")}}var i=e(this);var
o=e.extend({},r,n);if(o.duplicate){var
u=i.clone();u.removeAttr("id");u.find("*").each(function(t,n){e(
n).removeAttr("id")})}else var u=i;var
a=s+"_icon";if(o.label==""){a+=" "+s+"_no-
text"}if(o.parentTag=="a"){o.parentTag='a
href="#"'}u.attr("class",s+"_nav");var f=e('<div
class="'+s+'_menu"></div>');var l=e("<"+o.parentTag+' aria-
haspopup="true" tabindex="0" class="'+s+'_btn"><span
class="'+s+'_menutxt">'+o.label+'</span><span
class="'+a+'"><span class="'+s+'_icon-bar"></span><span
class="'+s+'_icon-bar"></span><span class="'+s+'_icon-
bar"></span></span></a>');e(f).append(l);e(o.prependTo).prepe
nd(f);f.append(u);var c=u.find("li");e(c).each(function(){var
t=e(this);data={};data.children=t.children("ul").attr("role","men
u");t.data("menu",data);if(data.children.length>0){var
n=t.contents();var
r=[];e(n).each(function(){if(!e(this).is("ul")){r.push(this)}else{r
eturn false}});var i=e(r).wrapAll("<"+o.parentTag+'
role="menuitem" aria-haspopup="true" tabindex="-1"
class="'+s+'_item"/>').parent();t.addClass(s+"_collapsed");t.add
Class(s+"_parent");e(r).last().after('<span
class="'+s+'_arrow">'+o.closedSymbol+"</span>")}else
if(t.children().length==0){t.addClass(s+"_txtnode")}t.children("
a").attr("role","menuitem").click(function(){if(o.closeOnClick)e
(l).click()})});e(c).each(function(){var
t=e(this).data("menu");p(t.children,false)});p(u,false);u.attr("rol
e","menu");e(t).mousedown(function(){m(false)});e(t).keyup(fu
nction(){m(true)});e(l).click(function(e){e.preventDefault();p(u
,true)});u.on("click","."+s+"_item",function(t){t.preventDefault
();h(e(this))});e(l).keydown(function(e){var
t=e||event;if(t.keyCode==13){e.preventDefault();p(u,true)}});u.
on("keydown","."+s+"_item",function(t){var
n=t||event;if(n.keyCode==13){t.preventDefault();h(e(t.target))}
});if(o.allowParentLinks){e("."+s+"_item
a").click(function(e){e.stopImmediatePropagation()})}})}})(jQ
uery,document,window)
Chapter 6 Template/Week 6/Week8-1.html
Image Puzzle
Drag the blocks to make the complete image in the grid as
shown below:
Check Puzzle
© 2018 Bill

Chapter 6 TemplateWeek 6csshomework.css html {.docx

  • 1.
    Chapter 6 Template/Week6/css/homework.css /* */ html { background-image: url("../images/background.jpg"); height:100%; display:flex; flex-direction: column; } body { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; max-width: 1080px; width: 95%; /* fixed width was 800 */ height: 450%; background-color: rgba(255, 255, 255, 0.1); /* White background with 10% opacity */ margin: 0 auto;
  • 2.
    padding: 0; border: 0pxsolid black; /* box-shadow: 0 9px 18px 9px; */ } h1, h2, h3, p { margin: 0; padding: 0; } /* Header */ header { background-image: -webkit-linear-gradient(45deg, white 0%, blue 75%, green 100%); background-image: -moz-linear-gradient(45deg, white 0%, blue 75%, green 100%); background-image: -o-linear-gradient(45deg, white 0%, blue 75%, green 100%); background-image: linear-gradient(45deg, white 0%, blue 75%, green 100%);
  • 3.
    padding: .9375em 1.875%.9375em 1.875%; /* 15 / 16; 15 / 800 x 100 */ } header img { float: left; padding-right: 1.875%; /* 15 / 800 x 100 */ width: 10.6%; max-width: 85px; min-width: 40px; } header h2 { font-size: 230%; } header h3 { font-size: 125%; padding-bottom: 15px; } h2#result {
  • 4.
    color: red; } /* Dragand Drop */ #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } div#group { float: left; } div#twoBoxesTop { float: left;
  • 5.
    } div#imgDiv { float: left; } div#twoBoxesBot{ float: left; } div#div1 { width: 100px; height: 100px; padding: 0px; border: 1px solid #aaaaaa; float: left; } div#div2 {
  • 6.
    width: 100px; height: 100px; padding:0px; border: 1px solid #aaaaaa; float: right; } div#div3 { width: 100px; height: 100px; padding: 0px; border: 1px solid #aaaaaa; float: left; } div#div4 { width: 100px; height: 100px;
  • 7.
    padding: 0px; border: 1pxsolid #aaaaaa; float: right; } /* background video */ .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; }
  • 8.
    .fullscreen-bg__video { position: absolute; top:0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .fullscreen-bg__video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen-bg__video { width: 300%;
  • 9.
    left: -100%; } } @media (max-width:767px) { .fullscreen-bg { background: url('../../images/videoframe.jpg') center center / cover no-repeat; } .fullscreen-bg__video { display: none; } } .logo { width: 180px; height: 100px; float: left;
  • 10.
    } .rImage { width: 80px; height:60px; float: left; } /* main */ main.main { } main p#a1 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: blue; text-align: center; font-weight: bold }
  • 11.
    div#mainContent { width: 700px; height:600px; border: 1px solid blue; } div#mainContent p#mt { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: center; font-weight: normal; font-size: 34pt; } div#mainContent p#et { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman";
  • 12.
    color: black; text-align: center; font-weight:normal; font-size: 24pt; } div#mainContent p#ed { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: center; font-weight: normal; font-size: 24pt; } div#mainContent p#msg01 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black;
  • 13.
    text-align: left; font-weight: normal; font-size:14pt; } div#img01 { padding-left: 215px; } video#mainVideo { border: 1px solid #021a40; } div#mainVideo { border: 1px solid blue; width: 320px; height: 240px;
  • 14.
    } textarea#txta01 { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: blue; text-align: left; } label{ display:inline-block; width:150px; } label#bigLabel{ display:inline-block;
  • 15.
    width:500px; } label#bigLabel2{ display:inline-block; width:400px; } label#lbl01 { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold; } label#lbl02 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black;
  • 16.
    text-align: left; font-weight: bold; } label#lbl03{ font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold; width:300px; } label#lbl04 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold;
  • 17.
    width:300px; } label#lbl05 { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold; width:300px; } label#lbl06 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold;
  • 18.
    width:300px; } label#lbl07 { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold; width:200px; } label#lbl08 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: bold; width:200px;
  • 19.
    } label#lblc01 { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: center; font-weight: bold; font-size: 24pt; } label#lblc02 { font-family: Verdana, Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: black; text-align: left; font-weight: normal; }
  • 20.
    input#foreColor { font-family: Verdana,Arial, Helvetica, sans-serif, "Courier New","Times New Roman"; color: red; text-align: left; } fieldset { background-color:#ccffcc; } legend { color: red; font-weight: bold; } /* Table */ table {
  • 21.
    width:100%; } table, th, td{ border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #ffffcc; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: #66ffcc;
  • 22.
    color: black; } table img{ border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } table img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); } iframe { display:block; }
  • 23.
    /* Sidebar */ aside{ float: left; width: 100px; padding: 5px 0; } aside#table { float: left; width: 50px; padding: 5px 0; } aside#leftside { float: left; width: 33%; padding: 5px 0; height: 750px;
  • 24.
    } aside a { color:white; } /*Navigation menu */ #nav_menu { clear: left; } #nav_menu ul { list-style: none; position: relative; } #nav_menu ul li { float: left; width: 20%; /* 160 / 800 x 100 */
  • 25.
    } #nav_menu ul ul{ display: none; position: absolute; top: 100%; } #nav_menu ul ul li { float: none; } #nav_menu ul li:hover > ul { display: block; } #nav_menu > ul::after { content: ""; clear: both; display: block; } #nav_menu ul {
  • 26.
    margin: 0; padding: 0; } #nav_menuul li:hover ul { width: 100%; } #nav_menu ul li a { text-align: center; display: block; padding: .7em 0; text-decoration: none; background-color: #00ff00; color: red; } #nav_menu ul li a.current { color: orange; } #nav_menu ul li a:hover, #nav_menu ul li a:focus {
  • 27.
    background-color: #ffff99; } #nav_list ul{ list-style: none; padding-left: 1.5em; } #nav_list ul li { width: 100px; margin-bottom: .5em; border: 2px solid black; } #nav_list ul li a { display: block; font-weight: bold; text-decoration: none; background-color: orange; padding: .5em 0 .5em .5em;
  • 28.
    color: black; } /* Section*/ section { width: 720px; float: right; padding: 5px 5px 5px 5px; } section#table { width: 820px; float: right; padding: 5px 5px 5px 5px; } section img { float: left; padding-right: 1.875%;
  • 29.
    } img#i1 { float: right; } sectionh1 { font-size: 140%; margin-bottom: .5em; } section h1:first-letter { font-size: 140%; } section h2 { font-size: 125%; margin: .8em 0 .5em 0; } section h3 {
  • 30.
    font-size: 110%; margin: .8em0 .5em 0; text-shadow: 2px 2px 5px red; } section h4 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } section p { margin-bottom: .5em; } section p#dr1 { color: Blue; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; font-size: 185%;
  • 31.
    } section a { font-weight:bold; color: orange; } section a:link, main a:visited { color: orange; } section a:hover, main a:focus { color: green; } section#form h2 { color: green; } section#form h3 {
  • 32.
    color: blue; } section h1#v1{ text-shadow: 2px 2px 5px red; } section p#audio1 { text-align: center; max-width: 320px; color: blue; background-color: yellow; } audio#audioControls { padding-left: 10px; } /* p#v4 {
  • 33.
    color:black; } */ canvas#drawing { background-color: rgba(255,255, 255, 0.6); /* White background with 60% opacity */ /* width: 600px; height: 300px; */ border: 1px solid #0000ff; } div#c1 { background-color: rgba(255, 255, 255, 0.1); /* White background with 10% opacity */ max-width: 350px; max-height: 180px; }
  • 34.
    /* div#div1 { width: 100px; height:100px; background-color: red; -webkit-animation-name: example; -webkit-animation-duration: 8s; animation-name: example; animation-duration: 8s; } */ /* use combinator to set p section within div to yellow background */ div#d1 > p { background-color: yellow; } /* use combinator to set p section after div to blue background and text to white */ div#d3 + p {
  • 35.
    color: white; background-color: blue; } div#twoCol{ padding: 0px; margin: 0px width:550px; } div#fcs { float: left; padding-right: 0px; margin: 0px } div#leftCol1 {
  • 36.
    float: left; padding-right: 0px; margin:0px } div#rightCol1 { float: right; padding-left: 0px; margin: 0px } div#leftCol2 { float: left; padding-right: 30px; margin: 0px } div#rightCol2 {
  • 37.
    float: right; padding-left: 30px; margin:0px } select#fcs { background-color: blue; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* Standard syntax */ @keyframes example {
  • 38.
    0% {background-color: red;} 25%{background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } .newspaper { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } /* Footer */ footer { clear: both; border-top: 2px solid black; padding: 15px;
  • 39.
    background-image: -webkit-linear-gradient(45deg, black0%, orange 25%, white 100%); background-image: -moz-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: -o-linear-gradient(45deg, black 0%, orange 25%, white 100%); background-image: linear-gradient(45deg, black 0%, orange 25%, white 100%); } footer p { font-size: 90%; text-align: center; } Chapter 6 Template/Week 6/css/jquery-ui.css /*! jQuery UI - v1.12.1 - 2016-09-14 * http://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayX Pos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bg HeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPo s=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHig
  • 40.
    hlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPo s=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgO verlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgConte ntRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepe at=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui- icons_555555_256x240.png%22)&iconsHighlight=url(%22imag es%2Fui- icons_777620_256x240.png%22)&iconsHeader=url(%22images %2Fui- icons_444444_256x240.png%22)&iconsError=url(%22images% 2Fui- icons_cc0000_256x240.png%22)&iconsDefault=url(%22images %2Fui- icons_777777_256x240.png%22)&iconsContent=url(%22images %2Fui- icons_444444_256x240.png%22)&iconsActive=url(%22images %2Fui- icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlO verlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHea der=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent= &bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D3 0)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShado wPerc=30&opacityOverlayPerc=30&iconColorHover=%235555 55&iconColorHighlight=%23777620&iconColorHeader=%2344 4444&iconColorError=%23cc0000&iconColorDefault=%237777 77&iconColorContent=%23444444&iconColorActive=%23ffffff &bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOp acityError=95&bgImgOpacityHighlight=55&bgImgOpacityCont ent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bg ImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureSha dow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgText ureHighlight=flat&bgTextureContent=flat&bgTextureHeader=fl at&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefa ult=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Aria l%2CHelvetica%2Csans- serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessSha
  • 41.
    dow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opac ityShadow=.3&bgColorShadow=%23666666&opacityOverlay=. 3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderCol orError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=% 23777620&borderColorHighlight=%23dad55e&bgColorHighligh t=%23fffa90&fcContent=%23333333&borderColorContent=%23 dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&bo rderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fc Active=%23ffffff&borderColorActive=%23003eff&bgColorActi ve=%23007fff&fcHover=%232b2b2b&borderColorHover=%23c ccccc&bgColorHover=%23ededed&fcDefault=%23454545&bor derColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6 * Copyright jQueryFoundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3;
  • 42.
    text-decoration: none; font-size: 100%; list-style:none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; pointer-events: none; }
  • 43.
    /* Icons ----------------------------------*/ .ui-icon { display:inline-block; vertical-align: middle; margin-top: -.25em; position: relative; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; font-size: 100%;
  • 44.
    } .ui-accordion .ui-accordion-content { padding:1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///y H5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px .4em; } .ui-menu .ui-menu-divider { margin: 5px 0;
  • 45.
    height: 0; font-size: 0; line-height:0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { padding: .4em 1em; display: inline-block; position: relative;
  • 46.
    line-height: normal; margin-right: .1em; cursor:pointer; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Support: IE <= 11 */ overflow: visible; } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2em; box-sizing: border-box; text-indent: -9999px; white-space: nowrap; } /* no icon support for input elements */ input.ui-button.ui-button-icon-only { text-indent: 0; } /* button icon element(s) */
  • 47.
    .ui-button-icon-only .ui-icon { position:absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: .4em 1em; } /* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup { vertical-align: middle; display: inline-block; }
  • 48.
    .ui-controlgroup > .ui-controlgroup-item{ float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup-vertical .ui-controlgroup-item { box-sizing: border-box; } .ui-controlgroup .ui-controlgroup-label { padding: .4em 1em; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui- controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui- controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget- content {
  • 49.
    border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget- content{ border-bottom: none; } /* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input { /* Support: IE8 only, Android < 4.4 only */ width: 75%; width: calc( 100% - 2.4em ); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { box-shadow: inset 1px 1px 1px #ccc; border-radius: .12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui- icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px;
  • 50.
    height: 8px; border-width: 4px; border-style:solid; } .ui-checkboxradio-disabled { pointer-events: none; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; }
  • 51.
    .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;
  • 52.
    } .ui-datepicker td { border:0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker- current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto;
  • 53.
    } .ui-datepicker-multi .ui-datepicker-group { float:left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker- header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker- header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; }
  • 54.
    .ui-datepicker-rtl .ui-datepicker-prev { right:2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui- datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker- header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker- header { border-right-width: 0; border-left-width: 1px; } /* Icons */
  • 55.
    .ui-datepicker .ui-icon { display:block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; left: .5em; top: .3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; }
  • 56.
    .ui-dialog .ui-dialog-content { position:relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0;
  • 57.
    } .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog.ui-resizable-ne, .ui-dialog .ui-resizable-nw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute;
  • 58.
    font-size: 0.1px; display: block; -ms-touch-action:none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%;
  • 59.
    } .ui-resizable-se { cursor: se-resize; width:12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px;
  • 60.
    height: 100%; } .ui-progressbar .ui-progressbar-overlay{ background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///y H/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAA AKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKX qymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1 frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+H ycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObk pOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAA AApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS1 8y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+v UWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZx QIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2 o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Y y22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3q LVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8p ma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+D iHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaU AAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FN WtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ 1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8Hm HEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGN ileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAI fkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMF WW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT 1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELse fVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBno BwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJA QABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tn SeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEm JRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+Bbe ZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoS UI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAA AAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZr
  • 61.
    Kt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUun BmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+M XSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeo mCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgA AAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqV euOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKo NWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNad oYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSll Zmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/o LvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq +xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY 3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9 yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAA ACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVr VhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcw kpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB 2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl 5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25);/* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-selectmenu-menu { padding: 0;
  • 62.
    margin: 0; position: absolute; top:0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right;
  • 63.
    margin-top: 0; } .ui-slider { position:relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em;
  • 64.
    } .ui-slider-horizontal .ui-slider-range { top:0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-spinner {
  • 65.
    position: relative; display: inline-block; overflow:hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: .222em 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 2em; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-spinner-up {
  • 66.
    top: 0; } .ui-spinner-down { bottom:0; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
  • 67.
    .ui-tabs .ui-tabs-nav li.ui-tabs-loading.ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  • 68.
    font-family: Arial,Helvetica,sans-serif; font-size: 1em; } .ui-widget.ui-widget-content{ border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #dddddd; background: #e9e9e9; color: #333333; font-weight: bold; } .ui-widget-header a { color: #333333; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, /* We use html here because we need a greater specificity to make sure disabled works properly when clicked or hovered */ html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  • 69.
    border: 1px solid#c5c5c5; background: #f6f6f6; font-weight: normal; color: #454545; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button { color: #454545; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: 1px solid #cccccc; background: #ededed; font-weight: normal; color: #2b2b2b; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited,
  • 70.
    a.ui-button:hover, a.ui-button:focus { color: #2b2b2b; text-decoration:none; } .ui-visual-focus { box-shadow: 0 0 3px 1px rgb(94, 158, 214); } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { border: 1px solid #003eff; background: #007fff; font-weight: normal; color: #ffffff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight,
  • 71.
    .ui-widget-header .ui-state-highlight { border:1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #5f3f3f; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
  • 72.
    .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary{ opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("images/ui- icons_444444_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("images/ui- icons_444444_256x240.png"); } .ui-state-hover .ui-icon,
  • 73.
    .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus.ui-icon { background-image: url("images/ui- icons_555555_256x240.png"); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { background-image: url("images/ui- icons_ffffff_256x240.png"); } .ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon { background-image: url("images/ui- icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("images/ui- icons_cc0000_256x240.png"); } .ui-button .ui-icon { background-image: url("images/ui- icons_777777_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; }
  • 74.
    .ui-icon-caret-2-n-s { background-position:-128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px;
  • 75.
    } .ui-icon-arrowthick-2-n-s { background-position:-128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px - 48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px - 48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px - 48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px - 48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px - 48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px - 48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px - 64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px - 64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px - 64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
  • 76.
    .ui-icon-arrowrefresh-1-s { background-position:-176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; }
  • 77.
    .ui-icon-zoomout { background-position:-144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; }
  • 78.
    .ui-icon-seek-prev { background-position:-48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; }
  • 79.
    .ui-icon-circle-check { background-position:-208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px - 208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px - 208px; } .ui-icon-squaresmall-close { background-position: -80px - 208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px - 224px; } .ui-icon-grip-solid-vertical { background-position: -32px - 224px; } .ui-icon-grip-solid-horizontal { background-position: -48px - 224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px - 224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 3px; } .ui-corner-all,
  • 80.
    .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl{ border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 3px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: .003; filter: Alpha(Opacity=.3); /* support: IE8 */ } .ui-widget-shadow { -webkit-box-shadow: 0px 0px 5px #666666; box-shadow: 0px 0px 5px #666666; } Chapter 6 Template/Week 6/css/normalize.css /*! normalize.css v2.1.1 | MIT License | git.io/normalize */ /* =============================================== ===========================
  • 81.
    HTML5 display definitions =============================================== ===========================*/ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without
  • 82.
    controls. * Remove excessheight in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* =============================================== =========================== Base =============================================== =========================== */ /** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Set default font family to sans-serif. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom.
  • 83.
    */ html { /*background: #fff;*/ color: #000; /* 2 */ font-family: sans-serif; /* 3 */ -ms-text-size-adjust: 100%; /* 4 */ -webkit-text-size-adjust: 100%; /* 4 */ } /** * Remove default margin. */ body { margin: 0; } /* =============================================== =========================== Links =============================================== =========================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /**
  • 84.
    * Improve readabilitywhen focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* =============================================== =========================== Typography =============================================== =========================== */ /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; }
  • 85.
    /** * Address styleset to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; }
  • 86.
    /** * Correct fontfamily set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre-wrap; } /** * Set consistent quote types. */ q { quotes: "201C" "201D" "2018" "2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; }
  • 87.
    /** * Prevent `sub`and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* =============================================== =========================== Embedded content =============================================== =========================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0;
  • 88.
    } /** * Correct overflowdisplayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* =============================================== =========================== Figures =============================================== =========================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* =============================================== =========================== Forms =============================================== =========================== */ /** * Define consistent border, margin, and padding.
  • 89.
    */ fieldset { border: 1pxsolid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /**
  • 90.
    * Address Firefox4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text- transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button,
  • 91.
    html input[type="button"], /*1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] {
  • 92.
    -webkit-appearance: textfield; /*1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }
  • 93.
    /* =============================================== =========================== Tables =============================================== =========================== */ /** * Removemost spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } Chapter 6 Template/Week 6/css/slicknav.css /* Mobile Menu Core Style */ .slicknav_btn { position: relative; display: block; vertical-align: middle;
  • 94.
    float: right; padding: 0.438em0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_no-text { margin: 0 } .slicknav_menu .slicknav_icon-bar {
  • 95.
    display: block; width: 1.125em; height:0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em } .slicknav_nav { clear: both } .slicknav_nav ul, .slicknav_nav li { display: block
  • 96.
    } .slicknav_nav .slicknav_arrow { font-size:0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { display: block; cursor: pointer; } .slicknav_nav a { display: block } .slicknav_nav .slicknav_item a { display: inline } .slicknav_menu:before, .slicknav_menu:after { content: " "; display: table;
  • 97.
    } .slicknav_menu:after { clear: both } /*IE6/7 support */ .slicknav_menu { *zoom: 1 } /* User Default Style Change the following styles to modify the appearance of the menu. */ .slicknav_menu { font-size: 16px; } /* Button */ .slicknav_btn {
  • 98.
    margin: 5px 5px6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #222222; } /* Button Text */ .slicknav_menu .slicknav_menutxt { color: #FFF; font-weight: bold; text-shadow: 0 1px 3px #000; } /* Button Lines */ .slicknav_menu .slicknav_icon-bar { background-color: #f5f5f5; }
  • 99.
    .slicknav_menu { background: #4c4c4c; padding:5px; } .slicknav_nav { color: #fff; margin: 0; padding: 0; font-size: 0.875em; } .slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; } .slicknav_nav ul { padding: 0; margin: 0 0 0 20px; }
  • 100.
    .slicknav_nav .slicknav_item { padding:5px 10px; margin: 2px 5px; } .slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #fff; } .slicknav_nav .slicknav_item a { padding: 0; margin: 0; } .slicknav_nav .slicknav_item:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
  • 101.
    background: #ccc; color: #fff; } .slicknav_nava:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; } .slicknav_nav .slicknav_txtnode { margin-left: 15px; } Chapter 6 Template/Week 6/css/spectrum.css /*** Spectrum Colorpicker v1.8.0 https://github.com/bgrins/spectrum Author: Brian Grinstead License: MIT ***/
  • 102.
    .sp-container { position:absolute; top:0; left:0; display:inline-block; *display: inline; *zoom:1; /* https://github.com/bgrins/spectrum/issues/40 */ z-index: 9999994; overflow: hidden; } .sp-container.sp-flat { position: relative; } /* Fix for * { box-sizing: border-box; } */ .sp-container, .sp-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ .sp-top { position:relative; width: 100%; display:inline-block; } .sp-top-inner { position:absolute; top:0; left:0; bottom:0;
  • 103.
    right:0; } .sp-color { position: absolute; top:0; left:0; bottom:0; right:20%; } .sp-hue{ position: absolute; top:0; right:0; bottom:0; left:84%; height: 100%; } .sp-clear-enabled .sp-hue { top:33px; height: 77.5%; } .sp-fill { padding-top: 80%; } .sp-sat, .sp-val { position: absolute; top:0; left:0; right:0; bottom:0; } .sp-alpha-enabled .sp-top { margin-bottom: 18px;
  • 104.
    } .sp-alpha-enabled .sp-alpha { display:block; } .sp-alpha-handle { position:absolute; top:-4px; bottom: -4px; width: 6px; left: 50%; cursor: pointer; border: 1px solid black; background: white; opacity: .8; } .sp-alpha { display: none; position: absolute; bottom: -14px; right: 0; left: 0; height: 8px; } .sp-alpha-inner { border: solid 1px #333; } .sp-clear { display: none; } .sp-clear.sp-clear-display { background-position: center; } .sp-clear-enabled .sp-clear {
  • 105.
    display: block; position:absolute; top:0px; right:0; bottom:0; left:84%; height: 28px; } /*Don't allow text selection */ .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { -webkit-user-select:none; -moz-user-select: -moz-none; -o-user-select:none; user-select: none; } .sp-container.sp-input-disabled .sp-input-container { display: none; } .sp-container.sp-buttons-disabled .sp-button-container { display: none; } .sp-container.sp-palette-buttons-disabled .sp-palette-button- container { display: none; } .sp-palette-only .sp-picker-container { display: none; } .sp-palette-disabled .sp-palette-container { display: none; }
  • 106.
    .sp-initial-disabled .sp-initial { display:none; } /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ .sp-sat { background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); } .sp-val { background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
  • 107.
    background-image: -ms-linear-gradient(bottom, #000, rgba(204,154, 129, 0)); background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0 0CC9A81, endColorstr=#FF000000)"; filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#0 0CC9A81', endColorstr='#FF000000'); } .sp-hue { background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } /* IE filters do not support multiple color stops. Generate 6 divs, line them up, and do two color gradients for
  • 108.
    each. Yes, really. */ .sp-1 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff 0000',endColorstr='#ffff00'); } .sp-2 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff ff00', endColorstr='#00ff00'); } .sp-3 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0 0ff00', endColorstr='#00ffff'); } .sp-4 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0 0ffff', endColorstr='#0000ff'); } .sp-5 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0 000ff', endColorstr='#ff00ff'); } .sp-6 { height:17%; filter:
  • 109.
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff 00ff', endColorstr='#ff0000'); } .sp-hidden { display:none !important; } /* Clearfix hack */ .sp-cf:before, .sp-cf:after { content: ""; display: table; } .sp-cf:after { clear: both; } .sp-cf { *zoom: 1; } /* Mobile devices, make hue slider bigger so it is easier to slide */ @media (max-device-width: 480px) { .sp-color { right: 40%; } .sp-hue { left: 63%; } .sp-fill { padding-top: 60%; } } .sp-dragger { border-radius: 5px; height: 5px; width: 5px; border: 1px solid #fff; background: #000; cursor: pointer; position:absolute; top:0; left: 0; } .sp-slider { position: absolute; top:0; cursor:pointer; height: 3px;
  • 110.
    left: -1px; right: -1px; border:1px solid #000; background: white; opacity: .8; } /* Theme authors: Here are the basic themeable display options (colors, fonts, global widths). See http://bgrins.github.io/spectrum/themes/ for instructions. */ .sp-container { border-radius: 0; background-color: #ECECEC; border: solid 1px #f0c49B; padding: 0; } .sp-container, .sp-container button, .sp-container input, .sp- color, .sp-hue, .sp-clear { font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .sp-top { margin-bottom: 3px; } .sp-color, .sp-hue, .sp-clear { border: solid 1px #666; }
  • 111.
    /* Input */ .sp-input-container{ float:right; width: 100px; margin-bottom: 4px; } .sp-initial-disabled .sp-input-container { width: 100%; } .sp-input { font-size: 12px !important; border: 1px inset; padding: 4px 5px; margin: 0; width: 100%; background:transparent; border-radius: 3px; color: #222; } .sp-input:focus { border: 1px solid orange; } .sp-input.sp-validation-error { border: 1px solid red; background: #fdd; } .sp-picker-container , .sp-palette-container { float:left; position: relative; padding: 10px; padding-bottom: 300px; margin-bottom: -290px; } .sp-picker-container { width: 172px; border-left: solid 1px #fff;
  • 112.
    } /* Palettes */ .sp-palette-container{ border-right: solid 1px #ccc; } .sp-palette-only .sp-palette-container { border: 0; } .sp-palette .sp-thumb-el { display: block; position:relative; float:left; width: 24px; height: 15px; margin: 3px; cursor: pointer; border:solid 2px transparent; } .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp- thumb-active { border-color: orange; } .sp-thumb-el { position:relative; } /* Initial */ .sp-initial { float: left; border: solid 1px #333; } .sp-initial span { width: 30px;
  • 113.
    height: 25px; border:none; display:block; float:left; margin:0; } .sp-initial .sp-clear-display{ background-position: center; } /* Buttons */ .sp-palette-button-container, .sp-button-container { float: right; } /* Replacer (the little preview div that shows up instead of the <input>) */ .sp-replacer { margin:0; overflow:hidden; cursor:pointer; padding: 4px; display:inline-block; *zoom: 1; *display: inline; border: solid 1px #91765d; background: #eee; color: #333; vertical-align: middle; } .sp-replacer:hover, .sp-replacer.sp-active { border-color: #F0C49B; color: #111; }
  • 114.
    .sp-replacer.sp-disabled { cursor:default; border-color: silver; color:silver; } .sp-dd { padding: 2px 0; height: 16px; line-height: 16px; float:left; font-size:10px; } .sp-preview { position:relative; width:25px; height: 20px; border: solid 1px #222; margin-right: 5px; float:left; z-index: 0; } .sp-palette { *width: 220px; max-width: 220px; } .sp-palette .sp-thumb-el { width:16px; height: 16px; margin:2px 1px; border: solid 1px #d0d0d0; } .sp-container { padding-bottom:0; }
  • 115.
    /* Buttons: http://hellohappy.org/css3-buttons/*/ .sp-container button { background-color: #eeeeee; background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(to bottom, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; border-radius: 3px; color: #333; font-size: 14px; line-height: 1; padding: 5px 4px; text-align: center; text-shadow: 0 1px 0 #eee; vertical-align: middle; } .sp-container button:hover { background-color: #dddddd; background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
  • 116.
    border: 1px solid#bbb; border-bottom: 1px solid #999; cursor: pointer; text-shadow: 0 1px 0 #ddd; } .sp-container button:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } .sp-cancel { font-size: 11px; color: #d93f3f !important; margin:0; padding:2px; margin-right: 5px; vertical-align: middle; text-decoration:none; } .sp-cancel:hover { color: #d93f3f !important; text-decoration: underline; } .sp-palette span:hover, .sp-palette span.sp-thumb-active { border-color: #000;
  • 117.
    } .sp-preview, .sp-alpha, .sp-thumb-el{ position:relative; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA AAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+ YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg ==); } .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { display:block; position:absolute; top:0;left:0;bottom:0;right:0; } .sp-palette .sp-thumb-inner { background-position: 50% 50%; background-repeat: no-repeat; } .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA ABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQ BBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsg JFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIf OJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8kl k9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC 9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CY II=); } .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
  • 118.
    ABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAA RnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvq GQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Lj EwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahE AZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2 BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0 tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQ LY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6 HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+ 6vH4G0P5wdkAAAAASUVORK5CYII=); } .sp-clear-display { background-repeat:no-repeat; background-position: center; background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZm Z2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx 8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  • 119.
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvo MGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhK UJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA 8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSq Mico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsAB iZAEFB06gIBWC1mLVgBa0AAOw==); } Chapter 6 Template/Week6/images/background.jpg Chapter 6 Template/Week 6/images/background2.jpg Chapter 6 Template/Week 6/images/favicon_week2-1.ico Chapter 6 Template/Week 6/images/FinishedImage.JPG Chapter 6 Template/Week 6/images/image-lg.jpg Chapter 6 Template/Week 6/images/image-sm.jpg Chapter 6 Template/Week 6/images/img_avatar2.png Chapter 6 Template/Week 6/images/jpegat20012quality.jpg Chapter 6 Template/Week 6/images/Planets2013.svg.png Chapter 6 Template/Week 6/images/rsImage.jpg
  • 120.
    Chapter 6 Template/Week6/images/rsImage02.jpg Chapter 6 Template/Week 6/images/rummage_sale_week2-1.png Chapter 6 Template/Week 6/images/submit3.jpg Chapter 6 Template/Week 6/images/submit3_web.gif Chapter 6 Template/Week 6/images/Thumbs.db Chapter 6 Template/Week 6/js/jquery.collapser.min.js /* jQuery - Collapser - Plugin v2.0 www.aakashweb.com (c) 2014 Aakash Chakravarthy MIT License. */ (function(e,m,p,q){function l(b,f){this.o=e.extend({},n,f);this.e=e(b);this.init()}var n={target:"next",mode:"words",speed:"slow",truncate:10,ellipsi s:"...",effect:"fade",controlBtn:"",showText:"Show more",hideText:"Hide text",showClass:"show- class",hideClass:"hide- class",atStart:"hide",lockHide:!1,dynamic:!1,changeText:!1,bef oreShow:null,afterShow:null,beforeHide:null,afterHide:null};l.p rototype={init:function(){var b=this;b.mode=b.o.mode;b.remaining={};b.ctrlHtml=' <a href="#" data-ctrl class="'+ (e.isFunction(b.o.controlBtn)?"":b.o.controlBtn)+'"></a>';e(b.e) .each(function(){e(this).data("oCnt",b.e.html());var a=e.isFunction(b.o.atStart)?b.o.atStart.call(b.e):b.o.atStart,a="u ndefined"!==typeof b.e.attr("data-start")?b.e.attr("data- start"):a;"hide"==a?b.hide(b.e,0):b.show(b.e,0)});var f;e(m).on("resize",function(){b.o.dynamic&&"lines"==b.mode& &(clearTimeout(f),f=setTimeout(function(){b.reInit(b.e)},100)) })},show:function(b,f){var a=this,c=e(b);"undefined"===typeof f&&(f=a.o.speed);var g=function(){e.isFunction(a.o.afterShow)&& a.o.afterShow.call(a.e,a)};e.isFunction(a.o.beforeShow)&&a.o.b eforeShow.call(a.e,a);switch(a.mode){case "chars":case
  • 121.
    "words":var d=c.height();c.html(c.data("tHTML"));var h=c.height();c.height(d);c.animate({height:h},f,function(){c.hei ght("auto");g()}).removeClass(a.o.hideClass).addClass(a.o.show Class);c.data("tHTML",c.html());break;case "lines":0==c.children("div").length&&c.wrapInner("<div>");var k=c.children("div"),d=k.height(),h=k.html(c.data("oCnt")).css(" height","").height();k.css("height",d); k.animate({height:h},f,function(){k.height("auto");g()});c.remo veClass(a.o.hideClass).addClass(a.o.showClass);break;case "block":a.blockMode(c,"show",f,g)}a.status=1;if(!0==a.o.lockH ide)return c.find("[data- ctrl]").remove(),"";if("block"==a.mode)c.off("click.coll").on("c lick.coll",function(b){b.preventDefault();a.hide(c)});else 0!=c.find("[data- ctrl]").length||e.isFunction(a.o.controlBtn)||c.append(a.ctrlHtml) ,a.ctrlBtn=e.isFunction(a.o.controlBtn)?a.o.controlBtn.call(a.e): e(c.find("[data-ctrl]")), a.ctrlBtn.off("click.coll").on("click.coll",function(b){b.prevent Default();a.hide(c)}).html(a.o.hideText)},hide:function(b,f){var a=this,c=e(b);"undefined"===typeoff&&(f=a.o.speed);var g=function(){e.isFunction(a.o.afterHide)&&a.o.afterHide.call(a. e,a)};e.isFunction(a.o.beforeHide)&&a.o.beforeHide.call(a.e,a); c.find("[data-ctrl]").remove();switch(a.mode){case "chars":var d=e.trim(c.text());a.remaining.chars=d.length- a.o.truncate;d.length>a.o.truncate&&(c.data("tHTML",c.html()) ,d=a.pad(d.slice(0, a.o.truncate),d.slice(a.o.truncate,d.length)),c.html(d).removeCla ss(a.o.showClass).addClass(a.o.hideClass),g());break;case "words":d=e.trim(c.text());d=d.split(" ");a.remaining.words=d.length- a.o.truncate;d.length>a.o.truncate&&(c.data("tHTML",c.html()) ,d=a.pad(d.slice(0,a.o.truncate).join(" "),d.slice(a.o.truncate,d.length).join(" ")),c.html(d).removeClass(a.o.showClass).addClass(a.o.hideCla ss),g());break;case "lines":0==c.children("div").length&&c.wrapInner("<div>");d=
  • 122.
    c.children("div").css("height", "");d.html(d.text());var h=d.height();"undefined"===typeof c.data("lHeight")?(temp=d.clone(),lHeight=temp.text("a").insert After(d).height(),c.data("lHeight",lHeight),d.next().remove()):l Height=c.data("lHeight");lines=h/lHeight;a.remaining.lines=line s- a.o.truncate;0<a.remaining.lines&&(d.css("overflow","hidden"), d.animate({height:lHeight*a.o.truncate},f).data("tHeight",h),c.r emoveClass(a.o.showClass).addClass(a.o.hideClass),0!=c.find(" [data- ctrl]").length||e.isFunction(a.o.controlBtn)||c.append(a.ctrlHtml) , g());break;case "block":a.blockMode(c,"hide",f,g)}a.status=0;"block"==a.mode ?c.unbind("click.coll").bind("click.coll",function(b){b.preventD efault();a.show(c)}):(a.ctrlBtn=e.isFunction(a.o.controlBtn)?a.o .controlBtn.call(a.e):e(c.find("[data- ctrl]")),a.ctrlBtn.off("click.coll").on("click.coll",function(b){b. preventDefault();a.show(c)}).html(a.o.showText),g=a.o.showTe xt,d={chars:["character","characters"],words:["word","words"],l ines:["lines","lines"]},g=g.replace("%s",a.remaining[a.mode]+( 1==a.remaining[a.mode]? " "+d[a.mode][0]:" "+d[a.mode][1])),a.ctrlBtn.html(g))},pad:function(b,f){return b+'<spanclass="coll- ellipsis">'+this.o.ellipsis+"</span>"+(e.isFunction(this.o.ctrlBt n)?"":this.ctrlHtml)+'<span class="coll-hidden" style="display:none">'+f+"</span>"},blockMode:function(b,f,a, c){var g=["fadeOut","slideUp","fadeIn","slideDown"],d="fade"==this. o.effect?0:1,g="hide"==f?g[d]:g[d+2];if(e.isFunction(this.o.targ et))this.o.target.call(this.e)[g](a,c);else if(e.fn[this.o.target])e(b)[this.o.target]()[g](a, c);"show"==f?(b.removeClass(this.o.showClass).addClass(this.o .hideClass),this.o.changeText&&b.text(this.o.hideText)):(b.rem oveClass(this.o.hideClass).addClass(this.o.showClass),this.o.ch
  • 123.
    angeText&&b.text(this.o.showText))},reInit:function(b){b.find( "[data- ctrl]").remove();b.html(this.e.data("oCnt"));0==this.status?this. hide(b,0):this.show(b,0)}};e.fn.collapser=function(b){return this.each(function(){e.data(this,"collapser")||e.data(this,"collaps er",new l(this,b))})}})(jQuery,window,document); Chapter 6Template/Week 6/js/jquery.slicknav.min.js /*! SlickNav Responsive Mobile Menu (c) 2013 Josh Cope licensed under GPL and MIT */ (function(e,t,n){var r={label:"MENU",duplicate:true,duration:200,easingOpen:"swin g",easingClose:"swing",closedSymbol:"&#9658;",openedSymbo l:"&#9660;",prependTo:"body",parentTag:"a",closeOnClick:fals e,allowParentLinks:false},i="slicknav",s="slicknav";e.fn[i]=fun ction(n){return this.each(function(){function h(e){var t=e.data("menu");if(!t){t={};t.arrow=e.children("."+s+"_arrow" );t.ul=e.next("ul");t.parent=e.parent();e.data("menu",t)}if(e.pare nt().hasClass(s+"_collapsed")){t.arrow.html(o.openedSymbol);t. parent.removeClass(s+"_collapsed");p(t.ul,true)}else{t.arrow.ht ml(o.closedSymbol);t.parent.addClass(s+"_collapsed");p(t.ul,tru e)}}function p(e,t){var n=v(e);var r=0;if(t)r=o.duration;if(e.hasClass(s+"_hidden")){e.removeClas s(s+"_hidden");e.slideDown(r,o.easingOpen);e.attr("aria- hidden","false");n.attr("tabindex","0");d(e,false)}else{e.addClas s(s+"_hidden");e.slideUp(r,o.easingClose,function(){e.attr("aria -hidden","true");n.attr("tabindex","- 1");d(e,true);e.hide()})}}function d(t,n){var r=t.children("li").children("ul").not("."+s+"_hidden");if(!n){r.ea ch(function(){var t=e(this);t.attr("aria-hidden","false");var r=v(t);r.attr("tabindex","0");d(t,n)})}else{r.each(function(){var t=e(this);t.attr("aria-hidden","true");var r=v(t);r.attr("tabindex","-1");d(t,n)})}}function v(e){var
  • 124.
    t=e.data("menu");if(!t){t={};var n=e.children("li");var r=n.children("a");t.links=r.add(n.children("."+s+"_item"));e.dat a("menu",t)}return t.links}functionm(t){if(!t){e("."+s+"_item, ."+s+"_btn").css("outline","none")}else{e("."+s+"_item, ."+s+"_btn").css("outline","")}}var i=e(this);var o=e.extend({},r,n);if(o.duplicate){var u=i.clone();u.removeAttr("id");u.find("*").each(function(t,n){e( n).removeAttr("id")})}else var u=i;var a=s+"_icon";if(o.label==""){a+=" "+s+"_no- text"}if(o.parentTag=="a"){o.parentTag='a href="#"'}u.attr("class",s+"_nav");var f=e('<div class="'+s+'_menu"></div>');var l=e("<"+o.parentTag+' aria- haspopup="true" tabindex="0" class="'+s+'_btn"><span class="'+s+'_menutxt">'+o.label+'</span><span class="'+a+'"><span class="'+s+'_icon-bar"></span><span class="'+s+'_icon-bar"></span><span class="'+s+'_icon- bar"></span></span></a>');e(f).append(l);e(o.prependTo).prepe nd(f);f.append(u);var c=u.find("li");e(c).each(function(){var t=e(this);data={};data.children=t.children("ul").attr("role","men u");t.data("menu",data);if(data.children.length>0){var n=t.contents();var r=[];e(n).each(function(){if(!e(this).is("ul")){r.push(this)}else{r eturn false}});var i=e(r).wrapAll("<"+o.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+s+'_item"/>').parent();t.addClass(s+"_collapsed");t.add Class(s+"_parent");e(r).last().after('<span class="'+s+'_arrow">'+o.closedSymbol+"</span>")}else if(t.children().length==0){t.addClass(s+"_txtnode")}t.children(" a").attr("role","menuitem").click(function(){if(o.closeOnClick)e (l).click()})});e(c).each(function(){var t=e(this).data("menu");p(t.children,false)});p(u,false);u.attr("rol e","menu");e(t).mousedown(function(){m(false)});e(t).keyup(fu nction(){m(true)});e(l).click(function(e){e.preventDefault();p(u ,true)});u.on("click","."+s+"_item",function(t){t.preventDefault ();h(e(this))});e(l).keydown(function(e){var t=e||event;if(t.keyCode==13){e.preventDefault();p(u,true)}});u.
  • 125.