/* CSS Document Experimental responsive layout - clean version Original guy.css remains untouched. */ /* -------------------------------------------------- */ /* BASIC ELEMENTS */ /* -------------------------------------------------- */ h1 { font-size: 120%; margin: 0px; } h2 { font-size: 110%; text-align: center; margin: 0px; } h3 { font-size: 105%; text-align: center; margin: 0px; } h4 { font-size: 96%; margin: 0px; } h5 { font-size: 87%; margin: 0px; } h6 { font-size: 78%; margin: 0px; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #4682B4; } a.link:link { color: #FFFFFF; } a.link:visited { color: #FFFFFF; } a.link:hover { color: #4682B4; } a img { border-width: 0; } hr { width: 450px; height: 1px; } p { text-align: center; } /* -------------------------------------------------- */ /* PAGE */ /* -------------------------------------------------- */ .body { background-color: #FFDAB9; margin: 6px 6px 20px 6px; } /* -------------------------------------------------- */ /* LOGO */ /* -------------------------------------------------- */ .guylogo { width: 100%; height: 160px; box-sizing: border-box; background: #FFDAB9 url(anotherlogo1.jpg) no-repeat top left; background-size: 100% auto;  text-align: center; font-size: 34px; padding: 20px; color: #FFFFFF; border-radius: 25px 25px 0 0;  } /* -------------------------------------------------- */ /* TOP NAVIGATION */ /* -------------------------------------------------- */ .guynavigation { width: 640px; height: 23px; margin: -43px auto 20px auto; padding-top: 3px; box-sizing: border-box; text-align: center; font-size: 14px; font-family: Arial; color: #FFFFFF; } .guynavigation2 { background-color: #FF9900; padding: 5px; text-align: center; font-size: 13px; font-family: "Arial"; color: #FFFFFF; margin: 5px; } /* -------------------------------------------------- */ /* MAIN PAGE AREA */ /* -------------------------------------------------- */ .guycontent { margin-left:150px; width:calc(100% - 150px); box-sizing:border-box; padding-left:10px; padding-right:5px; background-color:#FFFEF0; font-family:"Arial"; }   .guysidebar { width:150px; box-sizing:border-box; float:left; font-size:11px; background-color:#F88158; padding-right:4px; padding-left:3px; font-family:"Arial"; }   .guycontent2 { width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 5px; background-color: #FFFEF0; font-family: "Arial"; } .guysidebar2 { width: 150px; box-sizing: border-box; float: left; font-size: 11px; background: url() repeat; background-color: #FFDAB9; padding-right: 0px; padding-left: 0px; font-family: "Arial"; } .blogsidebar { width: 145px; color: white; font-size: 11px; } .guymenu { width: 130px; text-align: center; padding-bottom: 10px; } .guysidetitle { color: #FFFFFF; font-weight: bold; text-align: center; } /* -------------------------------------------------- */ /* PAGE TITLE / COVER */ /* -------------------------------------------------- */ .guytitle { text-align: center; height: 50px; } .guycover { padding: 5px; background-color: #F2F2F2; margin: 15px; } /* -------------------------------------------------- */ /* HOMEPAGE / CASINO CONTENT */ /* -------------------------------------------------- */ .guycasinocontent { width: calc(100% - 150px - 123px); box-sizing: border-box; background-color: #FFFEF0; padding-left: 10px; padding-right: 5px; font-family: "Arial"; float: left;    .guycasinocontent3 { width: calc(100% - 150px - 123px); box-sizing: border-box; background-color: #FFFEF0; padding-left: 10px; padding-right: 5px; font-family: "Arial"; margin-left: 150px; } .guycasinoright { width: 123px; box-sizing: border-box; float: right; font-size: 11px; } .guycasinoright2 { width: 123px; box-sizing: border-box; float: right; font-size: 11px; background: url() repeat; background-color: #F88158; padding-right: 4px; padding-left: 3px; font-family: "Arial"; } .guycasinoright3 { width: 123px; box-sizing: border-box; float: right; font-size: 11px; background: url() repeat; background-color: #F88158; padding-right: 4px; padding-left: 3px; font-family: "Arial"; } /* -------------------------------------------------- */ /* HEADLINES */ /* -------------------------------------------------- */ .guyheadlines { border: 1px dotted #ccc; width: 146px; text-align: center; padding: 5px; } /* -------------------------------------------------- */ /* SITE CONTENT / BOXES */ /* -------------------------------------------------- */ .guysite { position: relative; width: 740px; height: 100%; background: #FFFEF0; padding: 25px; } .guyboxes { background-color: #FFFFFF; border: thin solid #000000; width: 90%; text-align: left; padding: 5px; } .guyboxes2 { background-color: #FFFFFF; border: thin solid #000000; padding: 5px; margin: auto; width: 70%; } .guyboxes3 { background-color: #FFFEF0; font-family: "Arial"; border: thin solid #000000; width: 120px; } /* -------------------------------------------------- */ /* MENU ITEMS */ /* -------------------------------------------------- */ .menuface { display: block; text-decoration: none; width: 147px; height: 27px; color: #000000; border-bottom: #FFDAB9 solid 1px; padding-top: 15px; } /* -------------------------------------------------- */ /* LEFT HAND TABLE CSS */ /* -------------------------------------------------- */ ul.d2 { margin: 0; padding: 0; list-style: none; width: 130px; border-bottom: 0px solid #FFDAB9; text-align: center; font-family: "Arial"; } ul.d2 li.d2 { position: relative; } li.d2 ul.d2 { position: absolute; left: 146px; top: 0; display: none; font-family: "Arial"; } ul.d2 li.d2 a { display: block; text-decoration: none; background: #FF9900; padding: 12px; border: 1px solid #FFDAB9; border-bottom: 0; width: 130px; } li.d2:hover ul, li.over ul { display: block; } /* -------------------------------------------------- */ /* RIGHT HAND TABLE CSS */ /* -------------------------------------------------- */ ul.d1 { margin: 0; padding: 0; list-style: none; width: 130px; border-bottom: 0px solid #FFDAB9; text-align: center; font-family: "Arial"; } ul.d1 li.d1 { position: relative; } li.d1 ul.d1 { position: absolute; right: 154px; top: 0; display: none; font-family: "Arial"; } ul.d1 li.d1 a { display: block; text-decoration: none; background: #FF9900; padding: 12px; border: 1px solid #FFDAB9; border-bottom: 0; width: 130px; } li.d1:hover ul, li.over ul { display: block; } .menuface2 { display: block; text-decoration: none; width: 146px; height: 27px; color: #000000; border-bottom: #FFDAB9 solid 1px; padding-top: 15px; } /* -------------------------------------------------- */ /* BLOG */ /* -------------------------------------------------- */ .guyblog { display: block; text-decoration: none; background: #FFFEF0; border-top: 1px solid #ccc; width: 100%; } .guyblogcomment { display: block; text-decoration: none; background: #FFFEF0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 100%; } .comment-body { text-align: left; } /* -------------------------------------------------- */ /* OLD IE RULES */ /* -------------------------------------------------- */ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* -------------------------------------------------- */ /* NARROW SCREEN SAFETY */ /* -------------------------------------------------- */ @media screen and (max-width: 800px) { .guynavigation { width: 90%; font-size: 13px; } }