/*---------------------------------------------------+ | YOLKFOLK.COM :: Stylesheet :: site.css +----------------------------------------------------+ | Copyright (C)2010 Peter Teal | http://www.yolkfolk.com +----------------------------------------------------+ | */ /* ===== YOLKFOLK.com :: SITE.CSS ===== */ /* Site Header */ div#header { height:200px; width:960px; position:relative; } div#header H1 { text-indent: -10000em; } div#header DIV { left:4px; top:4px; } div#header A { display: block; height:200px; width:960px; } /* Site Footer */ div#footer { height:120px; width:928px; background:url(http://www.yolkfolk.com/goodegg/footer.png); position: relative; margin:0; height:86px; padding:16px;} div#footer .img { float:left; width:135px; } div#footer .img A { display:block; width:145px; height:0px; padding-top:70px; text-indent: -10000em; } div#pageFooter { height: 62px; margin-top:75px;background-color: red; background:url(/media/images/layout/floorfoot.gif) repeat-x; width:100%;} /* siteContentWrapper */ div#siteContentWrapper { width:992px; } div#siteContentWrapper #siteMenu { width:220px; float:left; } div#siteContentWrapper #siteContent { width:756px; float:left; margin-left: 16px; } /* Paypal Donate Button */ div#menuDonate { width: 92px; height:30px; padding:0; margin:0; padding:0 0 4px 10px;} div#menuDonate INPUT { width: auto; height: auto; } /* Facebook Share Button */ .facebook_share { position:absolute; width:160px; height: 20px; z-index:1; left:23px; top: 573px; } #grass { position: absolute; width: 588px; height: 21px; z-index: 0; left: 0px; top: 712px; background-image:url(/media/images/layout/grass.gif); } /* ===== Content Panel ===== */ .content-panel { background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; margin:16px; margin-top:6px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; clear:both; } .content-panel .header { padding:10px; border-bottom: 3px solid black; } .content-panel .subheader { font-size:0.9em; text-align:left; color: gray; padding:8px; border-bottom:2px dashed black; background-color:#FEFCF5;} .content-panel .subfooter { font-size:0.9em; text-align:left; color: gray; padding:8px; border-top:2px dashed black; background-color:#FEFCF5;} .content-panel .subheader .twitter { float: right; } .content-panel .subheader .googleplusone { float: right; } .content-panel .subheader .facebook { float:left; margin-left:8px; width:350px; } .content-panel .subheader .newsimage { border:2px solid black; float:left; } .content-panel .subheader .contentindent { float:left; margin-left:8px; color:#000; font-size:16px; width:400px; } .content-panel .header H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; text-shadow: 2px 2px 2px #999; } .content-panel .header H2 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; text-shadow: 2px 2px 2px #999; } .content-panel .header H2 A:hover { color:red; text-decoration: none; text-shadow: 2px 2px 2px black;} .content-panel .header H3 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; text-shadow: 2px 2px 2px #999; } .content-panel .header H3 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; text-shadow: 2px 2px 2px #999; } .content-panel .header H3 A:hover { color:red; text-decoration: none; text-shadow: 2px 2px 2px black;} .content-panel .contents { background-color:#FEFCF5; background-repeat:repeat-x; padding:10px 10px 0px 10px; min-height:60px; clear:both; } .content-panel .contents H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; } .content-panel .contents H2 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; } .content-panel .contents H2 A:hover { color:blue; text-decoration: none; } .content-panel .contents H3 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; } .content-panel .contents H3 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; } .content-panel .contents H3 A:hover { color:blue; text-decoration: none;} .content-panel .contents H4 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:14px; } .content-panel .contents H4 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:14px; } .content-panel .contents H4 A:hover { color:blue; text-decoration: none;} .content-panel .contents P { margin-bottom:16px;} .content-panel .contents FORM { background: #FEFCF5; } .content-panel UL { margin-left: 32px; } .content-panel .footer { height:10px; clear:both;} .content-panel HR { border: 1px dashed black; } .content-panel blockquote { padding: 16px; border:3px dashed red; margin:0px 32px; background:#FFFF00; font-style: italic; /* fallback */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), #FFFF00; /* Safari 4-5, Chrome 1-9 */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFF00), to(#FFCC00)); /* Safari 5.1, Chrome 10+ */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), -webkit-linear-gradient(top, #FFFF00, #FFCC00); /* Firefox 3.6+ */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), -moz-linear-gradient(top, #FFFF00, #FFCC00); /* IE 10 */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), -ms-linear-gradient(top, #FFFF00, #FFCC00); /* Opera 11.10+ */ background: url(/media/images/layout/quote1.png), url(/media/images/layout/quote2.png), -o-linear-gradient(top, #FFFF00, #FFCC00); background-position: left top, bottom right; background-repeat: no-repeat; } .content-panel-noheader { background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; margin:16px; margin-top:6px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; clear:both; } /* news index */ .newsindex { margin-bottom: 16px;} .newsindexImage IMG { width:100px; height:100px; border: 2px solid black; } .newsindexRight { float:right; text-align: left; width:540px;} .newsindexTitle A { font-family:'Aclonica', Verdana; margin-bottom:.5em; font-size:16px; } .newsindexTitle A:hover { color:blue; } .newsindexInfo { font-size: 14px; margin-bottom: 0px; } .newsindexSnippit {} .clear { clear:both; } /* Games Panels */ #GamesLeftPanel { margin-left:16px; float:left; width:348px;} #GamesRightPanel { margin-right:16px; float:right; width:326px; } .gamesPanelLeft { background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; margin-bottom:10px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; clear:both; } .gamesPanelLeft .header { padding:10px; border-bottom: 3px solid black; } .gamesPanelLeft .header H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; } .gamesPanelLeft .contents { background-color:#FEFCF5; background-repeat:repeat-x; padding:10px 10px 0px 10px; min-height:70px; } .gamesPanelLeft .contents H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; } .gamesPanelLeft .contents H2 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; } .gamesPanelLeft .contents H2 A:hover { color:blue; text-decoration: none; } .gamesPanelLeft .contents H3 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:16px; } .gamesPanelLeft .contents H3 A { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:16px; } .gamesPanelLeft .contents H3 A:hover { color:blue; text-decoration: none;} .gamesPanelLeft .footer { height:10px; } .gamesPanelLeft HR { border: 1px dashed black; } .GamesPanelInfo { background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; clear:both; margin-bottom:10px; } .GamesPanelInfo .header-first { font-size:1.1em; font-weight: bold; padding:10px; padding-bottom:5px; padding-top:5px; border-bottom: 2px dashed black;} .GamesPanelInfo .header { font-size:1.1em; font-weight: bold; padding:10px; padding-bottom:5px; padding-top:5px; border-bottom: 2px dashed black; background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; } .GamesPanelInfo .header-first H3 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; margin-bottom:0px; } .GamesPanelInfo .header H3 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:18px; margin-bottom:0px; } .GamesPanelInfo .info { padding:10px; padding-bottom:5px; padding-top:5px; border-bottom: 2px solid black; background-color:#FEFCF5;} .GamesPanelInfo .info-last { padding:10px; padding-bottom:5px; padding-top:5px; } .GamesPanelRight { background-image:url(/media/images/layout/infoback.gif);background-repeat:repeat-x; text-align:left; background-color:#FEFCF5; color:#000000; border:2px solid black; vertical-align:top; padding:10px; margin-bottom:10px; } #GamesPanelRightScreen { text-align:left; background-color:#FEFCF5; color:#000000; border:3px solid black; vertical-align:top; width:320px; height:240px; margin-bottom:10px;} #GamesPanelRightScreen .screen { width: 320px; height: 240px; } #GamesPanelTop { background-image:url(/media/images/layout/infoback.gif); background-repeat:repeat-x; text-align:left; background-color:#FEFCF5; color:#000000; border:2px solid black; vertical-align:top; padding:10px; margin-left:10px; margin-right:10px; margin-bottom:10px; } #GamesPanelBottom { background-image:url(/media/images/layout/infoback.gif); background-repeat:repeat-x; text-align:left; background-color:#FEFCF5; color:#000000; border:2px solid black; vertical-align:top; padding:10px; margin-left:10px; margin-right:10px; clear:both; } /* Download Box */ .downloadbox { margin-bottom:10px; } .downloadbox TABLE TR TD { font-size: 0.8em; color: #000000; } .downloadbox-inner { position:relative; margin:auto; } .downloadbox-left { width: 165px; } .downloadbox-right { float: right; width:35px; padding-top:0px;} /* Games Index */ .game_preview_box { background-color:#FEFCF5; background-repeat:repeat-x; padding:10px 10px 0px 10px; } .game_preview_box .screenshoot { width:320px; height:240px; border:1px solid black; } .game_preview_box .screenshoot .screenshoot { width:320px; height:240px; } .game_preview_box .infobox { width:340px; } /* Games Gallery */ .gallerynav { text-align:center; margin-top:30px; font-size:120%; } .gallerynav .box { border:1px solid black; color:#000000; background-color:#C0C0C0; padding:4px; margin:4px; font-size:120%; } .gallerynav .box:hover { border:1px solid black; color:#000000; background-color:yellow; padding:4px; margin:4px; font-size:120%; } /* Site Index */ #SiteIndexContTopLeft { float:left; margin-left:10px; width:320px; } #SiteIndexContTopRight { float:right; margin-right:10px; width:370px; } #SiteIndexEditorial { clear:both; background-image:url(/media/images/layout/infoback.gif); background-repeat:repeat-x; text-align:left; background-color:#FEFCF5; color:#000000; border:2px solid black; vertical-align:top; padding:10px; margin-bottom:10px; width:480px; margin-left:10px; } .SiteIndexEditorial { background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; margin-bottom:10px; width:480px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; clear:both; margin-left:10px; } .SiteIndexEditorial .header { padding:10px; border-bottom: 3px solid black; } .SiteIndexEditorial .header H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; text-shadow: 2px 2px 2px #999; } .SiteIndexEditorial .contents { background-color:#FEFCF5; background-repeat:repeat-x; padding:10px 10px 0px 10px; } .SiteIndexEditorial .footer { height:10px; } .SiteIndexBox { background-image:url(/media/images/layout/contentheader.png); background-repeat:repeat-x; background-color:#FEFCF5; text-align:left; color:#000000; border:3px solid black; vertical-align:top; margin-bottom:10px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .SiteIndexBox .header { padding:10px; border-bottom: 3px solid black; } .SiteIndexBox .header H2 { font-family:'Aclonica', Verdana; margin-bottom:0em; font-size:22px; text-shadow: 2px 2px 2px #999; } .SiteIndexBox .contents { background-color:#FEFCF5; background-repeat:repeat-x; padding:10px 10px 0px 10px; } /* Site Index Images */ .forumLink { width:320px; height:240px; border: 3px solid black; overflow: hidden; float:right; margin-left: 8px; -o-moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background:url(/media/images/layout/forums.png); } .forumLink a { display: block; width:320px; height:240px; } .addthisToolbar { float: right; margin-bottom:10px; } .error { border:1px solid black; background-color:red; color:yellow; margin:5px; padding:10px; } .form_error { margin-left:120px; border:1px solid maroon; background-color:red; color:white; font-size: 1.0em; font-weight: bold; padding:5px; width:392px; } /* ===== Ratings ===== */ #rating { } .unit-rating { list-style:none; margin: 0px; padding:0px; height: 21px; position: relative; background: url('/media/images/base_images/poll.gif') top left repeat-x; } .unit-rating li { text-indent: -90000px; padding: 0px; margin: 0px; float: left; } .unit-rating li a { outline: none; display: block; width: 17px; height: 21px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0px; } .unit-rating li a:hover { background: url('/media/images/base_images/poll.gif') left center; z-index: 2; left: 0px; } .unit-rating a.r1-unit { left: 0px; } .unit-rating a.r1-unit:hover { width:21px; } .unit-rating a.r2-unit { left:21px; } .unit-rating a.r2-unit:hover { width: 42px; } .unit-rating a.r3-unit { left: 42px; } .unit-rating a.r3-unit:hover { width: 63px; } .unit-rating a.r4-unit { left: 63px; } .unit-rating a.r4-unit:hover { width: 84px; } .unit-rating a.r5-unit { left: 84px; } .unit-rating a.r5-unit:hover { width: 105px; } .unit-rating li.current-rating { background: url('/media/images/base_images/poll.gif') left bottom; position: absolute; height: 21px; display: block; text-indent: -9000px; z-index: 1; } /* Pagination */ ul.pagination { margin:0px; padding:0px; height:100%; overflow:hidden; font:12px 'Tahoma'; list-style-type:none; } ul.pagination li.details { padding:7px 10px 7px 10px; font-size:12px; } ul.pagination li.dot { padding: 3px 0; } ul.pagination li { float:left; margin:0px; padding:0px; margin-left:5px; } ul.pagination li:first-child { margin-left:0px; } ul.pagination li a { color:black; display:block; text-decoration:none; padding:7px 10px 7px 10px; } ul.pagination li a img { border:none; } ul.pagination li.details { color:#202020; } ul.pagination li a { border:solid 1px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:6px 9px 6px 9px; } ul.pagination li { padding-bottom:1px; } ul.pagination li a:hover, ul.pagination li a.current { color:#FFFFFF; box-shadow:0px 1px #EDEDED; -moz-box-shadow:0px 1px #EDEDED; -webkit-box-shadow:0px 1px #EDEDED; text-shadow:0px 1px #3C3C3C; border-color:#202020; background:#525252; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252); background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)); } ul.pagination li a { color:#444444; border-color:#BEBEBE; background:#FAFAFA; } .woodenBox { border:16px; -moz-border-image:url("/media/images/layout/css-border.png") 16 16 round; /* Firefox */ -webkit-border-image:url("/media/images/layout/css-border.png") 16 16 round; /* Safari and Chrome */ -o-border-image:url("/media/images/layout/css-border.png") 16 16 round; /* Opera */ border-image:url("/media/images/layout/css-border.png") 16 16 round; margin-bottom:8px; } /* search form */ .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchfield2 { background: #fff; padding: 6px 6px 6px 8px; width: 110px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } /* Tabs */ .tabs { background:silver; overflow:hidden; width:100%; display:inline; float:left; } .tabs ul { list-style:none; margin:0; padding:0; text-align:center; float:left; } .tabs ul li { display:block; list-style:none; margin:0; padding:0; display:inline; float:left; } .tabs ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } .tabs ul li a:hover { background:#369; color:#fff; } .tabs ul li a.active, .tabs ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } /* Forms */ LABEL { width: 170px; float: left; text-align: right; margin-right: 0.5em; display: block} .longText { width: 470px; } .shortText { width: 270px; } .submit { margin: 16px 8px; float:right; } .create { margin: 5px 8px; float:right; } .htmlTextArea { font-family:'Courier New', monospace;font-size:12pt;line-height:125%;width:100%; height:100px;} /* Admin Tables */ .adminTable TR { padding:6px 0px; } .adminTable TR:hover { background: yellow;} .adminTable THEAD { background: silver;} .adminTable THEAD TR TH { padding:8px; } .adminTable TBODY TR TD { padding:4px 8px; } .adminTable .icons { vertical-align:top; text-align:center; white-space:nowrap; } #backgroundContainer { width: 100%; overflow: hidden; position: absolute; top: 0px; z-index: -1; } #background-cloud1 { background-image: url(/media/images/backgrounds/sitebg/clouds-1.gif); background-repeat: repeat; width: 60000px; position: relative; top: 0px; left: 0; z-index:-2; } #background-cloud2 { background-image: url(/media/images/backgrounds/sitebg/clouds-2.gif); background-repeat: repeat; width: 35000px; position: absolute; top: 0px; left: 0; z-index:-3; } #background-cloud3 { background-image: url(/media/images/backgrounds/sitebg/clouds-3.gif); background-repeat: repeat; width: 60000px; position: absolute; top: 0px; left: 0 } #background-heaven { background-image: url(/media/images/backgrounds/sitebg/heaven.png); background-repeat: repeat; width: 60000px; position: absolute; top: 140px; height:102px; left: 0 } div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;} div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;} div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; } div.tagsinput div { display:block; float: left; } .tags_clear { clear: both; width: 100%; height: 0px; } .not_valid {background: #FBD8DB !important; color: #90111A !important;}