/* YUI 3.5.0 CSS Reset */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
/*************/
/* Variables */
/*************/
:root {
--alfred-purple: #602b87;
--alfred-purple-dark: #57237c;
--alfred-teal: #2d8795;
--alfred-teal-dark: #247686;
--alfred-link: #30a4b9;
}
/******************/
/* General Styles */
/******************/
body { font-family: Bitter, sans-serif; color: #444; background: #e8e8e8; -webkit-text-size-adjust: none; text-size-adjust: none; }
a { color: var(--alfred-link); text-decoration: none; }
h1 { font-size: 2.3em; font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; margin-top: 0.8em; }
h3 { font-size: 1.3em; font-weight: bold; margin-top: 0.8em; }
h4 { font-size: 1.3em; margin-top: 0.8em; }
p { line-height: 1.6em; margin-top: 1.1em; }
hr { border: 0; height: 1px; background: #ddd; }
em { font-style: italic; }
strong { font-weight: bold; }
img { max-width: 100%; }
pre { overflow-x: auto; padding: 14px 10px; background: #e7e7e7; font-family: "Menlo", monospace; font-size: 0.88em; color: #404040; margin-top: 1em; border-left: solid 3px #ccc; }
pre.inalfred { background: #f2f2f2 url('/media/inalfred.png'); background-position: right 10px top 8px; background-size: 48px 40px; background-repeat: no-repeat; padding: 20px 20px; margin: 1em 0; border: solid 1px #ddd; border-radius: 10px; }
code { background: #e7e7e7; padding: 3px 5px; font-family: "Menlo", monospace; font-size: 0.88em; color: #404040; }
kbd { background: #e7e7e7; padding: 4px 5px 1px 5px; font-family: "Bitter"; color: #404040; margin-right: 3px; border: solid 1px #ccc; border-radius: 4px; box-shadow: 0 1px #ccc; min-width: 18px; text-align: center; display: inline-block; }
input { font-family: Bitter, sans-serif; }
button { font-family: Bitter, sans-serif; }
blockquote { background: #eee; padding: 10px 18px; margin: 1em 0; border-left: solid 3px #ccc; }
blockquote :first-child { padding-top: 0; margin-top: 0; }
/****************/
/* Early Access */
/****************/
#earlyaccess { background: #236b76; color: #fff; padding: 14px 20px; text-align: center; line-height: 1.6em; }
#earlyaccess a { color: #b0e0e8 }
#earlyaccess p { padding: 0; margin: 5px 0; }
#earlyaccess p.ee { font-size: 1.4em; }
/***************/
/* Site Header */
/***************/
#galleryheader { background: #222; color: #fff; }
#galleryheader nav { max-width: 780px; padding: 0 34px; margin: 0 auto; display: flex; justify-content: space-between; }
#galleryheader li, a { display: inline-block; }
#galleryheader a { padding: 20px 12px; color: #fff; }
#galleryheader a:hover { background: #2c2c2c; }
#galleryheader #alfredlinks a { background: red; margin: 10px 4px; padding: 10px 12px; border-radius: 4px; }
#galleryheader #alfredlinks a#getalfred { background: var(--alfred-purple); }
#galleryheader #alfredlinks a#getalfred:hover { background: var(--alfred-purple-dark); }
#galleryheader #alfredlinks a#buypowerpack { background: var(--alfred-teal); }
#galleryheader #alfredlinks a#buypowerpack:hover { background: var(--alfred-teal-dark); }
/***************/
/* Site Footer */
/***************/
#galleryfooter { background: #222; color: #aaa; padding: 20px 0 0 0; box-shadow: 0 50vh 0 50vh #171717; }
#galleryfooter #footer { display: flex; justify-content: space-between; gap: 20px; }
#galleryfooter #footer h3 { margin: 0; padding: 0; color: #ddd; font-size: 1.3em; font-weight: normal; }
#galleryfooter #footer ul { margin-top: 1.1em; white-space: nowrap; }
#galleryfooter #footer li { line-height: 1.6em; }
#galleryfooter #whatisalfred { max-width: 500px; }
#galleryfooter #copyright { background: #171717; color: #555; text-align: center; margin: 40px auto 0 auto; padding: 20px; font-size: 0.9em; }
#galleryfooter #copyright p { margin: 0; }
/*****************/
/* Shared Styles */
/*****************/
.content { max-width: 760px; padding: 0 20px; margin: 30px auto; }
.content.markdown code { background: #d9d9d9; }
.workflowtag { display: inline-block; background: var(--alfred-link); color: #fff; padding: 5px 11px; margin: 2px 0; border-radius: 8px; }
.workflowinstall { display: inline-block; background: #5c1f87; color: #fff; padding: 10px 14px; margin-right: 2px; border-radius: 8px; }
.workflowdownload { display: inline-block; background: #999; color: #fff; padding: 10px 14px; border-radius: 8px; }
.workflowdownload:hover { background: #5c1f87; }
.markdown h1 { font-size: 2.3em; margin-top: 0.7em; }
.pagination ul { text-align: center; max-width: 780px; margin: 20px auto 30px auto; }
.pagination li { display: inline-block; }
.pagination li.pagefirst { margin-right: 12px; }
.pagination li.pageprev a { font-weight:bold; min-width: 22px; }
.pagination li.pagenext a { font-weight:bold; min-width: 22px; }
.pagination li.pagelast { margin-left: 12px; }
.pagination a { padding: 5px 10px; background: #fff; margin: 1px; border: solid 1px #d5d5d5; border-radius:4px; }
.pagination a.pageselected { background: #bbb; color: #fff; }
.learning { background: #f0f0f0; width: 40px; height: 40px; padding: 4px; border: solid 1px #ccc; border-radius: 24px; }
/************/
/* Homepage */
/************/
#welcome { background: #5c1f87 linear-gradient(#6d3594 0%, #511e75 100%); color: #fff; }
#welcome .content { margin: 0 auto; padding: 47px 0; text-align: left; display: flex; align-items: center; justify-content: center; gap: 40px; }
#welcome .content img { width: 200px; height: 166px; flex-shrink: 0; }
#welcome .content div h1 { font-size: 2.7em; }
#welcome .content div p { margin: 0.5em 0 0 0; color: rgba(255, 255, 255, 0.7); }
#featured { margin: 30px auto 40px auto; }
#featured h2 { text-align: center; margin-top: 30px; }
#featured #browseall { text-align: center; max-width: 780px; margin: 20px auto 40px auto; padding: 1px; }
#featured #browseall a { display: inline-block; padding: 8px 15px; margin: 0; background: #fff; border: solid 1px #d5d5d5; border-radius: 4px; }
#browsebytag { background: #f8f8f8; padding: 20px 0 40px 0; margin: 0 10px; }
#browsebytag h2 { text-align: center; margin-bottom: 20px; }
#browsebytagnotfound { text-align: center; padding: 40px 0; }
#galleryworkflow { background: #333; margin: 0; padding: 30px; }
#galleryworkflowbox { padding: 40px; margin: 20px auto; max-width:480px; background: #fff; box-shadow: 0 0 20px 0 #999; border-radius: 10px; display: flex; align-items: flex-start; flex-flow: row wrap; gap: 30px; }
#galleryworkflowbox img { width: 128px; height: 128px; border-radius: 5px; flex-shrink: 0; }
#galleryworkflowbox h2 { margin: 0.4em 0 0 0; }
#galleryworkflowbox h2 a { color: #444; }
#galleryworkflowbox p { margin: 0.4em 0 0.7em 0; }
/*************/
/* Workflows */
/*************/
#workflows { margin-bottom: 40px; }
#workflows header:first-child { text-align: center; }
#workflows header:first-child h1 { font-size: 1.8em; margin-top: 30px; }
#workflows header:first-child nav { margin: 10px; }
/******************/
/* Workflows List */
/******************/
#workflowlist { max-width: 840px; margin: 20px auto; display: flex; flex-flow: row wrap; justify-content: center; }
#workflowlist a { margin: 10px; padding: 20px; display: block; width: 220px; box-shadow: 0 0 20px 0 #ccc; border-radius: 10px; overflow: hidden; text-align: center; color: #444; background: #fff; position: relative; }
#workflowlist a:hover { box-shadow: 0 0 20px 0 #aaa; }
#workflowlist .learning { position: absolute; left: 20px; top: 20px; }
#workflowlist h2 { margin-top: 0.5em; font-size: 1.5em; font-weight: normal; }
#workflowlist p { font-style: italic; margin-top: 0.5em; }
#workflowlist .icon { width: 128px; height: 128px; border-radius: 5px; }
/************/
/* Workflow */
/************/
#workflow { padding: 0 40px; }
#workflow div.content { max-width: 740px; background: #f8f8f8; box-shadow: 0 0 20px 0 #ccc; border-radius: 10px; padding: 40px; margin: 40px auto; }
#workflow header { margin-bottom: 40px; display: flex; align-items: flex-start; }
#workflow header div:nth-child(1) { flex-shrink: 0; width: 128px; padding-right: 30px; }
#workflow header div:nth-child(2) { flex-grow: 1; padding-right: 20px; }
#workflow header div:nth-child(2) .bin { background: #e7dfec; margin-top: 10px; border-radius: 3px; padding: 10px; display: inline-block; font-size: 0.9em; }
#workflow header div:nth-child(2) .bin a { color: #000; text-decoration: underline; }
#workflow header div:nth-child(3) { flex-shrink: 0; }
#workflow header div:nth-child(3) ul { margin: 0; text-align: right; padding: 2px 10px; border: solid 1px #ddd; border-radius: 5px; font-size: 0.8em; background: #f3f3f3; }
#workflow header div:nth-child(3) li { margin: 8px 0; display: block; white-space: nowrap; }
#workflow header #workflowdescription { font-style: italic; font-size: 1.1em; }
#workflow header #workflowmetadata { font-size: 0.9em; color: #777; }
#workflow header #workflowlearning { display: flex; align-items: center; gap: 10px; margin-top: 20px;}
#workflow header #workflowlearning img { width: 20px; height: 20px; }
#workflow header #workflowlearning p { margin: 0; padding: 0; font-style: italic; color: #777; }
#workflow header .icon { width: 128px; height: 128px; border-radius: 5px; }
#workflow header h1 { margin-top: 0.1em; }
#workflow header p { margin-top: 0.7em; }
#workflow header ul { margin-top: 24px; }
#workflow header li { display: inline-block; }
#workflow section { margin-top: 0px; padding: 30px 0; border-bottom: solid 1px #ddd; }
#workflow section h1 { font-size: 2em; }
#workflow section h2:first-of-type { margin-top: 0; }
#workflow section ul { margin: 1em 0; }
#workflow section li { margin: 0.8em 0 0.8em 10px; line-height: 1.4em; }
#workflow section#dependencies { background: #f3f3f3; margin: 1em 0 0 0; padding: 20px; border: solid 1px #ddd; border-radius: 10px; }
#workflow section#dependencies p { margin: 0; }
#workflow section#dependencies em { font-size: 0.8em; margin-top: 0.8em; display: block; }
#workflow nav { margin-top: 10px; padding-top: 20px; }
#workflow nav li { display: inline-block; }
#workflow #workflowheadseparator { margin: 0; }
#workflow #workflowteamnote h2 span { margin-right: 5px; }
#workflow #workflowdeprecated { background: #ec9; padding: 30px 20px; margin-bottom: 30px; border-radius: 10px; text-align: center; }
#workflow #workflowdeprecated h2 { font-size:1.3em; margin: 0; padding: 0; line-height: 1em; }
#workflow #workflowdeprecated p { line-height: 1em; }
#workflow #workflowdeprecated a { font-weight: bold; color: #873; }
#workflow #workflowmiyo { padding: 20px; background: #f3f3f3; border-left: solid 5px #ccc; border-right: solid 1px #ddd; }
#workflow #workflowmiyonote { font-size: 0.9em; font-style: italic; color: #777; }
#workflow #workflowabout img { display: block; margin: 0 auto; }
#workflow #workflowabout hr { margin: 1.7em 0; }
#workflow #workflowchangelog { padding: 10px 0 20px 0; }
#workflow #workflowchangelog li { list-style-type: circle; margin-left: 30px }
/***********/
/* Creator */
/***********/
#creator #workflowlist { margin-bottom: 40px; }
#creatordetails { text-align: center; margin: 40px 0; }
#creatordetails img { max-width: 256px; border-radius: 5px; }
#creatordetails h1 { margin: 0.3em; }
#creatordetails li { margin-top: 0.3em; color: #555; }
/****************/
/* Search Field */
/****************/
#search { background: #ccc; }
#search h2 { display: none; }
#search form { text-align: center; margin: 0 auto; padding: 30px; display: flex; justify-content: center; align-items: stretch; gap: 6px; max-width: 560px; }
#search form input:focus { outline: none; }
#search form input { border: 0; border-radius: 5px; padding: 20px; margin: 0; font-size: 1.3em; flex-grow: 1; min-width: 0;}
#search form button { border: 0; border-radius: 5px; padding: 20px; margin: 0; font-size: 1.3em; background: #707070; color: #fff; }
#searchlimit { text-align: center; margin: 30px auto; padding: 0 20px; }
#searchmore { text-align: center; margin: 40px 20px 0 20px; }
#searchmore p { background: #ebf7f9; display: inline-block; margin: 0 auto; padding: 20px; border: solid 1px #b0e0e8; border-radius: 10px; }
/*************/
/* Tag Cloud */
/*************/
#tagcloud { margin: 0 auto; padding: 0 20px; max-width: 680px; text-align: center; }
#tagcloud li { display: inline-block; margin: 2px 3px; }
#tagcloud li a[data-weight="1"] { font-size: 1.0em; }
#tagcloud li a[data-weight="2"] { font-size: 1.1em; }
#tagcloud li a[data-weight="3"] { font-size: 1.2em; }
#tagcloud li a[data-weight="4"] { font-size: 1.3em; }
#tagcloud li a[data-weight="5"] { font-size: 1.4em; }
#tagcloud li a[data-weight="6"] { font-size: 1.5em; }
#tagcloud li a[data-weight="7"] { font-size: 1.6em; }
#tagcloud li a[data-weight="8"] { font-size: 1.7em; }
#tagcloud li a[data-weight="9"] { font-size: 1.8em; }
#tagcloud li a[data-weight="10"] { font-size: 1.9em; }
/**************/
/* Responsive */
/**************/
@media screen and (max-width: 710px) {
#galleryheader nav { display: block; text-align: center; padding: 10px 5px; }
#galleryheader a { padding: 5px 10px; }
}
@media screen and (max-width: 700px) {
#workflow header { display: block; text-align: center; }
#workflow header h1 { margin-top: 12px; }
#workflow #workflowdescription { margin-top: 8px; }
#workflow header div:nth-child(1) { width: 100%; }
#workflow header div:nth-child(2) { width: 100%; }
#workflow header div:nth-child(3) { margin-top: 20px; }
#workflow header div:nth-child(3) ul { text-align: center; }
#workflow header div:nth-child(3) li { display: inline-block; margin: 5px 10px; }
#workflow #workflowlearning { justify-content: center; font-size: 0.9em; }
}
@media screen and (max-width: 660px) {
#welcome .content { margin: 0 auto; padding: 47px 0; text-align: center; display: block; }
#welcome .content img { width: 200px; height: 166px; flex-shrink: 0; }
#welcome .content div h1 { font-size: 2.0em; margin-top: 30px; }
#welcome .content div p { margin: 0.5em 0 0 0; color: rgba(255, 255, 255, 0.7); }
#workflow { padding: 0 20px; }
#workflow div.content { margin: 20px auto; padding-top: 20px;}
#workflowlist a { width: 180px; }
}
@media screen and (max-width: 600px) {
#galleryworkflowbox { padding: 20px; display: block; text-align: center; }
}
@media screen and (max-width: 500px) {
#workflow div.content { padding: 20px; }
#workflow h1 { font-size: 1.8em; }
#workflowlist .icon { width: 96px; height: 96px; }
#workflowlist a { width: 120px; font-size: 0.9em; }
#workflowlist .learning { width: 24px; height: 24px; }
#search form { padding: 30px 20px; }
#search form input { font-size: 1.1em; }
#search form button { font-size: 1.1em; }
.pagination li.pagefirst { display: none; }
.pagination li.pageprev a { min-width: 14px; }
.pagination li.pagenext a { min-width: 14px; }
.pagination li.pagelast { display: none; }
.pagination a { padding: 5px 8px; }
}
@media screen and ( max-width: 374px) {
#galleryheader nav { max-width: 280px; }
}
@media screen and ( max-width: 360px) {
#galleryheader a { padding: 5px 8px; }
#workflowlist a { width: 100%; max-width: 240px; font-size: 0.9em; }
.workflowdownload { margin-top: 8px; }
}