/* --- Color Palette --- */
/*
set:white="#ffffff"
set:veryLightGray="#f1f4f6"
set:lightGray="#dddddd"
set:mediumGray="#999999"
set:darkGray="#444444"
set:blue="#44657f"
set:orange="#eb811c"
set:lightOceanFoam="#f1f4f6"
set:lightBlue="#e2eff7"
set:slateGray="#475157"
set:brown="#b4a281"
set:lightBlue2="#f6fDff" Was used for formFieldFocusBG, delete?
set:unset="purple"
set:posigreen="#2a2" For positive-response buttons (such as dialogs)
set:negared="#a22" For negative-response buttons (such as dialogs)
set:errorRed="#Ff7870" For error conditions (such as forms)
set:infoBlue="#4281a4" For the info icon, etc.
*/
/*
/* Colors - from http://clrs.cc
set:navy="#001f3f"
setx:blue="#0074d9" Removed as it steps on us
set:aqua="#7fdbff"
set:teal="#39cccc"
set:olive="#3d9970"
set:green="#2ecc40"
set:lime="#01ff70"
set:yellow="#ffdc00"
setx:orange="#ff851b" Removed as it steps on us
set:red="#ff4136"
set:fuchsia="#f012be"
set:purple="#b10dc9"
set:maroon="#85144b"
set:silver="#dddddd"
set:gray="#aaaaaa"
set:black="#111111"
*/
/* Generics */
/*
set:fgColor="#202020" Your sites primary text color, in general against the site background
set:fgColor2="#4281a4" Secondary forground color. Used for variety (headings, etc.)
set:fgColor3="#e6b89c" Third forground. All three of these should be very legible against your primary background
set:subtext="#999999" For more "subtle" textual differences
set:bgColor="white" Site primary background. The color against which the site text is most commonly against.
set:bgColorThinLine="#ddd" For gentle lines agaist the primary background
set:bgColor2="#f1f4f6" Secondary background - for inset boxes, etc.
set:bgColor2Darker="#e2eff7" Once we can compute this, we will - but this is for alts like table rows
set:bgColor2HL="#ddd" For background textual highlighting against background2
set:bgColorStrong="#475157" For strongly deliniating some area (such as for form containers)
set:accent="#eb811c" Splashy accent color - often used for links, inset box borders, etc.
*/
/* bbHTML - v1.0.2 */
/*
This file is a starting point for custom CSS for a business site. It is intended to be
specified in the page template AFTER the reset/normalize file which brings all
browsers to a common starting point. These styles then return some "sanity" to elements
as we expect them. Customize and augment as necessary.
Colors:
-- See color-defaults for custom color names and the "generic" mappings (fgColor, bgColor, etc)
-- tables --
set:tableBorder="#ddd" Border color between cells
set:tableBGColor="#f4f4f4" This is the color of the non-alt rows (and the header if header is transparent)
set:tableHeaderFG="#f2ebe1" Foreground of top header cells
set:tableHeaderBG="#b54242" Background of top header cells
set:tableRowHeadFG="#f45a5a" Foreground of row header cells
set:tableRowHeadBG="inherit" Background of row header cells
set:tableCaption="#999999" Caption (rare) below table
set:tableAltRowBG="rgba(100,120,180,.5)"
set:tableHoverRowBG="#bcbcbc"
-- headings --
set:h1="#f45a5a"
set:h2="#b54242"
set:h3="#999999"
set:h4="#b54242"
set:h5="#999999"
set:h6="#b54242"
-- links, hr and focus --
set:linkColor="#f45a5a" standard link color - handles visited, active and normal
set:hrColor="#ddd" Color of horizontal rule line
set:linkHoverColor="#f45a5a" Link color when hovering
set:focusOutlineColor="#b54242" Color of "focus" (for tabbing, etc.)
*/
/* Standard HTML - extended from the YUI reset CSS */
html { background-color: #f2ebe1; }
body { font-size: 16px; color: #202020; font-family: helvetica, arial, sans-serif; line-height: 1.3; }
body .yui-editor-panel { font-size: 0.75em; line-height: 1; } /* Reset font size/line height for YUI rich text editor */
h1,h2,h3,h4, h5, h6 {
/* top & bottom margin based on font size */
margin:0.5em 0 0.25em 0; text-rendering: optimizeLegibility;
}
/* Define some generic color "classes" as CSS classes - though in general, we recommend semantic classes */
.fgColor { color: #202020; }
body .bgColor { background-color: #f2ebe1; }
body .bgColor2 { background-color: #f4f4f4; }
body .bgColor2Darker { background-color: rgba(100,120,180,.5);}
body .bgColor2HL { background-color: #bcbcbc;}
body .bgColorStrong { background-color: #475157;}
.fgColor2 { color: #b54242; }
.fgColor3 { color: #999999; }
.accent { color: #f45a5a; }
.insetBox { margin: 2em; border: 1px solid #f45a5a; border-radius: 8px; background: #f4f4f4; padding: 1em; }
/* Define some CSS macros
set:radius(X)="border-radius: $Xpx"
set:radiusp(X)="border-radius: $X%"
set:bottomradius(X)="border-bottom-left-radius: $Xpx; border-bottom-right-radius: $Xpx"
set:topradius(X)="border-top-left-radius: $Xpx; border-top-right-radius: $Xpx"
set:noShadow="box-shadow: none; -ms-filter: none; filter: none"
set:superThinShadow="box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1)"
set:vthinShadow="box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5)"
set:vvthinShadow="box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)"
set:pShadow="box-shadow: 0 0 2px rgba(0, 0, 0, 0.3)"
set:thinShadow="box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)"
set:thickShadow="box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)"
set:softShadow="box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5)"
set:strongShadow="box-shadow: 0px 0px 20px black"
set:thinSoftShadow="box-shadow: 2px 2px 6px 0px rgba(0,0,0,.3)"
set:shadow(X,Y)="box-shadow: $Xpx $Xpx $Ypx 0px rgba(0,0,0,.3)"
set:opacity0="opacity: 0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0); zoom: 1"
set:opacity30="opacity: .3;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
filter: alpha(opacity=30); zoom: 1"
set:opacity50="opacity: .5;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
filter: alpha(opacity=50); zoom: 1"
set:opacity60="opacity: .6;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
filter: alpha(opacity=60); zoom: 1"
set:opacity70="opacity: .7;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)';
filter: alpha(opacity=70); zoom: 1"
set:opacity80="opacity: .8;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
filter: alpha(opacity=80); zoom: 1"
set:noOpacity="opacity: 1.0;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Enabled=false)';
filter: alpha(enabled=false); zoom: 1"
set:rotate3="-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg)"
set:rotateN3="-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg)"
set:rotate(X)="-webkit-transform: rotate($Xdeg); -moz-transform: rotate($Xdeg)"
set:noselect="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none"
set:scale(X)="transform: scale($X); -webkit-transform: scale($X); -moz-transform: scale($X); -o-transform: scale($X); -ms-transform: scale($X);"
set:bbox="box-sizing:border-box; -moz-box-sizing:border-box; "
*/
/* apply a natural box layout model to all elements */
*, *:before, *:after
{ box-sizing: border-box; -moz-box-sizing: border-box;} /* for some reason, prefixfree doens't work when psuedoclasses are involved (?) */
h1 { font-size: 1.875em; color: #202020; line-height: 1; }
h2 { font-size: 1.375em; color: #202020; line-height: 1.2; }
h3 { font-size: 1.125em; color: #202020; font-weight:bold; }
h4 { font-size: 1em; color: #f45a5a; font-weight:bold;}
h5 { font-size: 0.875em; color: #202020; text-rendering: auto;}
h6 { font-size: 0.75em; color: #f45a5a; text-rendering: auto;}
strong { font-weight:bold; }
abbr,acronym {
/*indicating to users that more info is available */
border-bottom:1px dotted #000;
cursor:help;
}
em {
/*bringing italics back to the em element*/
font-style:italic;
}
blockquote { margin:1em; }
ul,dl {
padding: 0;
margin: 1em 0 1em 1.25em;
}
ol { padding: 0; margin: 1em 0 1em 2.2em; }
ol li {
/*giving OL's LIs generated numbers*/
list-style: decimal outside;
}
ul li {
/*giving UL's LIs generated disc markers*/
list-style: disc outside;
}
dl dd {
margin-left:1em;
}
table
{
border-collapse: collapse;
}
th,td {
/*borders and padding to make the table readable*/
border:1px solid #202020;
padding:.5em;
}
th {
/* Distinguishing table headers from data cells. */
font-weight: bold;
text-align: center;
}
table.v2 { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 6px; background-color: white; }
.v2 thead th { border-top: 0; }
.v2 tbody th { border-left: 0; }
.v2 tbody tr:last-child td,.v2 tbody tr:last-child th { border-bottom: 0; }
.v2 tbody td:last-child { border-right: 0; }
.v2.noColumnHeaders tbody td:first-child { border-left: 0; }
.v2 thead th:first-child { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-left: 0; }
.v2 thead th:last-child { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-right: 0; }
.v2 tbody tr:last-child th { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.v2 tbody tr:last-child td:last-child { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.v2 tbody tr:hover { outline: 1px dashed #f45a5a; }
.v2 tr:nth-child(2n+1) { background-color: #f4f4f4; } /* alternativing row colors */
.v2 thead th {
color: white;
background-color: #f45a5a;
/* background: -webkit-gradient(linear, left top, left bottom, from(#202020), to(#f45a5a));
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#202020, endColorstr=#f45a5a, GradientType=0); */
}
.v2 tbody th {
color: #999999;
background-color: inherit;
text-align:left;
}
.v2 caption {
/*coordinated marking to match cell's padding*/
margin:.5em 0;
font-size: 1em;
text-align:center;
color: #999999;
}
p,fieldset,table {
/*so things don't run into each other*/
margin-bottom:1em;
}
hr { border: 0; width: 80%; background-color: #202020; height: 1px; margin: 1.5em auto;}
/* remove borders from links */
img { border: 0; }
a, a:link, a:visited, a:active
{
text-decoration:none;
color: #f45a5a;
transition: color 300ms ease-in-out;
}
a:hover
{
color: #f45a5a;
}
* { transition: color .5s ease, background-color .5s ease }
/* Does this work? from : http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/ #21*/
a image {border: 0}
a:hover image {border: 0}
/*:focus { outline: none; } /* Gets rid of outline when clicking links */
:focus { outline-color: transparent; } /* use "transparent" to get rid of outline when clicking links */
input[type=submit],input[type=reset],label,select,.pointer { cursor:pointer; }
input[type=file] { margin: 0.375em; }
/* A few little helper classes - don't use these much - use semantic classes! */
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.cb { clear: both;
}
/* clearfix - from http://css-tricks.com/snippets/css/clear-fix/*/
/*.group { clear: both; } clear the group itself as well? um.. maybe not. */
.group:after,.clearfix:after {
content: "";
display: table;
clear: both;
}
/* --- Color Palette --- */
/* See https://coolors.co/app/fe938c-e6b89c-f2ebe1-9cafb7-4281a4 */
/*
set:salmon="#fe938c"
set:brown="#e6b89c"
set:beige="#f2ebe1"
set:steal="#9cafb7"
set:blue="#4281a4"
set:red="#710d0d"
set:darkSalmon="#ad7474"
set:burnt="#b54242"
set:flame="#f45a5a"
set:vlightred="#d6c0c0"
set:darkGray="#202020"
set:mediumGray="#999999"
set:white="white"
set:white90="rgba(255,255,255,.9)"
set:almostWhite="#f4f4f4"
set:gray="#bcbcbc"
set:darkishGray="#666"
set:lightGray="#ddd"
set:babyblue30="rgba(100,120,180,.3)"
set:babyblue50="rgba(100,120,180,.5)"
set:blogAuthorCommentBlue="#DCEBF5"
*/
/* Generics */
/*
set:fgColor="#202020" Your sites primary text color, in general against the site background
set:fgColor2="#b54242" Secondary forground color. Used for variety (headings, etc.)
set:fgColor3="#999999" Third forground. All three of these should be very legible against your primary background
set:subtext="#ddd" For more "subtle" textual differences
set:bgColor="#f2ebe1" Site primary background. The color against which the site text is most commonly against.
set:bgColor2="#f4f4f4" Secondary background - for inset boxes, etc.
set:bgColor2Darker="rgba(100,120,180,.5)" Once we can compute this, we will - but this is for alts like table rows
set:bgColor2HL="#bcbcbc" For background textual highlighting against background2
set:accent="#f45a5a" Splashy accent color - often used for links, inset box borders, etc.
/* bb - HTML */
/*
-- headings --
set:h1="#202020"
set:h2="#202020"
set:h3="#202020"
set:h4="#f45a5a"
set:h5="#202020"
set:h6="#f45a5a"
-- tables --
set:tableBorder="#202020"
set:tableBGColor="white"
set:tableHeaderFG="white"
set:tableHeaderBG="#f45a5a"
set:tableRowHeadFG="#999999"
set:tableRowHeadBG="inherit"
set:tableCaption="#999999"
set:tableAltRowBG="#f4f4f4"
set:tableHoverRowBG="$sunYellow10"
-- links --
set:hrColor="#202020"
set:linkColor="#f45a5a"
set:linkHoverColor="#f45a5a"
set:focusOutlineColor="transparent"
*/
/* bb - Styles */
/*
-- menubar --
set:menubarBG="#202020"
set:menubarFG="#f2ebe1"
-- images with captions --
set:imageCaptionTrim="#999999"
set:imageCaptionBG="#f1f4f6"
set:imageCaptionFG="#202020"
-- pagination --
set:otherPageFG="white"
set:otherPageBG="#eb811c"
set:prevNextLinkColor="#eb811c"
-- dialog
set:dialogHeading="white"
set:dialogBody="#e0e0e0"
set:dialogFormError="#Ff7870"
set:dialogPositiveButtonFG="#f0f0f0"
set:dialogPositiveButtonBG="black"
set:dialogPositiveButtonHover="#dfbb4f"
set:dialogNegativeButtonFG="#f0f0f0"
set:dialogNegativeButtonBG="#999999"
set:dialogNegativeButtonHover="#dfbb4f"
-- forms --
set:formBG="white"
set:formContainerText="#202020"
set:formTitle="$sunYellow"
set:formFieldBG="white"
set:formFieldBorder="#202020"
set:formFieldText="#202020"
set:formFieldFocusBG="#f4f4f4"
set:formFieldFocusBorder="$sunYellow"
set:formFieldsetBG="transparent"
set:formFieldsetTitle="#202020"
set:formFieldsetTitleBG="#999999"
-- Sidebar --
set:sidebarBG="#f2ebe1"
set:sidebarFG="#202020"
set:sidebarSectionHeader="#eb811c" def:fgColor"
set:sidebarSectionHeaderUL="#eb811c"
set:moreColor="#710d0d"
set:formFieldBG="white"
*/
/* Blog */
/*
-- magLayout --
set:magLayoutFrame="$sunYellow"
set:blogBriefTrimColor="white"
set:blogBriefBGColor="white"
set:featurePhotoTrim="#ddd"
set:blogDateColor="#999999"
set:categoryColor="#eb811c"
-- Blog Entry Itself --
set:blogEntryBG="rgba(255,255,255,.9)"
- Signature -
set:signatureBorderColor="#ddd"
-- Comment Area --
set:commentAreaTitle="#202020"
set:commentAreaBG="#ddd"
set:commentName="#202020"
set:commentTextFG="#202020"
set:commentTextBG="white"
set:authorCommentTextBG="#DCEBF5"
set:authorCommentTextFG="#202020"
-- gallery --
set:galleryBorderColor="#999999"
set:galleryBG="#2ecc40"
-- directory --
set:directoryYearSelectFG="#eb811c"
set:directoryYearSelectBG="white"
set:directoryImageBorder="#f6fDff"
*/
h1,h3{color:#710d0d}.resume-page .job,.resume-page .skillset,.resume-page>section{page-break-inside:avoid}.icon,.work-details h3>a{top:.15em;position:relative}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-Regular-webfont.woff)}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-Bold-webfont.woff);font-weight:700}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-Italic-webfont.woff);font-style:italic}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-BoldItalic-webfont.woff);font-weight:700;font-style:italic}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-Light-webfont.woff);font-weight:200}@font-face{font-family:opensans;src:url(bbStatic/fonts/OpenSans/OpenSans-LightItalic-webfont.woff);font-weight:200;font-style:italic}html.colored{background-color:#f2ebe1}body{font-family:opensans,"Helvetica Neue",Helvetica,Arial;color:#202020;text-align:left;line-height:1.5;width:100%;font-size:16px;-webkit-font-smoothing:antialiased}h1,h2{font-weight:200}h1{font-size:3.6vw}h2{font-size:1.4rem;color:#999999}h3{font-size:1.2rem}@media (max-width:625px){h1{font-size:calc(22.5px)}}@page{size:A4 portrait}hr{background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.25),rgba(0,0,0,0));border:0;height:1px}.-subHeading{font-size:75%;color:#999999;text-transform:none}a:hover{border-bottom:1px dotted #f45a5a;cursor:pointer}a.hoverplain:hover{border-bottom:0}.-pageBreak{page-break-after:always}.icon{background-size:1em 1em;display:inline-block;height:1em;margin:0 .5em;width:1em}.icon-blog{background-image:url(images/pen.svg)}.icon-company{background-image:url(images/home2.svg)}.icon-twitter{background-image:url(images/twitter.svg)}.icon-linkedin{background-image:url(images/linkedin.svg)}.icon-github{background-image:url(images/github.svg)}.icon-apple{background-image:url(images/apple.svg)}.icon-email{background-image:url(images/envelop.svg)}.icon-resume{background-image:url(images/profile.svg)}.icon-work{background-image:url(images/paint-format.svg)}.intro-page,.intro-page.-colored{background:0 0}.intro-page{display:flex;align-items:center;transition:background-color 10s}.intro-page a:hover{border-bottom:none}.intro-page li:hover{background:rgba(255,255,255,.5)}.intro-left{flex:0 0 40%;font-size:1.8vw;text-align:center}.intro-left>h1{font-size:5vw}.intro-left>ul{margin:1em 0;line-height:2}.intro-left>ul>li{list-style:none}.intro-left>hr{border:0;height:1px;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.25),rgba(0,0,0,0))}.intro-left .icon{opacity:.1;transition:opacity 1s}.intro-left a:hover .icon{opacity:1}@media (max-width:625px){.intro-left{flex:0 0 250px;font-size:calc(11.25px)}.intro-left>h1{font-size:calc(31.25px)}.intro-left>h2{font-size:calc(15.63px)}}.intro-right{background:url(images/trainInRain.jpg);background-size:cover;height:100vh;width:60%;-webkit-filter:grayscale();filter:grayscale();transition:-webkit-filter 10s,filter 10s}.intro-right.-colored{-webkit-filter:grayscale(0);filter:grayscale(0)}.resume-page>section{display:flex;margin:1em;padding:1em 2em}.resume-page>section>.title{color:#ad7474;font-size:1.6rem;font-style:italic;font-weight:200;padding-right:1em;width:25%}.resume-page .profileImage{float:left;margin-right:40px}.resume-page .profileImage>img{width:96px;border-radius:4px}.resume-page>section>.info{width:75%}.resume-page>section>.info>div:first-child{margin-top:1em}.resume-page h1{font-size:calc(34.2px);line-height:1.2;text-transform:uppercase;white-space:nowrap;float:left}.resume-page .job:first-child,.resume-page .skillset:first-child{page-break-inside:auto}@media (max-width:950px){.resume-page h1{font-size:calc(34.2px)}.resume-page>section{flex-direction:column}.resume-page>section>.info,.resume-page>section>.title{width:100%}}@media (max-width:440px){.resume-page h1{font-size:1.6em}}@media (min-width:1400px){.resume-page h1{font-size:calc(50.4px)}}@media print{.resume-page .page-links{display:none}.resume-page>section{padding:0 2em}}.moreInfo-section>.info>div{display:flex}.moreInfo-section>.info>div>div:first-child{font-weight:700;margin-right:.75em;text-align:right;width:8em}@media (max-width:600px){.moreInfo-section>.info>div{flex-direction:column}.moreInfo-section>.info>div>div:first-child{text-align:left;margin-top:.5em}}.skills-section h3{margin:1em 0}.experience-section .projects{margin-left:2em;padding-left:2em;border-left:1px solid #d6c0c0}.work-page>h1{text-align:center;margin:1em 0}.work-page>p{margin:1em auto;width:75%}.work-details>h2{background:rgba(255,255,255,.5);color:#710d0d;font-size:2.2rem;padding:.1em 1em;font-style:italic}.work-details>h2.-hide{display:none}.work-details h3{background:#E9DED6;padding:.1em .4em;border-radius:8px}.work-details h3>a{background:url(images/externalLink.svg) 0 0/contain;display:inline-block;height:1em;margin:0 .4em;width:1em}.work-details>.filterStatus{font-style:italic;text-align:center}.work-details>.filterStatus button{margin:0 .5em;background:#5d503e;border:0;border-radius:4px;padding:.3em .6em;color:#f2ebe1;font-size:1em}.work-details>.work{border-radius:10px;margin:2em 1em;overflow:hidden;padding:.5em;transition:background 3s,height 1s}.work-details>.work.highlight{background:rgba(255,250,81,.57);transition:background 80ms}.work-details>.work>.details{display:flex}@media (max-width:670px){.work-details>.work>.details{flex-direction:column}}.work-details>.work>.details>.preview{background-size:cover;border-radius:8px;overflow:hidden;height:160px;margin:.5em 1em 0 0;position:relative;width:160px;flex:0 0 160px}@media (max-width:670px){.work-details>.work>.details>.preview{margin:1em auto}}.work-details>.work>.details>.preview::after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;transition:opacity 1s}.work-details>.work>.details .dtTitle{float:left;margin-right:.3em}.work-details>.work.-hide{display:none}.work-details .info .keywords>div{background:rgba(255,255,255,.5);border-radius:4px;color:#111111;cursor:pointer;display:inline-block;margin:4px;padding:2px 4px}.work-details .info .keywords>div:hover{background:rgba(255,55,55,.5)}.page-links{margin:.5em}.page-links>a{display:inline-block}