/* triangleaws.css -- the Style Sheet for the Triangle Chapter, AWS website */
/* Created by Fred Brack, last updated September 2022 for button support */
/* COLORS:  #501419 is OBSCURE DULL MAGENTA; #FFFFCC is PALE WEAK YELLOW; #501419 is close to the color of the AWS logo background */

body, div, p, blockquote, ol, ul, dl, li, dt, dd, td, h1, h2, h3 
     { color: black; background-color: white; font-size: large; font-family: Arial, sans-serif }
/* Wider right margin required due to masked URL effect (6-1-18 comment: ??? REMOVED!) */
/* body { margin-top: 10px; margin-left: 10px; margin-right: 25px } */

/*----- CLASS SELECTORS -----*/
/* Most of the following elements are not used at present but are left over from the inheritance file */

/* header and footer refer to page headers and footers */
/* title refers to the page title, while banner refers to a banner title within a page */
/* classes ending in 2 are used primarily in the left navigation column on the main page */
.header            { color: #FFFFCC; background-color: maroon; font-size: xx-large; font-weight: bold } /* used */
.footer            { color: #FFFFCC; background-color: maroon; font-size: medium } /* used */
.title             { font-family: "Comic Sans MS"; }
.subtitle          { font-size: medium; }
.tableheader       { text-align: center; color: #FFFFCC; background-color: maroon; }

.top               { font-size: small } /* for the navigation word "TOP" */
.center            { text-align: center }
/* stylex's are generally used in left nav menu, if present */
.bgcolor2          { background-color: maroon; border-color: navy} /* used - header lines in table*/
.bgcolort1         { background-color: #FFFFCC; border-color: navy; } /* used */
.announce          { background-color: #FFFFCC } /* used in Announce box as background */
.banner            {  /* used on every page */
	color: #FFFFCC;   
	background-color: maroon; 
	font-size: x-large; 
	font-weight: bold; 
	text-align: center; 
	margin-top: 0; 
	border-top: 0 none;
	padding-top: 0
}
.bannerfood        {  /* used in recipe_main */
	color: white;
    background-color: #000099; 
    font-size: x-large; 
    font-weight: bold; 
    text-align: center
}
.smaller           { font-size: smaller }
.larger            { font-size: larger }
.mobileno 		   { display: inline } /* display unless on a mobile device */
.mobilenoblock     { display: block }
.mobileyes         { display: none }
.mobileyesblock    { display: none }
.noborder          { border: 0px solid black }

/* BUTTON support added Sep 25, 2022 */
.mybutton { /* navigation - see also button.hover */
	color: #FFFFCC;
	background-color: maroon; /* better match button.hover... */
	border-color: black;
	border-radius: 8px;
	font-size: large;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 4px;
	padding: 5px;
	width: auto; /* because text size can vary */
}
button:hover { /* this will affect ALL buttons ... */
	background-color: #FFFFCC; 
	color: maroon;
}

/*----- HTML SELECTORS -----*/

p.question         { color: navy;    background-color: white;   font-size: medium;  font-weight: bold }
p.answer           { color: green;   background-color: white;   font-size: medium;  font-weight: bold; font-style: italic }

table.solid        { border-color: navy;   border-style: solid;  border-width: 2px; background-color: black; border-collapse: collapse } 
table.dashed       { border-color: navy;   border-style: dashed;  border-width: 2px; background-color: navy }
table.double       { border-color: navy;   border-style: double;  border-width: 5px }
table.headcolor    { background-color: #501419; border-color: #501419; border-style: solid; border-width: 4px; border-collapse: collapse } /* used */
table.width80m     { width: 80% }
table.width90m     { width: 90% }

/* td.nav is for navigation bar cells in the page header */
td.announce        { text-align: center; vertical-align: top; border: 6px dotted #660066 } /* Announcement box */
td.nav             { vertical-align: bottom; background-color: #FFFFCC; border: 0px solid black }
td.done            { background-color: #CCCCCC} /* used */
td.soon            { color: #C0C0C0 } /* used */
td.theader         { padding: 4px; color: white; background-color: navy; font-weight: bold; }

ul.narrowlist      { text-align: left; padding-left: 10px; margin-left: 10px }
li.tablebullet	   { background-color: #FFFFCC; list-style-type: disc } /* used */


/* Link attributes */
a:link             { color: navy; text-decoration: none }
a:visited          { color: navy; text-decoration: none }
a:hover            { color: white; background-color: navy }
a.nav              { text-decoration: none }
/* technically "invisible" is white on white, and it is used in header for screen reader */
a.invisible        { text-decoration: none; color: white; background-color: white }

hr.footer          { color: navy; background-color: navy; height: 3px }

/* standard heading definitions */
h1                 { font-size: xx-large; text-align: center }
h2                 { font-size: x-large }
h3                 { font-size: large }

/* NEW STUFF added June 2018 -- keep it all, just in case ... */
.border0    { border-width: 0 0 0 0 } /* picture and table borders */
.border1    { border: 1px black solid }
.border2    { border: 2px black solid }
.border3    { border: 3px black solid }
.border4    { border: 4px black solid }
.border5    { border: 5px black solid }
.collapse   { border-collapse: collapse }
.spacing0   { border-spacing: 0 } /* table cellspacing */
.spacing1   { border-spacing: 1px }
.spacing2   { border-spacing: 2px }
.spacing3   { border-spacing: 3px }
.spacing4   { border-spacing: 4px }
.spacing5   { border-spacing: 5px }
.spacing6   { border-spacing: 6px }
.spacing7   { border-spacing: 7px }
.spacing10  { border-spacing: 10px }
.padding0   { padding: 0 } /* table cellpadding */
.padding1   { padding: 1px }
.padding2   { padding: 2px }
.padding3   { padding: 3px }
.padding4   { padding: 4px }
.padding5   { padding: 5px }
.padding6   { padding: 6px }
.padding7   { padding: 7px }
.padding10  { padding: 10px }
.valigntop  { vertical-align: top }
.valignmid  { vertical-align: middle }
.valignbot  { vertical-align: bottom }
.valignbas  { vertical-align: baseline }
.width10    { width: 10% } /* table widths */
.width20    { width: 20% }
.width25    { width: 25% }
.width33    { width: 33% }
.width40    { width: 40% }
.width50    { width: 50% }
.width75    { width: 75% }
.width80    { width: 80% }
.width90    { width: 90% }
.width100   { width: 100% }
.widthauto  { width: auto }

.aqua        { color: aqua } /* font colors */
.black       { color: black }
.blue        { color: blue }
.fuschia     { color: fuschia }
.gray        { color: gray }
.grey        { color: gray }
.green       { color: green }
.lime        { color: lime }
.maroon      { color: maroon }
.navy        { color: navy }
.olive       { color: olive }
.purple      { color: purple }
.red         { color: red }
.silver      { color: silver }
.teal        { color: teal }
.white       { color: white }
.yellow      { color: yellow }

.aquabg      { background-color: aqua } /* background colors */
.blackbg     { background-color: black }
.bluebg      { background-color: blue }
.fuschiabg   { background-color: fuschia }
.graybg      { background-color: gray }
.greybg      { background-color: gray }
.greenbg     { background-color: green }
.limebg      { background-color: lime }
.maroonbg    { background-color: maroon }
.navybg      { background-color: navy }
.olivebg     { background-color: olive }
.purplebg    { background-color: purple }
.redbg       { background-color: red }
.silverbg    { background-color: silver }
.tealbg      { background-color: teal }
.whitebg     { background-color: white }
.yellowbg    { background-color: yellow }

.bold        { font-weight: bold }
.clear       { clear: both } /* for clearing columns */
.comic       { font-family: "Comic Sans MS" }
.courier     { font-family: "Courier New" }
.left        { text-align: left }
.right       { text-align: right }
.example     { font-family: "Courier New" }
.floatleft   { float: left }  /* image alignment */
.floatright  { float: right }
.handwriting { font-family: "Lucida Handwriting", Script }
.hspace5     { margin: 0 5px } /* primarily for space around an image */
.indentex    { margin-left: 20px } /* indent examples in mobileweb desktop */
.italic	 	 { font-style: italic }
/* For centering tables, see https://www.granneman.com/webdev/coding/css/centertables */
table.center {
	margin-left:  auto; 
    margin-right: auto;
}
/* Left-justify lists for mobile, not used for desktop */
ul.justifym  { }
/* Element Overrides */
q			 { font-style: italic }
img          { max-width: 100%; width: auto; height: auto; } /* auto-resize images for mobile */
td           { border: thin solid black }

/* END OF FILE */