/* v1.03 */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background:#fff;color:#333;overflow-y:scroll}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquotes,q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:0}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;padding-top:5px}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}table,td,th{vertical-align:middle}body{font:16px/1.5 Georgia,Helvetica,sans-serif;color:#333}body.casual{font:12px/1.5 "lucida grande","lucida sans unicode",sans-serif}p{margin:0 0 1em 0}p.first:first-letter {float:left;font-family:Palatino,'Palatino Linotype',Georgia,sans-serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:.05em .1em 0 0}img.left{float:left;margin:.3em .833em .833em 0}img.right{float:right;margin:.3em 0 .833em .833em}img.polaroid{background:white;padding:4px 4px 16px 4px;box-shadow:2px 2px 5px rgba(0,0,0,.3)}h1,h2,h3,h4,h5,h6{font-weight:normal;color:#333}h1{font-size:2.2em;margin-bottom:.682em}h2{font-size:1.9em;margin-bottom:.79em}h3{font-size:1.7em;margin-bottom:.882em}h4{font-size:1.4em;margin-bottom:1.071em}h5,h6{font-size:1.3em;margin-bottom:1.154em}li ul,li ol{margin:0 1.5em}ul,ol{margin:0 1.5em 1.5em 1.5em}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dl dd{margin-left:1.5em}a{color:#035292;text-decoration:none}a:hover{text-decoration:underline}table{margin-bottom:1.5em;border-collapse:collapse}th{font-weight:bold}tr,th,td{margin:0;padding:0 1.5em 0 1em;height:18px}tfoot{font-style:italic}caption{text-align:center;font-family:Georgia,serif}abbr,acronym{border-bottom:1px dotted #000}address{margin-top:1.5em;font-style:italic}del{color:#000}blockquote{padding:1em 1em 1em 1.5em;font-family:baskerville,"palatino linotype",serif;border-left:3px solid gray}strong{font-weight:bold}em,dfn{font-style:italic}dfn{font-weight:bold}pre,code{margin:1.5em 0;white-space:pre}pre,code,tt{font:1em monospace;line-height:1.5}tt{display:block;margin:1.5em 0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}.tc{text-align:center}.tr{text-align:right}.tl{text-align:left}.b{font-weight:bold}.i{font-style:italic}.sc{font-variant:small-caps}.tiltl{transform:rotate(-6deg)}.tiltr{transform:rotate(6deg)}.group:after{content:"";display:table;clear:both}*{-webkit-transition:color .5s ease,background-color .5s ease;transition:color .5s ease,background-color .5s ease}*,*:before,*:after{box-sizing:border-box}.mono{font-family:"Courier New",Courier,monospace}.grid1,.column{width:8.3334%}.grid2{width:16.6667%}.grid3{width:25%}.grid4{width:33.3333333333%}.grid5{width:41.6667%}.grid6{width:50%}.grid7{width:58.3334%}.grid8{width:66.6667%}.grid9{width:75%}.grid10{width:83.3334%}.grid11{width:91.6667%}.grid12{width:100%}.column{float:left;padding:0 10px;box-sizing:border-box;min-height:1px}.row{clear:both}.row .row{margin:0 -10px}.fullrow{clear:both;margin:0 10px}@media(max-width:635px){.row{width:100%}.fullrow{clear:both;margin:0}.column{clear:both;float:none;padding:0;width:100%}.row .row{margin:0}} /* --- 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="#44657f" 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="#444444" Your sites primary text color, in general against the site background set:fgColor2="#44657f" Secondary forground color. Used for variety (headings, etc.) set:fgColor3="#b4a281" 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="#dddddd" 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="#dddddd" 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="#999999" Border color between cells set:tableBGColor="#f1f4f6" This is the color of the non-alt rows (and the header if header is transparent) set:tableHeaderFG="white" Foreground of top header cells set:tableHeaderBG="#44657f" Background of top header cells set:tableRowHeadFG="#44657f" Foreground of row header cells set:tableRowHeadBG="inherit" Background of row header cells set:tableCaption="#44657f" Caption (rare) below table set:tableAltRowBG="#e2eff7" set:tableHoverRowBG="#dddddd" -- headings -- set:h1="#e74c3c" set:h2="#44657f" set:h3="#b4a281" set:h4="#44657f" set:h5="#b4a281" set:h6="#44657f" -- links, hr and focus -- set:linkColor="#e74c3c" standard link color - handles visited, active and normal set:hrColor="#dddddd" Color of horizontal rule line set:linkHoverColor="#e74c3c" Link color when hovering set:focusOutlineColor="#44657f" Color of "focus" (for tabbing, etc.) */ /* Standard HTML - extended from the YUI reset CSS */ html { background-color: white; } body { font-size: 16px; color: #181818; 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: #181818; } body .bgColor { background-color: white; } body .bgColor2 { background-color: #f1f4f6; } body .bgColor2Darker { background-color: #e2eff7;} body .bgColor2HL { background-color: #dddddd;} body .bgColorStrong { background-color: #475157;} .fgColor2 { color: #44657f; } .fgColor3 { color: #b4a281; } .accent { color: #e74c3c; } .insetBox { margin: 2em; border: 1px solid #e74c3c; border-radius: 8px; background: #f1f4f6; 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: #e74c3c; line-height: 1; } h2 { font-size: 1.375em; color: #44657f; line-height: 1.2; } h3 { font-size: 1.125em; color: #b4a281; font-weight:bold; } h4 { font-size: 1em; color: #44657f; font-weight:bold;} h5 { font-size: 0.875em; color: #b4a281; text-rendering: auto;} h6 { font-size: 0.75em; color: #44657f; 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 #999999; 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: #f1f4f6; } .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 #e74c3c; } .v2 tr:nth-child(2n+1) { background-color: #e2eff7; } /* alternativing row colors */ .v2 thead th { color: white; background-color: #44657f; /* background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#e74c3c)); filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#181818, endColorstr=#e74c3c, GradientType=0); */ } .v2 tbody th { color: #44657f; 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: #44657f; } p,fieldset,table { /*so things don't run into each other*/ margin-bottom:1em; } hr { border: 0; width: 80%; background-color: #dddddd; height: 1px; margin: 1.5em auto;} /* remove borders from links */ img { border: 0; } a, a:link, a:visited, a:active { text-decoration:none; color: #e74c3c; transition: color 300ms ease-in-out; } a:hover { color: #475157; } * { 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: #44657f; } /* 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; } /* Common Business Site Styles */ /* Colors: -- menubar -- set:menubarBG="#181818" Background color of main menu bar set:menubarFG="white" Background color of main menu bar -- images with captions -- set:imageCaptionTrim="#999999" trim (border) used on insetImage images set:imageCaptionBG="#f1f4f6" Background on image caption area set:imageCaptionFG="#181818" foreground of text for image caption -- pagination -- set:otherPageFG="white" foreground color of pages to navigate to (non-current) set:otherPageBG="#e74c3c" background color of pages to navigate to (non-current) set:prevNextLinkColor="#e74c3c" prev / next / first / last color -- dialog panel -- set:dialogHeaderFG="#f1f4f6" Header Foreground (use inherit to inherit body FG) set:dialogHeaderBG="#181818" Header Background (use transparent to show body BG) set:dialogBodyFG="#44657f" Body Foreground (also acts as default FG for entire dialog) set:dialogBodyBG="#f1f4f6" Body Background (also acts as default BG for entire dialog) set:dialogFooterFG="#f1f4f6" Footer Foreground (use inherit to inherit body FG) set:dialogFooterBG="#44657f" Footer Background (use transparent to show body BG) set:dialogPositiveButtonFG="#f0f0f0" Positive (yes,ok,submit,etc.) set:dialogPositiveButtonBG="#2a2" set:dialogPositiveButtonHover="#dfbb4f" set:dialogNegativeButtonFG="#f0f0f0" Negative button FG (Cancel, No, etc.) set:dialogNegativeButtonBG="#a22" set:dialogNegativeButtonHover="#dfbb4f" set:dialogMask="rgba(0,0,0,.5)" The dialog background mask color (generally somewhat transparent) set:dialogFormError="#Ff7870" Rare non-generic mapping - form errors (stil can be overridden obviously) -- Forms Colors set:formBG="#475157" Background color of form container (for bg images set on .formContainer) set:formContainerText="#181818" Text color of labels and other default text on the form (not inside fields) set:formTitle="white" Form Title Color set:formFieldBG="white" Color of background of text areas and text fields, etc. set:formFieldBorder="#44657f" Border color (1 px usually) around text fields set:formFieldText="#444444" Color of text in form fields set:formFieldFocusBG="#e2eff7" Color of field border when it has focus (someone clicks on it) set:formFieldFocusBorder="#44657f" Color of field border when it has focus (someone clicks on it) set:formFieldsetBG="#f0eee7" Background color of a fieldset (Set of fields) set:formFieldsetTitle="white" Fieldset Title Text Color set:formFieldsetTitleBG="#999999" Background of fieldset Title set:formFieldHasFocus="rgba(0,200,0,.2)" Colors the entire field (label/edit) when a field has focus set:formFieldHasError="rgba(200,0,0,.2)" Colors the entire field (label/edit) when a field has an error -- sidebar styling -- set:sidebarFG="#181818" General foreground of sidebar set:sidebarBG="#f1f4f6" General background of sidebar set:sidebarSectionHeader="#181818" Sidebar section header (h1) set:sidebarSectionHeaderUL="#181818" Single pixel underline color for section header (h1) set:moreColor="#44657f" Color of "more" for about section */ /* HeaderContent */ #logo { margin: 20px 0 10px 25px; } #logo a { font-size: 32px; } .menubar { height: 39px; clear: both; background-color: #181818; } .menubar a { display: block; float: left; color: white; padding: 9px 20px; font-size: 16px; letter-spacing: .5px; } /* Images with captions */ .insetImage { border: 1px solid #999999; background-color: #f1f4f6; text-align: center; min-width: 100px; margin: 10px; padding: 4px; color: #181818; } .insetImage img { width: 120px; } .insetImage .caption { font-size: 10px; text-align: left; line-height: 12px; width: 120px; margin: 0 auto; } .tleft { float: left; clear: left; } .tright { float: right; clear: right; } /* module elements - info and error messages - not customizing colors, due to the nature of these! */ .info { background-color: #E6EFC2; color: #264409; border: 2px solid #C6D880; padding: 8px; text-align: center; } .error { background-color: #FBE3E4; color: #8A1F11; border: 2px solid #FBC2C4; padding: 8px; text-align: center; } .error h1 { color: #8A1F11; font-size: 20px; } #waitIndicator { position: fixed; display: none; left: 50%; top: 50%; margin-left: -84px; margin-top: -30px; background-color: rgba(255,255,255,.8); border-radius: 10px; padding: 20px; z-index: 200; border: 1px solid #e74c3c; } /* Some YUI stylings */ #pagination { text-align: center; clear: all; } #pagination .yui-pg-current-page { color: purple; border-radius: 4px;} #pagination a.yui-pg-page { color: white; background-color: #e74c3c; border: 0; border-radius: 4px; text-decoration: none; } #pagination a { color: #e74c3c; } /* FORMS */ /* for all forms on the site */ .css2 .formButtons { margin: 1em 0 0; } .css2 .formButtons input { margin: auto 4px; } .css2 .formField { clear: left; overflow: hidden; border-radius: 6px; margin: 2px; padding: 4px 0; } .css2 .formField.hasFocus { background: rgba(0,200,0,.2); } .css2 .formField.hasError { background: rgba(200,0,0,.2); } .css2 .formLabel, .css2 .formEdit, .css2 .formInfo { float: left; margin: 5px 0 0 0px; float: left; padding-left: 20px; } .css2 .formLabel { width: 33%; padding-right: 20px; } .css2 .formEdit { width: 67%; } .css2 .formEdit.fullwidth { width: 99%; } .css2 .fieldInfo,.css2 .fieldError, .css2 .fieldMarker { margin: 0; float: left; padding-left: 20px; } /* common atts for errors/info */ .css2 .fieldMarker { width: 20px; height: 20px; background-size:auto 100%; } .css2 .fieldMarker.waiting { background: url(gimages/waitInd.gif) no-repeat; } .css2 .fieldMarker.check { background: url(gimages/check-20.png) no-repeat; } .css2 .fieldInfo { background:url(fam/information.png) no-repeat; color:#14C134; display: none; } .css2 .formField.hasFocus .fieldInfo { display: block; } .css2 .formField.hasFocus.hasError .fieldInfo { display: none; } .css2 .formField.hasError .fieldMarker { display: none; } .css2 .fieldError { background:url(fam/exclamation.png) no-repeat 0 2px; color: #d0584f; min-height: 18px; } .css2 input[type="text"] { width: 99%;} .css2 input[type="radio"] { margin: 0 5px;} .css2 textarea { height:300px; width: 99%;} /*.css2 textarea.simple { height:300px;}*/ .compactForm .css2 .formLabel { width: 100px; padding-right: 8px; } /* for forms contained by .formContainer */ .formContainer { background-color: transparent; border-radius: 4px; padding:15px; margin: 12px auto; color: #181818; } .formContainer .formTitle {color:white; font-size: 16pt;} .formContainer input[type="text"],.formContainer input[type="password"],.formContainer textarea { border: 1px solid transparent; padding: 2px; background-color: white; color: #444444; margin: 1px; border-radius: 4px; /*-webkit-box-shadow: rgba(0, 0, 0, 0.292969) 0px -1px 1px, rgba(0, 0, 0, 0.199219) 0px 1px 3px inset; -moz-box-shadow: rgba(0, 0, 0, 0.292969) 0px -1px 1px;*/ position: relative; top: -3px; } /* commented out the following two definitions as I don't think this is the place to handle it. better to leave as 100% and adjust the parent formLabel element */ /*.formContainer .formEdit > input[type="text"],.formContainer .formEdit > input[type="password"] { max-width:200px; }*/ /*.compactForm .formContainer .formEdit > input[type="text"],.formContainer .formEdit > input[type="password"] { max-width:150px; }*/ .formContainer input[type="text"]:focus, .formContainer textarea:focus { border: 2px solid transparent; background-color: #fffcdc; margin: 0; } .formContainer textarea { width: 100%; } .formContainer .formButtons { clear: left; text-align: right; overflow: hidden; } .formContainer .fieldset { margin: 15px 0; clear: left; } .formContainer .fieldsetFields { background-color: #f0eee7; font-size: 93%; padding: 10px 10px 10px 10px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } /* We could incorporate the following line to alternate field backgrounds slightly... .fieldsetFields > div:nth-child(2n+1) { background-color: rgba(255,255,255,.03); } */ @media (max-width: 635px) { .formContainer { padding: 0; } .formContainer .fieldsetFields { padding: 10px 0;} .css2 .formLabel, .css2 .formEdit, .css2 .formInfo { padding-left: 0px; width: 100%; clear: left; } } .formContainer .noTitle .fieldsetFields { border-top-left-radius: 4px; border-top-right-radius: 4px; } .formContainer .fieldsetTitle { background-color: #999999; color: white; font-weight:bold; padding-left:20px; padding-top:7px; font-size: 16px; border-top-left-radius: 4px; border-top-right-radius: 4px; } /* Main zone styling */ /*#main { margin: 30px 10px 30px 30px; } /* between header and footer, not including sidebar */ /* Sidebar zone styling - perhaps we should move this to a layout-specific css */ #about {line-height:120%;} #sidebar,sidebar { line-height:1.3; padding: 10px; color: #181818; background-color: #f1f4f6; min-height: 600px; } #sidebar h1,sidebar h1 { font-size: 20px; color: #181818; border-bottom: 1px solid #181818; padding-bottom: 2px; padding-top:20px; } #sidebar h2,sidebar h2 { font-size: 16px; color: #181818; } #aboutMore {cursor: pointer; text-decoration:none; color:#44657f; } #subinfo a { margin: 5px; } /* subscription info - for email / rss */ /* panel */ .blueDialog.animate { transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);} .blueDialog { box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); border-radius: 10px; position: fixed; z-index: 200; background: #f1f4f6; color: #44657f; max-width: 90%; } .blueDialog .hd { text-align: left; font-size: 23px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid #d0d0d0; padding: 2px 15px; text-shadow: 0px 2px 3px rgba(0,0,0,.3); background: #333; color: white; } .blueDialog .bd { text-align: left; overflow: hidden; padding: 15px; position: relative;} .blueDialog .bd.noButtons { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .blueDialog .bd.noTitle { border-top-left-radius: 10px; border-top-right-radius: 10px; } .blueDialog .ft { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: transparent; } .blueDialog .wait { background: url(images/waitingFlower.gif); } .blueDialog .buttons { height: 50px; line-height: 50px; text-align: right; padding-right: 10px; } .blueDialog .buttons a { margin: 0 6px; cursor: pointer; padding: 4px 8px; font-size: 18px; line-height: 1em; border-radius: 6px; background: #222 url(bbStatic/images/transWB.png) repeat-x; background-size: 1px 100%; border: 0px solid rgba(0,0,0,.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .blueDialog .buttons a.p { color: #f0f0f0; background-color: #2a2; } .blueDialog .buttons a.n { color: #f0f0f0; background-color: #a22; } .blueDialog .buttons a:hover { background-image: url(bbStatic/images/transGrad.png); } .blueDialog .buttons a:active { background-image: url(bbStatic/images/transBW.png); } /*.blueDialog .buttons a.p:hover { color: #dfbb4f; } .blueDialog .buttons a.n:hover { color: #dfbb4f; }*/ .blueDialog .blueDialogClose { cursor: pointer; background: url(bbStatic/images/closeDialog.png); width: 46px; height: 46px; right: -15px; top: -15px; position: absolute; z-index: 210; } .blueDialogMask { z-index: 90; width: 0; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,.5); } .blueDialogMask.show { width: 100%; } .noScroll { overflow: hidden; } /* used to de-activate scrolling on nodes such as HTML when showing dialog boxes */ /* .blueDialog .iconInfo { float: left; width: 50px; height: 50px; padding-right: 20px; position: relative; top: -10px; } */ /* New - button from http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba */ .button { background: #181818 url(bbStatic/images/transWB.png) repeat-x; background-size: 1px 100%; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,.3); color: white; cursor: pointer; display: inline-block; font-weight: bold; line-height: 1; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 4px; padding: .4em .5em; position: relative; /* so that button:active can be top:1px to appear it is moving down - kinda ugly though.. */ text-align: center; text-decoration: none; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .button:hover { box-shadow: 0 0 5px rgba(255,255,255,.5); } .button:active { background-image: url(bbStatic/images/black15.png); box-shadow: 0 0 5px rgba(255,255,255,.7); } .button.posigreen { background-color: #2a2; color: white; } .button.negared { background-color: #a22; color: white; } .button.large { font-size: 110%; } .button.small { font-size: 90%; } .button.full { width: 100%; margin: 0; } /* Used for dialogs that contain an icon */ .blueDialog div.iconDialog { margin: 10px 0 10px 60px; } .blueDialog .icon { background: #44657f; color: white; height: 1.2em; width: 1.2em; border-radius: 1em; text-align: center; font-weight: bold; font-family: serif; font-size: 32px; box-shadow: 1px 1px 5px rgba(0,0,0,.2); text-shadow: 0px 2px 3px rgba(0, 0, 0, .3); position: absolute; left: 20px; top: 20px; } .blueDialog .iconWarn { background: #a22; } .blueDialog .iconQuestion { background: #2a2; } .displayBox { background-color: #f1f4f6; border-radius: 6px; margin: 5px auto 10px auto; padding: 5px; } .yui3-calendar { margin: 6px 0; } /* used as part of the cssanim function in blue.js - Note, this requires prefixfree library! */ /* Note: was going to include "animation-fill-mode: forwards;" as part of .cssanim class, but that class is removed after animation, so I think its mute */ .cssanim { animation-duration: 800ms; animation-timing-function: ease-in-out;} body .fadeIn { animation-name: fadeIn; } @keyframes fadeIn {from { opacity: 0; } to { opacity: 1; } } body .fadeOut { animation-name: fadeOut; } @keyframes fadeOut {from { opacity: 1; } to { opacity: 0; } } /*#loveComments { position: fixed; z-index: 280; right: 0; top: 160px; width: 26px; height: 147px; background: url('extensions/bluejava/feedback/static/fb-tab.png') -26px 0; opacity: .5; cursor: pointer; }*/ #loveComments { position: fixed; z-index: 280; right: 0; top: 160px; width: 26px; height: 27px; background: url('extensions/bluejava/feedback/static/commentsIcon2.png') -26px 0; opacity: .5; cursor: pointer; } #loveCommentsBox { position: fixed; z-index: 280; top: 160px; right: -400px; width: 400px; background-color: #f0f0f0; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } #loveComments.open { right: 400px; } #loveCommentsBox.open { right: 0; } #lcin { background-color: #D3EDF4; margin: 10px; padding: 10px 20px; position: relative; min-height: 200px; color: #666666; } #lcin img { display: block; margin: auto; margin-bottom: 10px; } #lcin { font-family: "lucida grande", arial, sans-serif; font-size: 12px; text-align: center; } #lcfb { width: 90%; padding: 4px; border-radius: 4px; } #lcButtons { text-align: center; height: 20px; padding-top: 10px; position: relative; } #lcButtons input { border: 0; } #lcform textarea#lcfb,#lcform textarea#lcfb:focus { height: 81px; border: 0px; background-color: white; border: 0; margin: 0; overflow: auto; } #lcButtons #lcsend { position: absolute; right: -23px; bottom: -16px; } .alltrans { -moz-transition: right 1s, top 1s; -webkit-transition: right 1s, top 1s; -ms-transition: right 1s, top 1s; -o-transition: right 1s, top 1s; transition: right 1s, top 1s; } @media (max-width: 500px) { #loveComments { top: -124px; } #loveComments.open { right: 300px; } #loveCommentsBox { top: 0px; width: 300px; right: -300px; } #loveCommentsBox img { max-width: 100%; } } /* CSS for the blog plugin. Requires the following colors be defined: /* -- magLayout -- set:magLayoutFrame="#f1f4f6" Color of area surrounding the 4 blogbriefs in the mag layout front page set:blogBriefTrimColor="#dddddd" Single pixel border around each blog brief on the mag layout front page set:blogBriefBGColor="white" Background color of each blog brief set:featurePhotoTrim="#f1f4f6" Trim around feature photo on blog brief set:blogDateColor="#999999" Text color of the date on the blog brief set:categoryColor="#44657f" Category color on the blog brief -- Blog Entry Itself -- set:blogEntryTitleFG="#e74c3c" Foreground color of blog title set:blogEntryBG="#f1f4f6" Background of the article itself on the single blog entry display set:signatureBG="white" Background color of signature callout set:signatureBorderColor="#dddddd" Thin border around signature callout set:sigProfileLine="#dddddd" Thin line to right of sig pic set:blogLinkColor="#e74c3c" Color of links in blog entries (defaults to same as site) -- Comment Area -- set:commentAreaTitle="white" Title of the the comments area "Comments" set:commentAreaFG="#475157" Blog Commenting area foreground set:commentAreaBG="#475157" Blog Commenting area background set:commentName="#181818" Each Commenter's Name color set:commentTextFG="#181818" Text of commenters comments set:commentTextBG="white" Text background of commenters comments set:authorCommentTextBG="#DBEBF5" BG color of author's text (defaults to matching image of blog author bubble indicator) set:authorCommentTextFG="#181818" FG color of author's text (defaults to same as others) set:commentStatus="#999999" Color of status (pending approval, etc.) Only shown to blogger (and orig. poster) - Gallery - set:galleryBG="#475157" Gallery for photos (most blogs don't have this feature) set:galleryBorderColor="" Border color around entire gallery area set:galleryArrows="#dddddd" Arrows color - Directory - set:directoryYearSelectFG="#e74c3c" Foreground of each year selection set:directoryYearSelectBG="white" Background of each year selection set:directoryImageBorder="#dddddd" Border surrounding each image in directory */ #magLayout { background-color: #e74c3c; padding: 10px; border-radius: 6px; } #magLayout h2 { margin: 4px; } /* title for the maglayout briefs section */ .magLayoutRow { } .blogBrief { border: 1px solid #dddddd; padding: 6px; border-radius: 6px; background-color: white; margin: 10px; overflow: hidden;} .blogBrief h1 { margin: 6px 0 0 0; font-size: 19px; font-weight: normal; } /* blog title */ .blogBrief .featurePhoto { float: left; border: 6px solid #f1f4f6; line-height: 0; margin: 0px 10px 4px 0; border-radius: 6px; /*width: 120px; height: 120px;*/ } .blogBrief .noPicture { width: 120px; height: 120px; background-color: black; opacity: .3; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; filter: alpha(opacity=30); zoom: 1; } .blogBrief .description {line-height:130%; clear: left; height: 140px; overflow: auto; padding: 10px; } .blogBrief .continue { text-align: right; } /* .catdate used in both blogbriefs, blog itself, sidebar, etc. */ .catdate .date { color:gray; font-size: 11px; } /* color:blogDateColor */ .catdate .category { color: #44657f; font-weight: bold; font-variant:small-caps;} .blogIndex h2 { margin-bottom: 0; } .blogIndexEntry { margin-bottom: 15px; } /* Blog Entry Itself */ .blogEntry { background-color: transparent; border-radius: 6px; padding: 10px; margin-bottom: 20px; margin-top: 0;} .blogEntry .content { margin-top: 10px; /*overflow: hidden; */} .blogEntry .content div:focus { outline: none; } .blogEntry img { margin: 4px 10px; max-width: 100%; } .blogEntry #title { margin-top: 0; color: #1A648C;} .blogEntry a, .blogEntry a:link, .blogEntry a:visited, .blogEntry a:active {color: #e74c3c; } #blogIndex a, #blogIndex a:link, #blogIndex a:visited, #blogIndex a:active {color: #e74c3c; } #editBlog #f1\.title, #addBlog #f1\.title { width: 500px; font-size: 20px; } div.formField[data-fieldid='f1.content'] .formEdit { width: 100%; clear: left; } .formField.ckeditor { margin: 0 } #commentArea { background: transparent; padding: 10px; color: #475157; position: relative; border-radius: 6px; } .commentBoxContents { position: relative; z-index: 2; } .commentContainer { position: relative;margin: 0 25px; overflow: hidden;} .commenter { float: left; width: 110px; } .commentAvatar { width: 80px; height: 80px; border-radius: 4px; } .commentName,.commentName a { color: #181818; font-size: 14px; margin-top: 4px; } .commentDate { font-size: 10px; } .commentTitle { color: #181818; font-size: 22px; margin-bottom: 10px; } .commentText { background-color: white; color: #181818; border: 1px solid gray; margin-left: 120px; padding: 18px 15px; border-radius: 4px; white-space: pre-wrap; position: relative; } .commentText:before { background-color: white; border: 1px solid gray; border-width: 0 0 1px 1px; content: "\00a0"; display: block; height: 20px; width: 20px; position: absolute; top: 20px; left: -10px; transform: rotate( 45deg ) skew( 0deg ); } .blogAuthor .commentText:before { background-color: #DBEBF5; } .commentStatus { font-size: 8px; color: #999999; } .speechMark { width: 33px; height: 30px; background: url(extensions/bluejava/blog/static/images/commentTriangle_white.png); position: absolute; top: 14px; left: 88px; } .blogAuthor .speechMark { background-image: url(extensions/bluejava/blog/static/images/commentTriangle_blue.png); left: 89px; } .blogAuthor .commentText { background-color: #DBEBF5; border: 1px solid #181818; } .newComment { opacity: .5; } .bloggerControls { padding: 6px; background: #44657f; border-radius: 6px; float: right; } /*#commentArea .u { position: absolute; top: 0px; left: 0px; height: 50px; background: url(images/darkblueBox_vertical.png) repeat-x; width: 100%; } #commentArea .ul { position: absolute; top: 0px; left: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat; } #commentArea .ur { position: absolute; top: 0px; right: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat -120px 0; } #commentArea .b { position: absolute; bottom: 0px; left: 0px; height: 50px; background: url(images/darkblueBox_vertical.png) repeat-x 0 -120px; width: 100%; } #commentArea .bl { position: absolute; bottom: 0px; left: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat 0px -50px; } #commentArea .br { position: absolute; bottom: 0px; right: 0px; height: 50px; width: 120px; background: url(images/darkblueBox_corners.png) no-repeat -120px -50px; }*/ /* Gallery */ #gallery { border: 1px solid ; padding: 10px; overflow: hidden; border-radius: 4px; } #gallery div { float: left; border: 1px solid gray; width: 120px; height: 90px; text-align: center;padding: 5px; background-color: #475157; margin: 1px; } #gallery img { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } #galleryPanel { position: fixed; border: 2px solid gray; border-radius: 12px; padding: 10px; background: #f0f0f0; width: 75%; height: 50%; overflow: auto; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } #galleryPanel img { max-height: 120px; max-width: 90px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); margin: 10px; } .yui-skin-sam .yui-toolbar-container .yui-toolbar-gallery span.yui-toolbar-icon { background-image: url(extensions/bluejava/blog/static/images/camIcon.png); background-position: 0px 0px; left: 6px; } .yui-skin-sam .yui-toolbar-container .yui-toolbar-HTML span.yui-toolbar-icon { background-image: url(fam/application_edit.png); background-position: 0px 0px; left: 6px; } /* Directory */ #yearSelect { margin: 20px 0 0 -20px; } #yearSelect li { float: left; margin: 0 10px; list-style-type: none; font-size: 20px; } #yearSelect li a { display: inline-block; } #yearSelect .selected a { color: white; background-color: #e74c3c; } #yearSelect li a { color: #e74c3c; padding: 5px; border-radius: 4px; } #blogIndex img { border: 2px solid #dddddd; border-radius: 4px; } #addACommentForm #f1\.comment { width: 99%; height: 80px; padding: 6px; } /* 99% so right edge doesn't get cut on Firefox */ #addACommentForm #f1\.name { padding-left: 20px; background-image: url(fam/user.png); background-repeat: no-repeat; background-position: 2px 2px; } #addACommentForm #f1\.email { padding-left: 20px; background-image: url(fam/email.png); background-repeat: no-repeat; background-position:2px 2px; } #addACommentForm #f1\.url2 { padding-left: 20px; background-image: url(fam/world_link.png); background-repeat: no-repeat; background-position:2px 2px; } #addACommentForm #url { position: absolute; left: -999px; } .blogEntry .sig { background-color: white; border-radius: 6px; border: 1px solid #dddddd; margin-top: 20px; padding: 20px; } .blogEntry .sig .photo { margin-right: 6px; float: left; position: relative; } .blogEntry .sig .photo img { border-radius: 6px; } .blogEntry .sig .profile { width: 80%; overflow: hidden; border-left: 1px solid #dddddd;} .blogEntry .sig .field { margin-left: 1em; } .blogEntry .profile .bio { font-size: .85rem; } .blogEntry .profile .author { font-size: 18px; } .blogEntry .sig .twitter { font-size: 80%;} .blogEntry .sig .twitter img { margin: 0 } /* the following is for click-to-zoom feature */ img.zoom { position: fixed; z-index: 999; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: zoom-out; } img.zoomable { cursor: zoom-in; } img.inviso { visibility: hidden; pointer-events: none; } blockquote { padding: 1em 1em 1em 1.5em; border-left: 3px solid gray; } blockquote.quote { font-size: 1.8rem; border-left: 0; font-style: italic; } .blogButton { background: #eee; padding: 0.5em; border-radius: 4px;display: inline-block; position: relative; line-height: 1.0; } .tweetthis { font-size: 0.8rem; } .tweetthis a { padding: 2px 4px; font-size: .9rem; background-color: #CCC; border-radius: 3px; display: inline-block; transform: rotate(12deg); position: absolute; right: -12px; top: -10px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } @media (max-width: 635px) { div.commenter { margin-bottom: 10px; } div.speechMark { display: none; } div.commentContainer { margin: 0 5px; } div.commentText { clear: left; margin-left: 0; } #addACommentForm .formField .formEdit { width: 100%; } /* on its own line, so can be 100% */ } @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: bold; } @font-face { font-family: "opensans"; src: url(bbStatic/fonts/OpenSans/OpenSans-Italic-webfont.woff); font-style: italic; } @font-face { font-family: "mont"; src: url(bbStatic/fonts/Montserrat/montserrat-bold-webfont.woff); font-weight: bold; } @font-face { font-family: "julius"; src: url(bbStatic/fonts/Julius_Sans_One/juliussansone-regular-webfont-english.woff); } body { font-family: opensans, "Helvetica Neue", "Helvetica", Arial; color: #444; text-align: left; line-height: 1.5; width: 100%; font-size: 16px; -webkit-font-smoothing: antialiased; } h1 { font-size: 1.9rem; font-family: julius; } h2 { color: #444; font-size: 1.7rem; font-weight: bold; margin: 1em 0; } h3 { font-size: 1.6rem; color: #4C8DA3; font-weight: normal; padding: 2px .7em; margin-left: -.7em; display: inline-block; } /* Page Layout Stuff */ #hd { border-bottom: 1px solid #c7bfbf; padding: 1em; } #bd { border: 0px solid blue; /*padding: 10px 0 30px 0; overflow: hidden; */ padding-bottom: 40px; } #ft { border: 0px solid green; color: black; z-index: 10; } html { background-color: white; } #doc { background-color: white;} input { border: 1px solid lightgray; } #main { padding: 20px 20px; background-color: white; background: url(images/gradient_gold.gif) repeat-x; } #hero { height:30vw; background-size: 105% auto; background-position: 0px -4vw; position: relative; } #heroTop { height: 100%; background: url(images/shinkansenTop.jpg); top: 0; background-size: 105% 100%; background-position: 0px -4vw; position: absolute; width: 100%; } #heroBase { height: 17vw; background: url(images/shinkansenBaseAlpha2.png); background-size: 105% auto; position: absolute; top: 13vw; width: 100%; } #herofg { height: 30vw; background: url(images/shinkansenfg.png); background-size: 105% auto; background-position: 0px -4vw; position: absolute; width: 100%; transition: transform 500ms;} #hero .tagline { font-size: 2.7vw; color: white; position: absolute; bottom: 3vw; width: 100%; text-align: center; text-shadow: 0 0 10px black; transform: translateX(2500); line-height: 1.2em; padding: 0 2em; } .tagline span { white-space: pre; } .tagline small { color: rgba(255,255,255,.5); font-size: 50%; } .logo { font-size: 4rem; } a.logo,a.logo:link,a.logo:visited,a.logo:active { color: #ddd; } #logoCont img { width: 250px; max-width: 50%; } a { color: #4e66aa; text-decoration: none; } a:hover { text-decoration: underline; } h1 a { color: inherit; } h2 a { color: inherit; } h3 a { color: inherit; } /* Home Page Styles */ .roles a { padding: 2vw; display: block; text-align: center; color: white; margin: auto; font-family: julius; font-size: 100%; } .roles a span { white-space: pre; } /* this works with fitText and spans to ensure max size text */ .roles .column { padding: 0; } .roles .icon { float: left; margin: 24px 14px 14px 0; display: none; } /*.roles .column:hover .icon { display: block; } */ .roles p { margin: 15px 10%; color: #444; line-height: 1.8rem; } .roles > div > div { margin: auto; text-align: justify; } .roles .icon { float: none; text-align: center; height: 50px; } #cpl { background: #5d9fb4; Xbackground: linear-gradient(to bottom, #90cadd 0%,#67afc7 5%,#5d9fb4 95%,#4a7e8e 100%); } #cpl:hover { background: #64ADC4; Xbackground: linear-gradient(to bottom, #90cadd 0%,#6EBAD4 5%,#65ABC2 95%,#4a7e8e 100%); } #sbo { background: #fec547; Xbackground: linear-gradient(to bottom, #fcd98d 0%,#fec547 5%,#FAC85A 95%,#aa812f 100%); } #sbo:hover { background: #FAC85A; Xbackground: linear-gradient(to bottom, #fcd98d 0%,#FCCF6A 5%,#FCCA5B 95%,#aa812f 100%); } #e { background: #a2cd4d; Xbackground: linear-gradient(to bottom, #d4e5b3 0%,#a2cd4d 5%,#98c149 95%,#70912f 100%); } #e:hover { background: #ABD45B; Xbackground: linear-gradient(to bottom, #d4e5b3 0%,#ABD45B 5%,#A5C95F 95%,#70912f 100%); } .roleCorp ul li { list-style-image: url(images/blue_bullets.gif); margin-bottom: 6px; } #langSwitch { float: right; font-size: 75%; } .bje { color: #6183BC; } .roleLeadin { margin-bottom: 10px; } .roleLeadin h1 { margin: 1em 0; } .roleLeadin p { text-align: left; } .roleEntre h1 { color: #a9cd5c; font-size: 28px; } .roleEntre h2 { color: #a9cd5c; font-size: 20px; } .roleImg { display: block; float: right; margin: 20px 0px 20px 10px; } .roleEntre .roleImg { width: 100px; height: 174px; } .roleFeat { clear: both; background-color: #f2f8db; margin: 0px; margin-bottom: 20px; position: relative; border-radius: 10px; display: flex; align-items: stretch; } .roleFeat .menu { background-color: #a9cd5c; width: 200px; padding: 0px; font-size: 16px; padding-bottom: 95px; } .roleFeat .menu .item { margin: 0 0; color: white; font-weight: bold; border-bottom: 1px solid #d3e56f; padding: 15px 10px; cursor: pointer; } .roleFeat .roleFeatDisplay { padding: 25px; font-size: 92%; flex: 1; } .roleFeat .roleFeatDisplay p { text-align: left; } .featm { display: none; background-color: #f2f8db; } .item:hover { background-color: #9ab755;} .item.selected { background-color: #d3e56f; } #menuSpacer { border-bottom: 1px solid #d3e56f; height: 20px; } .roleCorp h1 { color: #72b6cb; font-size: 28px; } .roleCorp h2 { color: #72b6cb; font-size: 20px; } .roleCorp .menu { background-color: #72b6cb; } .roleCorp .item.selected { background-color: #b3ddec; } div.roleCorp .item:hover { background-color: #429fbe; } .roleCorp .roleFeat { background-color: #eef9fe; } .roleCorp .roleFeat { background-color: #eef9fe; } .roleCorp .featm { background-color: #eef9fe; } /* ie needs bg set explicitly here */ .roleCorp .menu .item { border-bottom: 1px solid #b3ddec; } .roleCorp #menuSpacer { border-bottom: 1px solid #b3ddec; } .roleSBus h1 { color: #fdba40; font-size: 28px; } .roleSBus h2 { color: #fdba40; font-size: 20px; } .roleSBus .menu { background-color: #fdba40; } .roleSBus .item.selected { background-color: #fedd72; } div.roleSBus .item:hover { background-color: #f29f38; } .roleSBus .roleFeat { background-color: #fff8d3; } .roleSBus .featm { background-color: #fff8d3; } .roleSBus .menu .item { border-bottom: 1px solid #fedd72; } .roleSBus #menuSpacer { border-bottom: 1px solid #fedd72; } .roleSBus .roleImg { width: 220px; height: 301px; } } #ourCompanyInfo { padding: 10px 0 20px 0px; font-size: 70%; } #ourstory { max-width: 1024px; margin: auto; padding: 0 10px; } #ft { width: 100%; background-color: #444; position: fixed; bottom: 0; left: 0; color: white; padding: 7px; font-size: 75%; } #ft a { color: white; text-decoration: none;} #ft a:hover { color: #fedd72 } .fieldError { color: red; min-height: 1em; } .getStarted { position: absolute; bottom: 22px; left: 22px; } .bigger { color: #808080; font-size: 120%; } .cform { border-radius: 10px; padding: 20px; position: relative; margin-top: 20px; } .cform h1 { color: #606060; font-size: 14px; margin-bottom: 4px; } .cform input, .cform textarea { width: 100%; border: 0; padding: 2px; border-radius: 4px; } .roleFeat input[type="image"] { float: right; margin-top: 4px; } .roleCorp .cform { border: 1px solid #72b6cb; } .roleCorp .roleImg { width: 260px; height: 217px; } .roleCorp #ferremail { background-color: #eef9fe; } .roleSBus .cform { border: 1px solid #fdba40; } .roleSBus #ferremail { background-color: #fff8d3; } .roleEntre .cform { border: 1px solid #a9cd5c; } .roleEntre #ferremail { background-color: #f2f8db; } .insetPage { max-width: 768px; margin: 0 auto; padding: 0 10px; } .homeContent p { width: 100%; font-size: 17px; color: #505151; margin-bottom: 1em; line-height: 1.6; letter-spacing: 0.2px; } .homeContent .leadLine { font-size: 1.3rem; color: #ce7464; margin-top: 20px; letter-spacing: 0.9px; font-family: julius; font-weight: bold;} .homeContent .q { font-size: 30px; color: #a0a0a0; text-align: right; margin-bottom: 10px; letter-spacing: 1.5px; } .homeContent.ja p { } input#curl { position: fixed; top: -100px; display: none; } .info { background-color: #E6EFC2; color: #264409; border: 2px solid #C6D880; padding: 8px; text-align: center; } .error { background-color: #FBE3E4; color: #8A1F11; border: 2px solid #FBC2C4; padding: 8px; text-align: center; } .blogEntry .formContainer { padding: 0; } #loginArea { float: right; } #loginArea input { border: 0; border-radius: 4px; background: gray; color: white; padding: 0 4px; width: 60px; margin-right: 14px; } /*#loginArea input[type=submit] { border: 1px solid lightgray; }*/ .cd1 { width: 180px; float: left; clear: left; margin-left: 12px; } .cd2 { font-weight: bold; float: left; } .menu { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #agileDiagram { width: 380px; display: block; max-width: 92%; margin: auto; border-radius: 100px; } #emailForm { background: #FFF8D3; border-radius: 10px; margin-bottom: 20px; } #emailForm input[type=image] { margin-left: 20px; } /* used as part of the cssanim function in blue.js */ /* Note: was going to include "animation-fill-mode: forwards;" as part of .cssanim class, but that class is removed after animation, so I think its mute */ .cssanim { animation-duration: 800ms; animation-timing-function: ease-in-out;} body .fadeIn { animation-name: fadeIn; } @keyframes fadeIn {from { opacity: 0; } to { opacity: 1; } } body .fadeOut { animation-name: fadeOut; } @keyframes fadeOut {from { opacity: 1; } to { opacity: 0; } } .callout { max-width: 240px; float: right; font-size: 1.2rem; margin: 1em; margin-right: 0; padding: 1em; background: #f1f4f6; background: #f1f4f6; border-radius: 5px; font-style: italic; } .red { color: red; font-size: 120%; } .blogEntry { font-size: 110%; line-height: 1.7; padding: 0; } h1.tc { font-size: 40px; margin-top: 1.5em; } .subscribe .twitter { color: #529FDB; margin-left: 2em; } .leadin { text-align: center; font-size: 130%; } .leadin.sub { font-size: 110%; padding-top: 30px;} .subscribe .title { font-size: 110%; padding: 4px; } .subscribe #email { margin-right: 0; border-radius: 8px 0 0 8px; width: 140px; padding: 2px 10px; } #emailsub-submit { border-radius: 0 8px 8px 0; padding: 2px 10px; } .formFerr { color: red; } .winset { background: white; padding: 10px; border-radius: 10px; } .blogEntry h1,.blogEntry h2 { font-family: julius; } .blogEntry h3 { font-family: mont; } .blogEntry table { width: 100%; } .blogEntry table tr:nth-of-type(even) { background: rgba(0,0,50,0.05); } .blogEntry img.brc, .blogEntry video.brc { display: block; margin: 1em auto; border-radius: 10px; } video.brc { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } .blogEntry .content { margin-top: 30px; max-width: 768px; margin: auto; } .blogEntry .entryHead { margin: 2em auto; max-width: 768px; } .blogEntry div[data-script] { margin: 1em 0; } .tagline { display: inline-block; font-family: julius; } .tagline div.small { line-height: 20px; color: gray; font-size: 55%; } .subtagline { font-size: 85%; color: gray; letter-spacing: 1px; margin: 0; font-family: julius; } .blogEntryFooter > * { max-width: 768px; margin-left: auto; margin-right: auto; } .blogEntryFooter .sig { border: 0; border-radius: 0; background: #f0eee7; max-width: none; } .blogEntryFooter .sig > div { max-width: 768px; margin: auto; } #commentArea { max-width: 768px; margin: auto; } blockquote p { margin: 0; } /* blockquotes already have margin - should this be blockquote p:last-child ? */ .entryDescription { padding: 1em; background: #f0eee7; margin-bottom: 2em; } .entryDescription > * { max-width: 768px; margin: auto; } .entryDescription:before { content: "Summary / tl;dr"; font-size: 120%; display: block; color: #6d1a24; font-variant: small-caps; padding: 2px 6px; border-bottom: 1px solid #c0c0c0; margin: 0.5em auto; margin-bottom: .5em; max-width: 768px; } .formButtons input { border: 0; background: #f0eee7; border-radius: 4px; } .blogEntry .hljs { box-shadow: inset 0px 0px 4px rgba(0,0,0,.1); background: #F8F5F0; font-size: 0.9rem; line-height: 1.2; tab-size: 4; border-radius: 4px; } #blogIndex { font-family: julius; } #blogIndex h2 { margin: 0; font-size: 1.2rem; font-weight: normal; } #blogIndex h3 { } #blogIndex h4 { font-weight: normal; font-weight: 14px; color: gray; margin-top: 0; } #blogIndex > div { margin: 1em; padding: 1em;} .dateline { float: left; clear: left; font-size: 1.1rem; width: 3.8em; text-align: center; margin: 0; margin: 8px 2rem 8px 0; padding: .8rem; display: none; } .dateline .month { font-size: 0.8em; background: #44657f; border-radius: 8px 8px 0 0 ; color: #f0eee7; padding: 2px 0; } .dateline .day { font-size: 0.6em; background: #f0eee7; border-radius: 0 0 8px 8px; color: #44657f; padding: 2px 0; } .bloggerControls { float: left; background: none; } .catdate .date { font-size: 16px; } .row.noCollapse .column.grid6 { clear: none; float: left; width: 50%; } /* Allow a noCollapse row */ .zoomFromRight { animation: zoomFromRight 2s; animation-fill-mode: forwards; } @keyframes zoomFromRight {from { opacity: 0; } to { opacity: 1; } } .zoomToLeft { animation: zoomToLeft 2s; animation-fill-mode: forwards; } @keyframes zoomToLeft {from { opacity: 1; } to { opacity: 0; } } @media (max-width: 767px) { .blogEntry .content, .blogEntryFooter > * { margin-left: 10px; margin-right: 10px; } .blogEntry .entryHead { margin: 2em 10px; } .blogEntryFooter .sig { margin-left: 0; margin-right: 0; } .blogEntryFooter .sig .photo { float: none; text-align: center; } .blogEntryFooter .sig .profile { border-left: 0; border-top: 1px solid #ddd; width: auto; margin: 0.5em; text-align: center; } img { max-width: 100%; } #compIndicator, .roles .icon,.desktopOnly { display: none; } .newSection { padding-top: 10px; } #ourCompanyInfo { font-size: 60%; } .roleTop .roleImg { max-height: 140px; width: auto; margin: 20px; } .menu { display: none; } #bd .roleFeat { background: transparent; height: auto; } .roleFeat .roleFeatDisplay { margin: 0; padding: 0; } .roleFeat .featm { width: 100%; position: static; display: block; background: transparent; clear: both; height: auto; margin-top: 20px; } .roleCorp .cform { background-color: #eef9fe;} .roleSBus .cform { background-color: #fff8d3;} .roleEntre .cform { background-color: #f2f8db;} #compList { margin-bottom: 10px; } .insetPage { padding: 0 16px; } } @media (max-width: 635px) { #loginArea { display: none; } } @media (max-width: 440px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.3rem; } #logoCont { text-align: center; } #ourCompanyInfo { font-size: 50%; } .cd1 { width: 100px; margin-left: 8px; } .roleTop .roleImg { float: none; margin: 20px auto;} h1.tc { font-size: 33px;} .callout { max-width: 180px; font-size: 1.0rem; margin: 0.8em; } } .zoomin { animation: zoomin 300ms forwards ease-in-out; backface-visibility: hidden; transform: translate3d(0, 0, 0); transform-style: preserve-3d; } @keyframes zoomin { from { opacity: 0; transform: scale(0.9); } } .show { display: block; } body .notification.show { bottom: 42px; } .formEdit input[type='text'], .formEdit div[contenteditable] { border: 1px dotted #f0f0f0; } *:focus { outline: none; } /* looks better when editing blog */ .button { box-shadow: none; background: #f0eee7; color: #181818; text-shadow: none; font-weight: normal; } .fullwidth { display: block; } .centered { display: inline-block; margin: 1em auto; } .articleLink { position: fixed; font-size: 2rem; top: 0; left: 100vw; width: 100vh; background: rgba(0,0,0,0.05); color: gray; transform: rotate(90deg); transform-origin: left top 0; padding: 0 2em; white-space: nowrap; } .articleLink a, .articleLink a:link,.articleLink a:visited, .articleLink a:active { color: rgba(231, 135, 127, 0.59); } .prevArticleLink { transform: rotate(270deg); left: 0; top: 100vh; transform-origin: left top 0; } @media (max-width: 899px) { .articleLink { display: none; } } /* --- Color Palette --- */ /* Setup your custom color name mappings here... Of course no need to remap any of those mappings that are defined in your parent theme... -------------------------------------------------------------------------------------------------------------------------------------- set:blackish="#181818" set:veryDarkgray="#333" set:darkgray="#444" set:gray="gray" set:lightred="#ce7464" set:veryLightGray="#f0eee7" set:veryLightYellow="#fffcdc" set:bje="#6183BC" the bluejava e color set:corpblue="#4C8DA3" set:blueflat="#1A648C" set:deepblue="#40b0d8" set:lightblue="#C7D3E1" set:lightgray="#f0eee7" set:midgray="#999"; lighter than "gray" - darker than "lightgray" set:indianRed="#e74c3c" set:deepIndianRed="#711" set:white="white" set:sunflower="#f1c40f" set:yellow="#ff8" set:whitesmoke="whitesmoke" set:pink="pink" set:frostedGlass="rgba(255,255,255,.3)" set:frostedGlassDarker="rgba(128,128,128,.3)" set:darkShades="rgba(0,0,0,.8)" */ /* Generic Color Definitions (this needs more thought/work) ---------------------------------------------------------- set:fgColor="#181818" Your sites primary text color, in general against the site background set:fgColor2="#44657f" Secondary forground color. Used for variety (headings, etc.) set:fgColor3="#b4a281" 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="#dddddd" 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="#dddddd" For background textual highlighting against background2 set:bgColorStrong="#475157" For strongly deliniating some area (such as for form containers) set:accent="#e74c3c" Splashy accent color - often used for links, inset box borders, etc. */ /* bbHTML Overrides ---------------------- set:linkColor="#e74c3c" set:linkHoverColor="#475157" */ /* bbStyles Overrides ------------------- set:formBG="transparent" set:formFieldsetBG="#f0eee7" set:formFieldBorder="transparent" set:formFieldFocusBorder="transparent" set:formFieldFocusBG="#fffcdc" */ /* dialog box overrides -------------------- set:dialogHeaderFG="white" set:dialogHeaderBG="#333" set:dialogFooterBG="transparent" /* Blog Color Overrides ------------------------ set:blogEntryTitleFG="#1A648C" set:magLayoutFrame="#e74c3c" set:blogDateColor="gray" set:commentAreaBG="transparent" set:blogEntryBG="transparent" set:blogLinkColor="#e74c3c" set:commentAreaTitle="#181818" set:commentName="#181818" Each Commenter's Name color */ /*html body { color: #181818;}*/ h1 { color: #6183BC; } body.blog h1.tc { color: #1A648C; } body .subtext, body.blog a.subtext, body.blog a.subtext:link, body.blog a.subtext:visited, body.blog a.subtext:active { color: #f0eee7; font-size: 75%;} .insetBox { border: 0px; } #addACommentForm .formTitle { color: #181818;} header a, header a:link, header a:visited, header a:active { color: #e74c3c; } footer a, footer a:link, footer a:visited, footer a:active { color: white; } header a:hover, footer a:hover { color: #ff8; text-decoration: none; cursor: pointer; } #blogFormContainer .fieldsetFields { background: #f0eee7; } .cke_textarea_inline { background: white; }