@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; } 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; } */ article { display: block; width:100%; margin:0; padding:0; border:0; } 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:nth-child(odd) { background: #b22234; color: white; } aside:nth-child(even) { background: #fff; color:black; } aside:nth-child(odd) a { background: #fff; } .sidestack { display:block; width:100%; max-width: 940px; margin:auto; } .sidestack ol li { padding-top: 15px; } .sidestripe { display:block; width:100%; max-width: 940px; margin:auto; border: 4px solid black; border-radius: 12px; } /* .sidestripe aside { width:100%; max-width: 940px; margin:auto; } */ footer { display: block; width:100%; margin:0; padding:0; border:0; } article li:nth-child(even) { background: #ccc; color: black; } article li:nth-child(odd) { background: #fff; color:black; } /* CLASSES general layout and format standard */ .fdbk { background: url("gfx/fadebk-80.png") left top; } .shadebk { background-color: white; opacity: 0.9; } .hardbk { background-color: white; opacity: 1; } .redbk { background-color: #DC143C; opacity: 1; color: white; } .graybk { background-color: gray; opacity: 8; } .parchbk { background-color:#fee8b7; opacity: 8; } .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; } .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; } /* 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; } } @media screen { body { background: #f0f0f0 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: 1em; padding-right: 1.5em } /* Site or page color theme elements such as background, plain text and link colors */ /*article { background-color:#ead4a3; opacity: 8; } */ /*section { background-color:#ead4a3; opacity: 8; }*/ /*aside { background:#3c3b6e; color:#fff; opacity: 9; }*/ footer { background-color:#ead4a3; opacity: 8; } /* top elements mod */ /* #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 h1 { color: 004ea8; } #banner { padding-top: 30px; } } @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:50%; float:left; padding-left:5%; padding-right:5%; } .ph2r, .ph3r, .ph4r { width:50%; 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; } } @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:40%; float:left; padding-left:5%; padding-right:5%; } .ph2r, .ph3r, .ph4r { width:40%; 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; } } @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; } */ } @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; } } @media print { 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; } } /* ################## Old materials ###################*/ #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; }