/* PHP Variable-Driven CSS Template Created by Michael Niles at blindmikey.com */ /*---------------------------------------------------------------------- //////////// //////////// TOC //////////// -------- //////////// //////////// i. Setting up the Canvas //////////// ii. Core styling conventions //////////// //////////// 1. Header //////////// 2. Navigation //////////// 3. Content //////////// 4. Sidebars //////////// 5. Footer //////////// 6. SubFooter //////////// ----------------------------------------------------------------------*/ /*---------------------------------------------------------------------- //////////// //////////// i. Setting up the Canvas //////////// ----------------------------------------------------------------------*/ * { margin:0; padding:0; outline:none; } html, body { height: 100%; } body { background-color:#040404; background-image:url(http://hopworksbeer.com/wp-content/themes/hopworks/images/); background-repeat:repeat; background-position:left top; font-size:1em; } body.logged-in { background-position:left 45px; } #container { position:relative; min-height:100%; background-image:url(http://hopworksbeer.com/wp-content/themes/hopworks/images/); background-repeat:no-repeat; background-position:left top; font-size:1em; } img { border:0; } a { color:#E84622; } a:hover { color:#FECE1D; } h1, h1 a { color:#FECE1D; } h2, h2 a { color:#CCCCCC; } h3, h3 a { color:#CCCCCC; } h4, h4 a { color:#CCCCCC; } p, ol, ul { color:#CCCCCC; } blockquote { margin-left: 2em; margin-right: 2em; } /*---------------------------------------------------------------------- //////////// //////////// ii. Core styling conventions //////////// ----------------------------------------------------------------------*/ .hide { display:none; } .off { opacity:0.6; filter:alpha(opacity=60); } img.alignleft { margin:0px 10px 10px 0px; } img.alignright { margin:0px 0px 10px 10px; } .clear, .hr { clear:both; } .align { padding:2px 20px; } .left, .alignleft { float:left; } .right, .alignright { float:right; } .shrinkwrap { position:relative; width:958px; margin:0 auto;} #main.onecol {width:918px; margin:0 20px;} #main.onecol .page {width:918px;} #main.twocol_l {width:588px; margin:0 20px 0 30px;} #main.twocol_l .page {width:588px;} #main.twocol_r {width:588px; margin:0 30px 0 20px;} #main.twocol_r .page {width:588px;} #main.threecol {width:258px; margin:0 30px;} #main.threecol .page {width:258px;} #main.threecol_l {width:268px; margin:0 20px 0 30px;} #main.threecol_l .page {width:268px;} #main.threecol_r {width:268px; margin:0 30px 0 20px;} #main.threecol_r .page {width:268px;} /*---------------------------------------------------------------------- //////////// //////////// 1. Header //////////// ----------------------------------------------------------------------*/ #header { position:relative; font-family:Arial, Helvetica, Sans-Serif; line-height:2em; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) repeat-x left top; width:100%;} #header .shrinkwrap { height:154px; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/header_bg_2.png) no-repeat left bottom; overflow:hidden;} #header a { text-decoration:underline; } #header a:hover { text-decoration:none; } #heading { display:block; position:relative; top:30px; padding:0 20px; text-align:left; } #header .title, #header .subtitle { position:relative; height:1em; } #header .title { font-size:36px; font-weight:bold; display:none; } #header .subtitle { font-size:24px; font-weight:normal; display:none; } #header .title, #header .title a { color:#1A1A1A; text-decoration:none; } #header .subtitle, #header .subtitle a { color:#666666; text-decoration:none; } /*---------------------------------------------------------------------- //////////// //////////// 2. Navigation //////////// ----------------------------------------------------------------------*/ #nav { position:relative; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) repeat-x left top; width:100%; } #nav .shrinkwrap { height:42px; background: #AFABA3 url(http://hopworksbeer.com/wp-content/themes/hopworks/images/nav_bg.png) no-repeat left top; overflow:visible;} #nav_align { text-align:center; padding:0 20px; } #nav ul { list-style-type:none; } #nav .menu li { display: -moz-inline-stack !important; display:inline-block !important; display:inline; font-size:16px; font-family:RedOctober; z-index:10; margin:0 -2px; } #nav .menu li a { display: -moz-inline-stack; display:inline-block; color:#2C2A28; text-decoration:none; text-align:center; height:25px; padding: 9px 12px; text-decoration:none; line-height:25px; background:transparent;} #nav .menu li a:hover ,#nav .menu li.sfhover a, #nav .menu li:hover a { color:#E84622; background:#F2E4B0; } #nav .menu li.current_page_item a, #nav .menu li.current-menu-item a { color:#2C2A28; background:transparent; } /*/// Dropdown CSS ///*/ #nav .menu li.current_page_item li a, #nav .menu li.current-menu-item li a { color:#000000 !important; background:#F2E4B0 !important; } #nav .menu li.current_page_item li a:hover, #nav .menu li.current-menu-item li a:hover { color:#FFFFFF !important; background:#DF401C !important; } #nav .menu li li.current_page_item a, #nav .menu li li.current-menu-item a { color:#FFFFFF !important; background:#DF401C !important; } #nav .menu li li.current_page_item li a, #nav .menu li li.current-menu-item li a { color:#000000 !important; background:#F2E4B0 !important; } #nav .menu li ul { position:absolute; width:182px; left:-999em; z-index:100; text-align:left; margin-left:0; font-size:1em; top:42px; background:#F2E4B0; } #nav .menu ul li { float: left; clear:left; background:#F2E4B0; margin:0 !important; position:relative; } #nav .menu ul li a { min-height:15px; height:auto !important; height:15px; padding: 6px 12px; line-height:15px; color:#000000 !important; background:#F2E4B0 !important; width:158px; text-align:left; } #nav .menu ul li a:hover { background:#DF401C !important; color:#FFFFFF !important; } #nav .menu li ul ul, #nav .menu li ul ul ul { margin-top:0; padding:0; margin-left:182px; top:0; } #nav .menu li:hover ul ul, #nav .menu li:hover ul ul ul, #nav .menu li:hover ul ul ul ul, #nav .menu li.sfhover ul ul, #nav .menu li.sfhover ul ul ul, #nav .menu li.sfhover ul ul ul ul { left: -999em; } #nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li li li:hover ul, #nav .menu li li li li:hover ul, #nav .menu li.sfhover ul, #nav .menu li li.sfhover ul, #nav .menu li li li.sfhover ul, #nav .menu li li li li.sfhover ul { left: auto; } /*---------------------------------------------------------------------- //////////// //////////// 3. Content //////////// ----------------------------------------------------------------------*/ #content { position:relative; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) repeat-y center top; width:100%;} #content .shrinkwrap { background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) no-repeat center bottom; } #main { font-family:Arial, Helvetica, Sans-Serif; background:; float:left; margin:0px 30px 0 20px; position:relative; width:588px; font-size:14px; height: auto !important; } .main_wrapper { padding:20px 0 25px; float:left; } .post_snippet, .post, .page, #comments_wrapper { float:left; width:588px; position:relative; } #comment { width:588px; } .post_snippet { margin-bottom:1em; } .post_title a { color:#CCCCCC; } .post_title a:hover { color:#E84622; } .main_wrapper h1, .main_wrapper h2, .main_wrapper h3, .main_wrapper h4 { padding:0 0 .2em; font-family:custom; } .main_wrapper h1 { font-size:32px; } .main_wrapper h2 { font-size:24px; } .main_wrapper h3 { font-size:19px; } .main_wrapper h4 { font-size:16px; } .main_wrapper h1 a, .main_wrapper h2 a, .main_wrapper h3 a, .main_wrapper h4 a { text-decoration:none; } .main_wrapper ul, .main_wrapper ol { margin-left:25px; } .main_wrapper p, .main_wrapper ul, .main_wrapper ol { padding-bottom:1em; line-height:1.5em; } .main_wrapper a { text-decoration:none; } .main_wrapper a:hover { text-decoration:underline; } .author, .timeStamp { position:relative; top:-8px; font-size:0.75em; } .author { color:#666666; } .timeStamp { color:#666666; } .readMore { display:block; margin-top:1em; } .textwidget { } #searchform { position:relative; } ol.wp-paginate {padding:1em 0; margin:0; } .wp-paginate li {display:inline; list-style:none;} .wp-paginate a {background:#ddd; border:1px solid #ccc; color:#666; margin-right:4px; padding:3px 6px; text-align:center; text-decoration:none;} .wp-paginate a:hover, .wp-paginate a:active {background:#ccc; color:#888;} .wp-paginate .title {color:#555; margin-right:4px;} .wp-paginate .gap {color:#999; margin-right:4px;} .wp-paginate .current {color:#fff; background:#E84622; border:1px solid #E84622; margin-right:4px; padding:3px 6px;} .wp-paginate .page_item span { } .wp-paginate .prev, .wp-paginate .next {} .wp-paginate li span, .wp-paginate li a { width:auto; float:none; } /*---------------------------------------------------------------------- //////////// //////////// 4. Right Sidebar //////////// ----------------------------------------------------------------------*/ .sidebar { font-family:Arial, Helvetica, Sans-Serif; position:relative; } .sidebar_wrapper { margin:20px 20px 10px 30px ; } .sidebar ul { list-style-type:none; } .sidebar form, .sidebar .textwidget, .sideitem { padding:0 0 0.5em 0; } .sidetitle { font-size:20px; color:#CCCCCC; font-weight:bold; padding:0 0 0.5em 0; display:block; } .sidebar p { color:#CCCCCC; font-size:13px; margin-bottom:1em; } .sidebar p a { color:#E84622; text-decoration:none; } .sidebar p a:hover { color:#FECE1D; text-decoration:none; } .sidebar ul li { line-height:1em; color:#CCCCCC; } .sidebar ul ul li, .sidebar .textwidget { padding:0 10px .5em; font-weight:normal; font-size:13px; margin-bottom:0; } .sidebar ul ul li a { display:block; color:#E84622; text-decoration:none;} .sidebar ul ul li a:hover { color:#FECE1D; text-decoration:none;} .sidebar ul ul ul { padding-top:1em; } .sidebar.left { background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/l-sidebar_bg.png) repeat-y right top; float:left; width:320px; } .sidebar.right { background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/r-sidebar_bg.png) repeat-y left top; float:left; width:320px; } /*---------------------------------------------------------------------- //////////// //////////// 5. Footer //////////// ----------------------------------------------------------------------*/ #footer { font-family:Arial, Helvetica, Sans-Serif; position:relative; clear:both; text-align:left; line-height:1.3em; font-size:12px; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) repeat-x left top; width:100%;} #footer .shrinkwrap { background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) no-repeat center top; height:60px; } #footing { display:block; position:relative; top:4px; padding:0 20px; } #footer p, #footer .textwidget { display:block; position:relative; color:#CCCCCC; } #footer a { color:#E84622; text-decoration:underline; } #footer a:hover { color:#FECE1D; text-decoration:none; } #footer ul, #footer p, #footer .textwidget { list-style-type:none; padding-bottom:1em; } #footer ul li { display:inline; padding:0 10px 0 0;position:relative; } /*---------------------------------------------------------------------- //////////// //////////// 6. SubFooter //////////// ----------------------------------------------------------------------*/ #subfooter { font-family:Arial, Helvetica, Sans-Serif; position:relative; clear:both; text-align:center; line-height:1.3em; font-size:12px; background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) repeat-x left top; width:100%;} #subfooter .shrinkwrap { background: transparent url(http://hopworksbeer.com/wp-content/themes/hopworks/images/) no-repeat left top; height:30px; } #subfooting { display:block; position:relative; top:4px; padding:0 20px; } #subfooter p, #subfooter .textwidget { display:block; position:relative; color:#1A1A1A; } #subfooter a { color:#666666; text-decoration:underline; } #subfooter a:hover { color:#1A1A1A; text-decoration:none; } #subfooter ul, #subfooter p, #subfooter .textwidget { list-style-type:none; padding-bottom:1em; } #subfooter ul li { display:inline; padding:0 5px;position:relative; }