/* Theme Name: PRiNZ BranfordMagazine Theme URI: http://www.der-prinz.com/2008/01/20/wordpress-magazine-style-theme-branfordmagazine/ Description: A premium magazine-style layout for Wordpress with multiple functionalities inspired by the great themes of Brian Gardner and Darren Hoyt Version: 2.51 (released 2008-04-20) Author: Michael Oeser Author URI: http://www.der-prinz.com The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php Credits ======= Thanks to Darren Hoyt and his "Mimbo" theme which has been a great inspiration and a good source for lots of the code I used for this theme especially the intensive use of custom fields. Thanks to Brian Gardner and "Revolution" which inspired me to put the two additional page layouts "Featured Page" and "3-Column-Page" into the theme. Thanks to Patrick Griffiths who delivered the script for the dropdown menues. http://www.htmldog.com/articles/suckerfish/dropdowns/ I�d also like to thank Klaus Hartl (stilbuero.de) for the brilliant script I used for the tabbed section with the fade effect. And last but not least my very special thanks go out to all of you out there using the theme and sending me tons of emails telling me how great this theme is. THANK YOU ALL!!! /****************************************** * HTML Elements ******************************************/ * { margin:0; padding:0;} body,html {min-height:100%;} body { background: #f6ebd9; color: #333; padding: 0px 0 5px 0; } body, select, input, textarea { font: 12px Arial, Verdana, Sans-Serif; line-height:1.5em; } p { margin: 15px 0; } a:link, a:visited { color: #333; text-decoration:underline} a:hover, a:active { color:#333; text-decoration:none; } hr { display: block; height:1px; background:#333; border:0; } small { font-size: 0.9em; padding:3px 6px; } small.sub {padding: 0px; color:#888888;} small.sub span {color: #990000; font-weight: bold;} small.sub span.date {color: #000000; font-weight: normal;} /****** Images ****************************/ img, a:link img, a:visited img{border:none; padding:1px;} img.left,img.center,img.right,img.norm{ margin:5px 12px 5px 0; border:1px solid #999; padding:1px;} img.left{ float:left; margin:0 12px 5px 0; } img.center{ display:block; margin:0 auto 5px auto; } img.right{ float:right; margin:0 0 5px 12px; } img align left{ float:left; margin:0 12px 5px 0; } /****************************************** * General Structure ******************************************/ #page { width:845px; margin:0 auto; font-size:1em; background: #FFFFFF; padding: 0px;} .wrapper {padding: 15px 23px; background: #fcf5ed;} #headerlist {height:170px; position:relative; width:845px; cursor: pointer;} .head_lang { color:#FFFFFF; font-size:11px; font-weight:bold; line-height:16px; padding-top:4px; margin-right: 5px;} div.head_lang a { color:#FFFFFF; font-size:11px; line-height:5px; text-decoration: none;} div.head_lang a:hover {color: #CCCCCC; text-decoration: none;} div.head_lang img { vertical-align:middle; border:none;} .left { float:left; } .right { float:right; margin-right: 5px;} #sidebar, #sidebar2 { width: 194px; float:right; margin-bottom:7px;} /* #leftcol { width:287px; border-right:1px solid #b6b6b6; padding-right:18px; }*/ /* #leftcol, #rightcol { margin-top:10px; float:left }*/ /* #rightcol { width:277px; padding-left:18px; margin-top: -2px; text-align:justify; }*/ /****************************************** * Main or page navigation styles ******************************************/ /*Main Navbar */ #navwrapper { background: url(../images/backgrounds/bg_nav.gif) no-repeat #301c1c;} #nav { font-size:11px; font-family:"Trebuchet MS",Helvetica,Jamrul,sans-serif; padding: 0 0 0 25px; border-left:none; border-right:none; } #nav, #nav ul { list-style:none; line-height:14px; width: 750px;} #nav a, #nav a:hover { display: block; text-decoration: none; border:none; color: #663333;} #nav li { float: left; list-style:none; border-right:1px solid #703c3c; } #nav a, #nav a:visited { display:block; color: #FFFFFF; padding:6px 17px;} #nav .current_page_item a, #nav .current_page_item a:visited , #nav .current_page_item a:hover{ color: #663333; background:#f1dbd0;} #nav .current_page_ancestor a, #nav .current_page_ancestor a:visited, #nav .current_page_ancestor a:hover {background:#F1DBD0; color: #663333;} #nav .current_page_ancestor li a, #nav .current_page_ancestor li a:visited {background:#ffffff; color: #663333; } #nav .current_page_ancestor li a:hover {background:#550F18; text-decoration:none; color:#FFFFFF;} #nav .current_page_ancestor li.current_page_item a, #nav .current_page_ancestor li.current_page_item a:visited, #nav .current_page_ancestor li.current_page_item a:hover {background:#F1DBD0; color: #663333;} #nav a:hover, #nav a:active { background:#550F18; text-decoration:none; color:#FFFFFF; } /* Dropdown Menus for child pages */ #nav li ul { position: absolute; z-index: 10; left: -999em; height: auto; width: 202px; border-bottom: 1px solid #f2e4d0; background:#fff; margin-top: 0px; margin-left: -1px; } #nav li ul ul { margin: -2em 0 0 172px; background:#fff; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li li { width: 200px; border-right: 1px solid #f2e4d0; border-left: 1px solid #f2e4d0; background:#fff; color:#663333; } #nav li li a, #nav li li a:visited { font-weight:normal; font-size:1em; color:#663333; display:block; width:166px; height: 100%; } #nav li li a:hover, #nav li li a:active {background:#550F18; color:#FFFFFF;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;} a.main:hover {background:none;} /****************************************** * Sidebar ******************************************/ .subnav li { list-style:none; } .subnav li a:link, .subnav li a:visited { background: #fff; display:block; padding:4px 4px 4px 20px; border-bottom: 1px solid #999; } .subnav li a:hover, .subnav li a:active { background: #F4F4EC; text-decoration:none; } #sidelist{padding-top: 28px;} #sidelist li { list-style:none; } .bullets li { margin:0 0 5px 15px; list-style:square; } #sidelist .bullets li { list-style:square; margin-bottom:5px; margin-left:22px; } #sidelist .children { background:#F4F4EC; } #sidelist .children li { background: #F4F4EC; list-style: none; margin-left:15px; padding-left:15px; border-bottom:1px solid #fff; } #sidelist .children li a, #sidelist .children li a:visited { padding:2px 2px 2px 0px; border:0; background:#F4F4EC; color: #666; } #sidelist .children li a:hover, #sidelist .children li a:active {color:#000;} #sidelist .feed li{ margin-bottom:5px; padding-left:20px; background:url(images/rss.gif) no-repeat; } /****************************************** * Headlines ******************************************/ .blogtitle, .blogtitle a { color: #000; font-size: 1.8em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: regular; padding: 20px 0px 10px 0px; } h1 { color: #840000; font-size: 1.8em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; margin: 0px 10px 0px 0px; padding: 20px 0px 0px 10px;} h2 { color: #840000; font: 1.8em Georgia, "Times New Roman", Times, serif; padding-bottom:8px; border-bottom:1px solid #666; margin: 20px 0; } h3 { font: 14px "Trebuchet MS",Helvetica,Jamrul,sans-serif; color: #663333; text-transform: none; letter-spacing: normal; margin-bottom:2px; font-weight:bold;} .post h2{ margin-bottom: 15px; margin-top: 15px;} #sidebar h2, #sidebar h3 a { font: 0.9em Arial, Helvetica, sans-serif; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:4px; font-weight:bold; color:#840000; } #sidebar h3, #sidebar h2 { font-size:0.9em; padding:5px 0px; margin:15px 0px 0px; color:#333; } h3#respond { font-size:1.1em; border-top:1px solid #666; margin-top:25px; padding-top:20px } h3#comments { margin-top:32px } h3 a:link, h3 a:visited { color: #666; } #sidebar h3.home{border: none; font-size: 12px; margin: 0px;} h4 { font-size:1.1em; margin-bottom:3px;} .post h4 a:hover { text-decoration:underline;} .post h4 a, h4 .post a:visited, h4 .post a:active { text-decoration:none;} .postmetadata a:hover, a:active { color:#333; text-decoration:underline; } /****************************************** * Content ******************************************/ #content { width:585px; float:left;} #content_pages {min-height:390px; height:auto !important; height:390px; padding: 0px 10px 10px; border:1px solid #F2E4D0 !important; background: #FFFFFF; background: #FFFFFF url(http://www.abadia-retuerta.es/wp-content/themes/branfordmagazine/images/bkgr.gif) no-repeat center center;} .description { font-size: 1.3em; font-weight: bold; color:#999; } /* Featured Articles formatting "leftcol" */ .feature { background: #FFFFFF; padding:0; border: 1px solid #f2e4d0; float:left; margin-right:0px; width:180px; height:150px; } .feature .pad { padding:7px 15px; } .last { margin-right:0px; } #sidebar .feature {height:34px; margin:27px 0 0; width:100%;} #sidebar2 .feature {height:150px; width:100%;} #sidebar2 .feature .pad{padding:5px;} #sidebar2 .feature .sidebar_banner { padding: 0px;} #sidebar2 .feature .sidebar_banner a img { border: none; height: 138px; width:182px;} .feature p, #rightcol p { margin:0; } #leftcol img, #rightcol img { padding:1px; border:1px solid #999; } #leftcol .feature { margin-bottom: 15px; } .sidebar_widget {margin-bottom: 20px;} /* Featured Banner */ .featured_banner_wrapper {} .featured_banner_wrapper ul{list-style:none;} .featured_banner_wrapper li{float:left; display: block; margin-right: 2px;} .featured_banner_wrapper li a img{border: none; width: 195px; height: 65px;} .featured_banner { padding:0; } .featured_banner a img { border: none; } /* Formating of the Leadstory stuff in the tabbed section */ #leadpic { float:left; margin: 0 18px 8px 0; padding:1px; border: 1px solid #999; } .title, a.title { font-family: Georgia, "Times New Roman", Times, serif; font-size:1.1em; font-weight:bold; color: #840000; letter-spacing:normal; } #lead p { margin-bottom:10px; } /* Formating of "rightcol" which is the column in the homepage middle ;-) */ #rightcol img { float:left; margin:3px 10px 4px 0; } #leftcol img { margin-bottom: 4px; display:block } #rightcol .clearfloat { border-bottom:1px solid #999; padding:12px 0; } /* Post Formatting */ .entry { margin-top: 10px; padding-bottom:8px; text-align:justify; } .entry img, .entry a:link img, .entry a:visited img {border: 5px solid #FFFFFF;} .post blockquote { color:#666; background:#F4F4EC; padding:6px 14px; margin:18px 35px; border-right:1px solid #DDD; border-bottom:1px solid #DDD; } .post ul li { list-style:square; margin-bottom:5px; margin-left:42px; } .post ol li { margin-bottom:5px; margin-left:48px; } #tags { padding:3px; background:#FFFFFF; border-top:1px solid #F2E4D0 ; border-bottom:1px solid #F2E4D0 ; } .postmetadata { font-size:0.9em; margin:0 0 30px 0; padding:5px 10px; background:#FFFFFF; border-top:1px solid #F2E4D0 ; border-bottom:1px solid #F2E4D0; clear:both;} .postmetadata a:link, a:visited { color: #333;} .postmetadata a:hover, a:active { color:#333; text-decoration:underline; } /* Form Elements */ #search_box { width: 165px; height: 20px; background: url(images/searchfield.jpg);} #search_box #s { float: left; padding: 0; margin: 3px 0 0 4px; border: 0; width: 140px; background: none;} #search_box #go { float: right; margin: 1px 1px 0 0; } select { background:#FFFFFF; border:1px solid #F2E4D0; width:100% } #searchform { padding:0px; } #searchform .searchfield {margin-right:5px; width:140px; border:1px solid #CEBA9E;} #searchform .button { margin:3px 0px; } .button { padding: 1px; background:#900; color:#fff; border:none; } .button:hover { background:#ffadad; color:#900; text-decoration:none } #commentform input { width: 170px; margin: 5px 5px 1px 0; } #commentform textarea { width: 100%; margin-top:5px; } /* Comments*/ .commentlist { padding: 0px 5px; } .commentlist ul, ul.commentlist { list-style-image:none; list-style-position:outside; list-style-type:none;} .commentlist li { margin: 15px 0 3px; padding: 8px 15px 10px 15px; border:1px solid #E6E3D3; } .commentlist p { margin: 5px 0px;} .commentlist span.reply {padding: 0px; margin: 0px; font-weight: bold;} .commentlist span.reply a{text-decoration: none;} .commentlist span.reply a:hover {color:#666666;} .commentlist div.com_content {padding: 3px 6px;} ul.commentlist li { background:#f0e3d3;} .commentlist ul li { background:#e7d8c5;} .commentlist ul li ul li{background:#f0e3d3;} .commentlist blockquote { color:#666; background:#fff; padding:6px 14px; margin:18px 35px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; } #commentform small { background:#FFF; font-weight:bold; padding:0; } .commentmetadata { display: block; } .commentlist small { background:#fff; border:1px solid #E6E3D3; } /* Float Properties*/ .clearfloat:after { display:block; visibility:hidden; clear:both; height:0; content:"."; } .clearfloat { display:inline-block; } .clearfloat { display:block; } /****************************************** * Footer ******************************************/ #footer { margin: 0 auto; width: 813px; font-size:0.9em; text-align:right; padding-top:10px; color:#999; padding-left:22px; } #footer a { color:#999; } .alignright { float:right; margin: 0 0 10px 10px; } .alignleft { float:left; margin: 0 10px 10px 0; } a.rss { background: url(images/rss.gif) no-repeat; padding:0 0 0 20px; } p.header { padding:0; margin:0; font-size:1.1em; } /****************************************** * Homepage Main tabbed box (CSS Must be at the end) ******************************************/ /* Caution! Ensure accessibility in print and other media types... */ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .ui-tabs-hide { display: none!important; } } /* Hide useless elements in print layouts... */ @media print { .ui-tabs-nav { display: none!important; } } /* Skin */ #container-4 { margin: 0px 0 10px 0!important; min-height:305px; height:auto !important; height:305px; } .ui-tabs-panel { width:565px!important; padding:10px 15px 15px !important; border: 1px solid #f2e4d0!important; background: #FFFFFF!important; /* declare background color for container to avoid distorted fonts in IE while fading */} .ui-tabs-panel .title { font:1.8em Georgia, "Times New Roman", Times, serif!important; line-height:100%!important; display:block!important; padding-bottom:7px!important; color: #840000!important; text-transform:none!important; letter-spacing:normal!important; } .ui-tabs-panel p { margin: 0px 0px 10px;} .ui-tabs-nav { list-style:none!important; margin:0px!important; padding:0px!important;} .ui-tabs-nav:after { display: block!important; clear: both!important; content: " "!important;} .ui-tabs-nav li { float: left!important; margin:0 1px 0 0!important; min-width: 85px!important; /* be nice to Opera */} .ui-tabs-nav .ui-tabs { display:block!important; padding:5px!important; font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif; font-size: 11px; margin:1px 0 0 0!important; /* position: relative makes opacity fail for disabled tab in IE */ position: relative!important; top:1px!important; z-index:2!important; color: #663333!important; font-weight:bold!important; line-height:14px!important; text-align:center!important; text-decoration:none!important; border:1px solid #f2e4d0!important; white-space:nowrap!important; /* required in IE 6 */ outline:0!important; /* prevent dotted border in Firefox */} .ui-tabs-nav .ui-tabs:hover {color:#000000 !important; } .ui-tabs-selected .ui-tabs { background-color:#fff!important; color:#663333!important; border-bottom:1px solid #fff!important; } .ui-tabs-nav .ui-tabs-selected .ui-tabs, .ui-tabs-nav .ui-tabs a:hover, .ui-tabs-nav .ui-tabs a:active { background-position: 100% -150px!important;} .ui-tabs-nav .ui-tabs, .ui-tabs-nav .ui-tabs-disabled .ui-tabs a:hover, .ui-tabs-nav .ui-tabs-disabled .ui-tabs a:active { background-position: 100% -100px!important;} .ui-tabs-nav .ui-tabs-selected .ui-tabs a:link, .ui-tabs-nav .ui-tabs-selected .ui-tabs a:visited, .ui-tabs-nav .ui-tabs-disabled .ui-tabs a:link, .ui-tabs-nav .ui-tabs-disabled .ui-tabs a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text!important;} .ui-tabs-nav .ui-tabs a:hover, .ui-tabs-nav .ui-tabs a:active, .ui-tabs-nav .ui-tabs-unselect .ui-tabs a:hover, .ui-tabs-nav .ui-tabs-unselect .ui-tabs a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer!important; background-color:#333!important; color:#fff!important;} .ui-tabs-disabled { opacity: .4!important; filter: alpha(opacity=40)!important; } /* Additional IE specific bug fixes... */ * html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ display: inline-block!important; } *:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ display: inline-block!important; } #fragment-1, #fragment-2, #fragment-3 { height:250px; overflow:hidden; font-size: 11px;} #fragment-2 {} #fragment-2 a{font-weight: bold;} #fragment-2 p{margin: 0px; line-height: 1.4em;} #fragment-2 p.more{line-height:1em; margin-bottom:7px; text-align:right; } #fragment-2 p.more a{color:#990000; font-size: 11px; text-decoration: none;} #fragment-2 p.more a:hover{color:#990000; font-size: 11px; text-decoration: none;} #fragment-3 {font-size: 12px;} #fragment-3 ol {padding-top: 1px;} #fragment-3 ol li {padding: 1px 2px;} /****************************************** * Contact Page Form ******************************************/ .contact-form-textarea { width: 385px; border: 1px solid #990000 ;} .contact-form-label-long {float:left; width:140px; font-weight: bold;} .contact-form-label-short {float:left; width:88px; font-weight: bold;} .contact-form-label {font-weight: bold;} .wpcf7-list-item { display: block;} .form-box {width: 500px; margin: 0 auto;} .input-long {width: 332px; border: 1px solid #990000; background: #FFFFFF;} span.wpcf7-not-valid-tip { border: none; color:red; font-weight: bold; left:1%; top:110%; width: 325px; line-height: 9px; font-size: 10px;} /* Copy this file into your current active theme's directory to customize this template Photo */ div.meta img { margin-right:5px; } div#photo { position:relative; margin:10px 0 0 0; } div#notes { position:absolute; top:0px; left:0px; width:100%; height:100%; } div#notes div.note { padding:1px; margin:-4px 0px 0px -4px; position:absolute; cursor:pointer; } div#notes:hover div.note div.hover2 { border:1px solid black; } div#notes:hover div.note div.hover { border:1px solid white; } div#notes div.note:hover { border:1px solid yellow; padding:0; z-index:2; } div.note div.text { display:none; position:absolute; top:100%; left:0px; width:auto; margin:10px 0 0 0 ; padding:5px; background:#FFFFD3; color:black; border:1px solid #555; border-top:1px solid #eee; border-left:1px solid #eee; z-index:1; } div.note:hover div.text { display:block; } div#context { position:relative; height:120px; width:100%; background:#eee; } div#context div.prev, div#context div.next { position:absolute; top:10px; color:#ccc; font-size:0.9em; text-align:center; text-transform:lowercase; } div#context div.prev { left:10px; } div#context div.next { right:10px; } div#context div.nomore { top:20px; width:100px; } div#context div.info { position:absolute; top:20px; left:50%; width:100px; margin-left:-50px; text-align:center; } div#context div.info a{ color:#ccc; text-decoration:none; } div#context div.info strong a{ color:#aaa; } div.comment { clear:both; min-height:50px; margin-bottom:1em; } div.comment p { margin:0 0 1em 0; padding:0; } div.comment img { margin-right:5px; margin-bottom:5px;} /* Album */ div#photos { background:#eee; padding:10px; clear:both; margin:20px 0 0 0; } div#highlight { position:relative; margin:15px 0 0 0; } div#highlight img { float:left; margin:0 10px 0 0 ; border: none;} div#highlight p { font-size:1.3em; } div#highlight p.meta { color:#888; font-size:1em; } div#highlight p.meta a { color:#888; } /* Albums-index */ div.albums { clear:both; padding-top:10px; } div.album { background:#eee; padding:10px 10px 10px 10px; margin:0 0 15px 0; position:relative; min-height:95px; clear:both; } div.album img.highlight { float:left; border:none; position:relative; margin-right:10px; } div.album h2 { font-size:1.4em; text-decoration:none; margin:0 0 10px 0; } div.album p { font-size:0.9em; } div.album p.meta { color:#888; } div.album p.meta a { color:#888; } div.albums-small div.album { clear: none; width:90px; height:115px; float:left; background: none; } div.albums-small div.album img.highlight { float: none; margin:0; } div.albums-small div.album strong { font-size:0.9em; } div.group { min-height:60px; } div#highlight { position:relative; margin:0 0 40px 0; } div#highlight h2 { margin-bottom:10px; } div#highlight img.highlight { float:left; margin:0 10px 0px 0; border:none; } div#highlight p { font-size:1.3em; } div#highlight p.meta { color:#888; font-size:0.9em; } div#highlight p.meta a { color:#888; } div#highlight div.photos { clear:both; padding:10px 0; background:none; } div#highlight div.photos img { margin:0 10px 10px 0; } div#photoalbum-nav { margin-bottom:15px; } /* Paging */ .navigation { padding:1em 0;} /* Tags */ div.tags { padding-top:10px; clear:both; } div#cloud { line-height:200%; } div.flickr-meta-links { clear:both; margin:10px 0 0 0; font-size:10px; } div.flickr-meta-links a{ color:#555; } /* General */ .narrowcolumn { width: 596px; margin: 0 auto;} .narrowcolumn h2 {border: none;} /****************************************** * Wine Section ******************************************/ div.wines_main_wrapper {margin: 25px auto 0px;} div.video_content_wrapper { width: 400px; float: left; padding-top: 20px;} div.wine_control {margin: 10px 0px; width: 100%; clear: both; text-align: center;} div.text_content_wrapper { width: 365px; height: 290px; margin-left: 412px; } div.text_content_wrapper div.main_text{ height: 214px; } div.text_content_wrapper p.link {height:35px; text-align: right;} div.text_content_wrapper p.link a{text-decoration: none; font-weight: bold; font-size: 11px;} div.text_content_wrapper p.link a:hover{font-weight: bold; text-decoration: none;} div.text_content_wrapper p.link img { border:none; width: 25px; } div.text_content_wrapper p.link span { color:#840000; position:relative; bottom: 17%; } .rss_link { background: transparent url(images/rss.gif) scroll no-repeat left center; padding: 2px 0px 2px 20px;} #cuerpo{ text-align: center; height: 100%; width: 775px; //width: 777px; margin: auto; } #enlaces{ height: auto; width: 100%; } #form{ margin: 15px; } #mapa{ border-top: 0px; height: 503px; width: 100%; } #contenido{ width: 100%; height: 420px; border-top: 0px; } #ifr{ width: 100%; height: 420px; border: 0; overflow: hidden; } #mapa_seleccionado{ position: relative; width: 50%; height: 400px; float: left; } #localizaciones{ position: relative; width: 49%; height: 400px; overflow: auto; text-align: left; float:left; //top: 10px; } #mapa img{ border: 0; outline: 0; } area { border: 0; outline: 0; } area:hover { border: 0; outline: 0; } map{ border: 0; outline: 0; } #localizaciones li{ margin-bottom: 15px; } #enlaces select{ width: 30%; }