@media all { /* Primary base elements */ body { display: block; width:100%; margin:0; padding:0; border:0; } header { display: block; width:100%; margin:0; padding: 0; border:0; } footer { display: block; width:100%; margin:0; padding:0; border:0; } nav { display: block; width:100%; margin:0; padding:0; border:0; } /* may be replaced by center menu */ /*main { display: block; width:100%; margin:0; padding:0; border:0; } */ /* Articles and Parts */ article { display: block; width:100%; margin:0; padding:0; border:0; } .stripe li:nth-child(even) { background: #ddd; color: black; } .stripe li:nth-child(odd) { background: #fff; color:black; } /* Sections and parts */ section { display: block; width:100%; margin:0; padding:0; border:0; } /* to float, stack or stripe the aside blocks */ aside { display: block; width:100%; margin: 0; padding: 0; border: 0; } aside.fl { display: block; width:50%; margin: 0; padding: 0; border: 0; float:left; } aside.fr { display: block; width:50%; margin: 0; padding: 0; border: 0; float:right; } /* aside:nth-child(odd) { background: #b22234; color: white; } */ /* aside:nth-child(even) { background: #fff; color:black; } */ /* aside:nth-child(odd) a { background: #fff; } */ /* alternate aside blocks */ .sidestack { display:block; width:100%; max-width: 940px; margin:auto; } .sidestack ol li { padding-top: 15px; } .sidestripe { display:block; width:80%; max-width: 940px; margin:auto; border: 4px solid black; border-radius: 12px; } /* .sidestripe aside { width:100%; max-width: 940px; margin:auto; } */ /* Standard CLASSES for general layout and format */ /* Background shading */ .fdbk { background: url("gfx/fadebk-80.png") left top; } .shadebk { background-color: white; opacity: 0.9; } /* */ .offbk { background-color: #33D; opacity: 0.9; } /* dark blue */ .hardbk { background-color: white; opacity: 1; } /* */ .redbk { background-color: #DC143C; opacity: 1; color: white; } /* */ .graybk { background-color: lightgray; opacity: 8; } /* */ .parchbk { background-color:#fee8b7; opacity: 8; } /* */ /* Text and block horizontal alignments */ .cl { text-align: center; margin: auto; } .bcl { display: block; text-align: center; margin: auto; } .lt { text-align:left; } .rt { text-align: right; } .fl { float:left; } .fr { float: right; } .bfl { display: block; float:left; } .bfr { display: block; float:right; } /* Padding elements */ .padtb { padding: 10px 0; } .padlr { padding: 0 10px; } .txt2n { font-size: 1.2em; padding: 0 1em; line-height:1.2em; } .txt2s { font-size: 0.8em; padding: 0 1em; } .txt2b { font-size: 1.2em; line-height:2.2em; } .txt3b { font-size: 1.3em; line-height:2.2em; } .txt4b { font-size: 1.4em; line-height:2.2em;} .boxhard { width: 80%; margin:auto; padding:1em; border: 3px solid black; border-radius: 12px; } .boxhard2 { width: 80%; margin:auto; background-color: #ead4a3; opacity: 8; padding:1em; border: 3px solid black; border-radius: 12px; } .boxhard3 { width: 80%; margin:auto; background-color: #ccd; opacity: 8; padding:1em; border: 3px solid black; border-radius: 12px; } .boxhard4 { width: 40%; padding:1em; border: 2px solid black; border-radius: 12px; } .boxsoft { width: 90%; margin:auto; padding:1em; } .boxsoft2r { width: 70%; float:right; padding:1em; } .hideme { display: none; } .showme:hover + .hideme { display: block; color: red; } /* photo classes */ .ph1l { width:15%; float:left; padding-left:5%; padding-right:5%; } .ph1r { width:15%; float:right; padding-right:5%; padding-left:5%; } .phcl { width:20%; margin: auto; text-align: center; padding: 2%; } .ph2l { width:25%; float:left; padding-left:5%; padding-right:5%; } .ph2r { width:25%; float:right; padding-right:5%; padding-left:5%; } .ph3l { width:30%; float:left; padding-left:5%; padding-right:5%; } .ph3r { width:30%; float:right; padding-right:5%; padding-left:5%; } .ph4l { width:40%; float:left; padding-left:5%; padding-right:5%; } .ph4r { width:40%; float:right; padding-right:5%; padding-left:5%; } .ph1rb { width:12%; float:right; padding: 15px; } /* HR classes */ hr.m1 { width: 50%; margin: auto; height: 1px; } hr.m2 { width: 50%; margin: auto; height:2px; } hr.m4 { width: 50%; margin: auto; height:4px; } hr.m6 { width: 50%; margin: auto; height:6px; } /* Color classes - US Flag colors - Official Old Glory Red #b22234 white #ffffff old glory blue #3c3b6e */ .ogred { background-color: #b22234; } .ogblue { background-color: #3c3b6e; } .ogwhite { background-color: #ffffff; } /* sponsor elements */ .sponsorblock { padding: 10px; /* border: 3px solid darkred;*/ z-index:1001; overflow:hidden; } .sponsorblock img { /*display:block;*/ margin:auto; width:60%; max-width:150px; } /* VSO elements */ .vsoblock { padding: 10px; /* border: 3px solid darkred;*/ z-index:1001; overflow:hidden; } .vsoblock img { /*display:block;*/ margin:auto; width:60%; max-width:150px; } #disclaimer { width: 85%; margin: auto; font-size: 0.7em; padding: 1em; background-color: #dff; } /* footer - toe and toekick links - a hamburger menu for phone and tablet screens that will expand or add more to the standard foot menu for large screens */ /* END Primary base elements */ } @media screen { /* All screen sizes */ body { background: #ddd url("montage-1.jpg") no-repeat fixed left top; } h1, h2, h3, h4, h5, h6 { font-family: Times, "Times New Roman", Cambria, "Liberation Serif", serif; padding-left: .4em; } p, li { font-family: Arial, "Liberation Sans", Calibri, sans-serif; padding-left: 1.5em; padding-right: 1.5em } /* Site or page color theme elements such as background, plain text and link colors */ article { background-color:#fff; opacity: 8; } section { background-color:#fff; opacity: 8; } /*aside { background:#3c3b6e; color:#fff; opacity: 9; } */ footer { background-color:#ead4a3; opacity: 8; } /* top elements - modifications */ /* #crown { position:fixed; top:0; left:0; right:0; z-index:999; width:100%; margin:0 auto; height:30px; background:#eef; border-bottom:3px solid #000; text-align: center; } */ #crown { position:fixed; z-index:999; width:100%; height:30px; border-bottom:3px solid #000; background: #fff; } #crown .iconmenu img { width:25px; padding: 0 3px; } #crown .textmenu img { width:20px; padding: 0 3px; font-size:.8em; } #banner { padding-top: 30px; } #banner a:link, #banner a:visited, #banner a:hover, #banner a:active { text-decoration: none; } #banner h1 { color:#2554df; } } @media screen and (max-width: 400px) { /* smallest screen */ p { padding-left: 1em; padding-right: 1em; } #topmenu { display:none; } .textmenu { display:none; } #banner { padding-top: 30px; } #logo { width:40%; } aside { padding: 8px; width: 90%; margin: auto; /* background:#b22234; color:#fff; */ opacity: 9; } /* photo classes */ .ph2l, .ph3l, .ph4l { width:30%; float:left; padding-left:5%; padding-right:5%; } .ph2r, .ph3r, .ph4r { width:30%; float:right; padding-right:5%; padding-left:5%; } .sponsorblock { width: 95%; padding: 5px; } .sponsorblock img { width: 45%; margin:auto; } .vsoblock { width: 95%; padding: 5px; } .vsoblock img { width: 45%; margin:auto; } /* END smallest screen */ } @media screen and (min-width: 400px) and (max-width: 600px) { /* medium small screens */ p { padding-left: 1.5em; padding-right: 1.5em; } #topmenu { display:none; } .textmenu { display:none; } #banner { padding-top: 30px; } #logo { width:40%; } aside { padding: 10px; width: 90%; margin: auto; /* background:#b22234; color:#fff; */ opacity: 9;} .ph2l, .ph3l, .ph4l { width:30%; float:left; padding-left:5%; padding-right:5%; } .ph2r, .ph3r, .ph4r { width:30%; float:right; padding-right:5%; padding-left:5%; } .sponsorblock { width: 95%; max-height: 400px; padding: 5px; margin:auto; overflow:hidden; } .sponsorblock img { width: 15%; margin:auto; padding:10px; } .vsoblock { width: 95%; max-height: 400px; padding: 5px; margin:auto; overflow:hidden; } .vsoblock img { width: 15%; margin:auto; padding:10px; } /* END medium small screens */ } @media screen and (min-width: 600px) and (max-width: 960px) { /* medium screens like tablets */ /* aside { padding: 8px; width:90%; margin: auto; background:#b22234; color:#fff; opacity: 9; border: 4px solid black; border-radius: 12px; } */ .sidestack aside { width:45%; margin:5px; padding:8px; border: 4px solid black; border-radius: 12px; } #crown .iconmenu { display:none; } .textmenu img { display:none; } #slogan { padding-top: 50px; } .sponsorblock { width: 95%; max-height:150px padding: 5px; margin:auto; overflow:hidden; } .sponsorblock img { width: 20%; margin:auto; padding:10px; } .vsoblock { width: 95%; max-height:150px padding: 5px; margin:auto; overflow:hidden; } .vsoblock img { width: 20%; margin:auto; padding:10px; } /*.tx2col { -webkit-columns: 100px 2; -moz-columns: 100px 2; columns: 100px 2; padding: 10px 0; } */ /* END medium screens like tablets */ } @media screen and (min-width: 960px) { /* large screens */ /* aside { padding: 8px; width:90%; margin: auto; background:#b22234; color:#fff; opacity: 9; border: 4px solid black; border-radius: 12px; } */ article { max-width: 70%; margin:auto; } .sidestack { display:block; width:70%; max-width: 740px; margin:auto; } .sidestack aside { width:50%; margin:10px; padding:8px; border: 4px solid black; border-radius: 12px; } .iconmenu { display:none; } #slogan { padding-top: 50px; } .tx2col { -webkit-columns: 100px 2; -moz-columns: 100px 2; columns: 100px 2; padding: 10px 0; } .sponsorblock { display:block; width:15% ; max-width: 120px; padding: 10px; float:left; position:fixed; left:0; margin-left:5px; top:100px; } .sponsorblock img { width: 100%; margin:auto; padding:8px; } .vsoblock { display:block; width:15% ; max-width: 120px; padding: 10px; float:right; position:fixed; right:0; margin-right:10px; top:100px; } .vsoblock img { width: 100%; margin:auto; padding:8px; } /* large screens */ } @media print { /* Print layout and exclusions */ header, .nav, section, article, footer { width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: Arial, "Liberation Sans", Calibri, sans-serif; } /* aside { display: none; } */ p, li, a { margin: 10px 10px; font-family: Times, "Times New Roman", Cambria, "Liberation Serif", serif; line-height: normal; } #crown { display: none; } #toe { display: none; } #button { display: none; } #sponsorblock { display: none; } footer { display: none; } header h1 { font-size: 24px; /*text-align: center;*/ text-decoration: none; } /* END Print and exclusions */ } /* ################## Old materials - Obsolete? ###################*/ #donate { float:right; position:fixed; top:50px; right:0; padding-right: 20px; } #ppbutton { width:196px; height:40; } #ppbutton-d { width:196px; height:40; } #imgppbutton { width:196px; height:40; } /* Subscribe Form box on Index */ .formbox { width: 300px; float left; background-color: #eee; padding:10px; /* border: 2px solid darkred; */ } form { margin: auto; text-align:right; } form input { background-color: white; } /* text mod and color theme */ .revblue { text-align:center; background:#3c3b6e; color:#fff; } .revblack { text-align:center; background:#000; color:#fff; } .revred { text-align:center; background: red; color:white; } /* #copyright { background: #b22234; height: 50px; color:#fff; text-align:center; padding: 3px 0 3px 0; border-bottom: 25px solid black; z-index:500; } */ #copyright { height: 50px; text-align:center; padding: 13px 0 3px 0; border-bottom: 20px solid black; z-index:500; } sup { color: red; } .supred { font-size: 75%; } .byline { font-size: 50%; color: gray; } #banner { width:100%; max-width: 940px; margin:auto; overflow-x:hidden; border-bottom: 3px solid #bbb; } #logo { width:20%; padding: 5px 25px 5px 15px; float: left; } #slogan { float:right; text-align:right; padding-right:10px; text-transform:uppercase; font-style: italic; font-size: 150%; font-family: Arial, "Liberation Sans", Calibri, sans-serif; } /* middle - main - article elements */ #main { width:100%; max-width: 960px; margin:auto; background: url("gfx/fadebk.png"); } #main p { text-indent: 2em; padding: 2px 10px; } /* Expando Bits */ .expando { display: none; } .expando:target { display: block; padding: 5px; } .expando:target p { /* padding: 5px 5px 5px 0; */ } .expando:target li { /* padding: 5px 5px 5px 0; */ } /* ################ */ .not2wide { max-width: 600px; margin:auto; padding 6px; } /* #################### JUNK ###########*/ /* #################### JUNK ###########*/ /* #################### JUNK ###########*/ /* #################### JUNK ###########*/ .rc { margin: auto; } #reset { background-color:red; color:white; } #save { background-color: lightgreen; } .supertext4 { text-align: center; font-size: 300%; color: #fff; background-color: darkred; }