* --

* ----

id="header-nav"> * --

* --

* ----

* ------

* * A wrapper-ek az adott rész teljes szélességére vonatkoznak * -- Ezen belül helyezkednek el a container-ek, amit ID-ken keresztül * lehet paraméterezni? * ----------------------------------------------------------------------- **/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0} */ /** --------------------------------------------------------------------------- * Használt betűtípusok betöltése * - Bulmering - a Dömötör-díj kiegészítő betűtípusa * - Source Sans - Google font, ezt a function.php tölti be * ---------------------------------------------------------------------- **/ @font-face { font-family: 'Bulmering'; src: url('fonts/Bulmering.eot'); src: url('fonts/Bulmering.eot?#iefix') format('embedded-opentype'), url('fonts/Bulmering.woff') format('woff'), url('fonts/Bulmering.ttf') format('truetype'); font-weight: normal; font-style: italic; } /** --------------------------------------------------------------------------- * A honlap hátterének definiálása * - Ezek egymás feletti rétegek, a sorrendet a function.php-ben lehet beállítani * beállítani a my_wfx_layout() függvénnyel. * - a #site-bg-1 csak a honlap hátterét jelenti! Ha az oldal alacsonyabb, * mint a képernyő, akkor kilátszik alóla a beállítása! * ---------------------------------------------------------------------- **/ #site-bg-1 { } #header-bg-1 { } #main-bg-1 { } #footer-bg-1 { } /** --------------------------------------------------------------------------- * Az egyes szakaszokhoz tartozó container-ek definiálása * ---------------------------------------------------------------------- **/ #header.container, #header-nav.container, #main-content.container, #footer.container { background-color: #E2DBD5; border-left: 1px solid #382E25; border-right: 1px solid #382E25; } #header-nav.container { padding: 0 40px; border-bottom: 1px solid #9C9792; } #footer.container { background-color: #DBD1C8; } .header-navigation-container { margin: 0 auto; } /** --------------------------------------------------------------------------- * A #content határozza meg a tartalom stílusát. Ez érvényes elvileg * minden oldalon * ----------------------------------------------------------------------- **/ #content { } /** --------------------------------------------------------------------------- * * * ----------------------------------------------------------------------- **/ .box-2 .inside-std { padding: 20px 10px 20px 60px; } /** --------------------------------------------------------------------------- * Teljes oldal esetén definiáljuk a tartalomhoz tartozó margókat! * - ezt a media query-knél módosítani kell! * ---------------------------------------------------------------------- **/ #content.box-3 { padding: 20px 10px 20px 60px; } #content.box-1 { padding: 20px 60px 20px 10px; } .footer-primary-left { padding: 20px 10px 20px 60px; } .footer-primary-right { padding: 20px 60px 20px 10px; } /** --------------------------------------------------------------------------- * Az egyes szakaszokhoz tartozó container-ek definiálása * ---------------------------------------------------------------------- **/ #header-content { } #main-content { background-color: #E2DBD5; } #footer-content { /* padding: 20px 60px 10px 60px; */ } .hr { margin: 0; padding: 0; border-bottom: 1px solid #B2AFAC; } /* @group ******** General ******** */ /* @group Typography */ body { font-family: 'Source Sans Pro', arial; color: #000000; font-size: 14px; font-weight: 400; margin: 0; padding: 0; background-color: #DBD1C8; text-align: justify; } h1, h2, h3, .sidebar-title { font-family: 'Bulmering', sans-serif; font-size: 2.3em; font-weight: normal; color: #B21913; margin-bottom: 20px; } h2, .sidebar-title { font-size: 1.3em; } p, ul, ol { font-size: 1em; margin-bottom: 15px; } ul ul, ol ol { font-size:1em; } /* Keeps nested list items consistently sized */ li.wf-edit-meta-links { margin-left: 0px; } /* @end */ /* @group ******** Links ******** */ a, a:visited, a:active { color: #B21913; text-decoration: none; } a:hover { color: #000000; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } /* @end */ /* @group ******** Navigation ******** */ /** --------------------------------------------------------------------------- * Fejlécben lévő menü beállításai * - A menü definiálása a function.php-ban * - Ez most csak egyszintű menü! - a slicnavmobilon használható .js elvileg * kezeli a töbszintű változatot, tehát elvben módosítható! * ----------------------------------------------------------------------- **/ .header-navigation ul.menu, .header-navigation ul.sub-menu { list-style: none; margin: 0; padding: 0;;} .header-navigation ul.menu li { margin: 0; } .header-navigation ul.menu li a { display: block; float: left; padding: 20px 20px 20px 20px; font-family: 'Bulmering', sans-serif; font-weight: normal; font-size: 1.5em; color: #B2AEAC; } .header-navigation ul.menu li a, .header-navigation ul.menu li a:visited { color:#B21913; } .header-navigation ul.menu li a:hover, .header-navigation ul.menu li ul.sub-menu li a:hover { color: #382E25; background-color: #DBD1C8; } .header-navigation ul.menu li.current_page_item a, .header-navigation ul.menu li.current-menu-item a, .header-navigation ul.menu li ul.sub-menu li.current_page_item a { } /*Fixes child page hierarchy colouring*/ .header-navigation ul.menu li ul.sub-menu li a, .header-navigation ul.menu li ul.sub-menu li.page_item_has_children a { color: #B21913; } .header-navigation ul.menu li a:hover, .footer-navigation ul.menu li a:hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } /** --------------------------------------------------------------------------- * Láblécben lévő menü beállításai * ----------------------------------------------------------------------- **/ .footer-navigation ul.menu { list-style: none; margin: 0; padding: 0; font-size: 1em; } .footer-navigation ul.menu li a { text-transform: none; margin: 0; width: 100%; padding: 3px 10px; color: #000000; border: none; display:block; } .footer-navigation ul.menu li a:visited { } .footer-navigation ul.menu li a:hover, .footer-navigation ul.menu li ul.sub-menu li a:hover { background-color: #e2dbd5; text-decoration: none; } .footer-navigation ul.menu li.current_page_item a, .footer-navigation ul.menu li.current-menu-item a, .footer-navigation ul.menu li ul.sub-menu li.current_page_item a { background-color: #e2dbd5; } /*Fixes child page hierarchy colouring*/ .footer-navigation ul.menu li ul.sub-menu li a, .footer-navigation ul.menu li ul.sub-menu li.page_item_has_children a { color: #B21913; } /* @end */ /** --------------------------------------------------------------------------- * slicknav Mobil menü * ----------------------------------------------------------------------- **/ .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_no-text { margin: 0 } .slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em; } .slicknav_nav { clear: both } .slicknav_nav ul, .slicknav_nav li { display: block } .slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { cursor: pointer; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav a { display: block } .slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { display: inline } .slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; } .slicknav_menu:after { clear: both } /* IE6/7 support */ .slicknav_menu { *zoom: 1 } /* User Default Style */ .slicknav_menu .slicknav_icon-bar { display: block; background: #FF9D00; width: 26px; height: 3px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 5px; } .slicknav_menu { display:none; font-weight: normal; font-family: 'Roboto', sans-serif; background: #191918 URL(image/mobile-nav-bg.png) no-repeat top right; padding: 0; margin-bottom: 0; font-size: 16px; } /* Button */ .slicknav_btn { margin: 0; padding: 10px 10px 11px 10px; text-decoration:none; background-color: #FF9D00; } /* Button Text */ .slicknav_menu .slicknav_menutxt { color: #FFF; font-weight: bold; text-shadow: none; } /* Button Lines */ .slicknav_menu .slicknav_icon-bar { background-color: #fff; } .slicknav_nav { margin:0; padding:0; font-size:1em; } .slicknav_nav, .slicknav_nav ul { list-style: none; overflow:hidden; margin-bottom: 10px; } .slicknav_nav ul { padding:0; margin: 0; } .slicknav_nav li { margin-left: 0; } .slicknav_nav ul li { margin-left: 10px; } .slicknav_nav .slicknav_row { padding: 5px 10px; margin: 2px 5px 2px 0; } .slicknav_nav a{ padding: 5px 10px; margin: 2px 0 2px 0; text-decoration:none; color:#fff; font-size: 1.2em; } .slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { padding:0; margin:0; } .slicknav_nav .slicknav_row:hover { background:#FF9D00; color: #191918; } .slicknav_nav a:hover{ background:#FF9D00; color: #191918; } .slicknav_nav .slicknav_txtnode { margin-left:15px; } .slicknav_brand { float: left; padding: 0 0 0 5px; } /* @end */ /* @group ******** Main content ******** */ /** --------------------------------------------------------------------------- * Itt lehet definiálni a fő tartalomra vonatkozó dolgokat * - class="container" id="main-content" * ----------------------------------------------------------------------- **/ .hentry { margin-top: 0; margin-right: 0; margin-left: 0; border-bottom: 4px solid #d7d7d7; padding-bottom: 25px; padding-top: 30px; } .hentry.first-in-loop, .hentry.single-post { padding-top: 0;} .hentry.single-post, .hentry.last-in-loop { border-bottom: none; } .meta-content { border-top: 4px solid #e6e6e6; margin-top: 5px; padding-top: 10px; } .entry-content ul.wf-edit-meta { list-style-type: none; margin-left: 0; padding-left: 0; } .widget-box.widget-below-content { background-color: #d6d7d6; padding: 23px 20px 15px; margin-bottom: 30px; } /* @end */ /* @group ******** Comments ******** */ #comments .commentlist { padding-left: 20px; } #comments .commentlist li { padding-left: 0; margin-bottom: 20px; } #commentform p { margin-bottom: 20px; } #commentform p label { display: block; clear: both; margin-bottom: 10px; } #commentform input, #commentform textarea { width: 90%; padding: 3px; } #commentform #form-allowed-tags { width: 90%; font-size: 0.8em; } #commentform input#submit.submit { padding: 6px; } /* @end */ /* @group ******** Sidebar ******** */ #sidebar { padding: 20px 60px 20px 10px; } /* Fine tuning for alignment with main content */ .sidebar-box, #sidebar .widget-box { width: 100%; margin-bottom: 10px; padding: 0; text-align: center; } #sidebar ul { margin: 0; color: #757575; list-style-type: none; padding: 0; } #sidebar ul li { list-style-type: none; margin-left: 0; } #sidebar ul li ul li { margin-left: 10px; border-bottom-style: none; } /* .sidebar-title { margin-bottom: 10px; color: #7b7b7b; border-bottom: 2px solid #e6e6e6; font-size: 1.2em; padding-bottom: 2px; } */ #sidebar select { width: 100%; } /* @end */ /* @group ******** Footer ******** */ .footer-primary-right .inside-std { padding-right: 0; } #footer-secondary { background-color: #382E25; color: #FFFFFF; font-size: 0.9em; padding: 10px 60px; } #footer-secondary a { color: #fff; } #footer-secondary a:hover { color: #000; } #footer-content a { color: #000000; } #footer-content a:hover { text-decoration: underline; } /* @end */ /* @group ******** WP Editor overrides ******** */ .mce-content-body { background-color: #fff; } /* @end */ #index-right img { width: 100%; max-width: 100%; height: auto; } .btn-center { text-align: center; width: 100%; margin: 0 auto; } .btn#green { background-image: -webkit-linear-gradient(top, #e2dbd5, #382E25); background-image: -moz-linear-gradient(top, #e2dbd5, #382E25); background-image: -ms-linear-gradient(top, #e2dbd5, #382E25); background-image: -o-linear-gradient(top, #e2dbd5, #382E25); background-image: linear-gradient(to bottom, #e2dbd5, #382E25 ); cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0px; font-family: 'Roboto', sans-serif; color: #fffaf6; font-size: 1.2em; text-transform: uppercase; padding: 10px 20px 10px 20px; border: solid #b2afac 1px; text-decoration: none; margin: 10px 0; } .btn:hover#green { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #BFFFBF, #00b200); background-image: -moz-linear-gradient(top, #BFFFBF, #00b200); background-image: -ms-linear-gradient(top, #BFFFBF, #00b200); background-image: -o-linear-gradient(top, #BFFFBF, #00b200); background-image: linear-gradient(to bottom, #BFFFBF, #00b200); text-decoration: none; } #signupform { width: 100% padding: 0; } #signupform input[type=text], #signupform input[type=email], #signupform input[type=url], #signupform input[type=password], #signupform input[type=file], #signupform textarea { width: 100%; padding: 5px 2px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fefefe; } #signupform fieldset { border: 0; padding: 0; margin: 0; } #signupform .header { padding: 10px; width: 100%; text-transform: uppercase; color: #F2F9FB; background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); border-bottom: 1px solid #B2AFAC; } #signupform .elements { padding: 10px; } #signupform label { margin-top: 10px; display:block; } #signupform input[type=checkbox] { display: none; } #signupform input[type=checkbox] + div:before { content: ''; display:inline-block; width:20px; height:20px; margin:-1px 10px 0 0; vertical-align:middle; background: url(image/checkbox.png) left top no-repeat; cursor:pointer; padding: 0; } #signupform input[type=checkbox]:checked + div:before { background:url(image/checkbox-ok.png) left top no-repeat; } .errormsgbox { padding: 10px 10px 0 10px; margin-bottom: 20px; border: 1px solid #B31B16; background-color: #F8E9E8; color: #B31B16; font-size: 1em; } .title_dijatado { color: #867C73; font-size: 0.9em; } .vote_header { font-family: 'Bulmering'; font-size: 1.7em; color: #B21913; padding-bottom: 3px; border-bottom: 1px solid #ffcc00; margin: 20px 0 10px 0; } .vote_foto { background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 10; margin: 0 auto; } .vote_nev { margin-top: 5px; } .vote_kategoria, .vote_darab { margin-top: 3px; color: #867C73; font-size: 0.9em; } .vote_nev a, .vote_darab a { color: #000000; } #vote input[type="radio"] { display:none; } #vote input[type="radio"] + label { display:inline-block; cursor:pointer; width: 100%; height: 215px; background: url(image/vote.png) no-repeat; background-position: center; background-size: contain; z-index: 100; margin: 0; } #vote input[type="radio"]:checked + label { background:url(image/vote_ok.png) center center no-repeat; background-size: contain; } .post_thumbnails { margin: 0 0 20px -60px; } .post_thumbnails img { width: contain; height: auto; } /* @end */ /** --------------------------------------------------------------------------- * Itt lesznek felülírva a beállítások, amint másik eszközön nézzük a honlapot * Különböző töréspontokon más-más beállítás használható * Kérdés, hogy ezt befolyásolja-e az admin felületen történő beállítás...? * - max-width: 480px - mobil álló vagy fekvő * - max-width: 768px - tablet álló vagy fekvő - itt már kikapcsoljuk a slicknav menüt! * - max-width: 960px - desktop képernyő * ----------------------------------------------------------------------- **/ /* Tiny Media Query and below */ @media screen and (max-width:480px) { /* @group Layout */ .container { width: 100%; } /* @end */ #sidebar { padding: 10px; } /* @group Footer */ .footer-primary-right div.inside-std { padding: 0; } .footer-primary-right div.inside-std { padding: 0; } /* @end */ #content { padding: 10px; } #footer-content { padding: 10px; } .box-1-half#index-left, .box-1-half#index-right { padding: 20px 10px 20px 10px; } #content.box-3, #content.box-2 { padding: 10px 10px; } } /* Small Media Query and below */ @media screen and (max-width:768px) { /* @group Layout */ .container { width: 95%; } .mq-small-min-box-1-1 .inside-std { padding: 0; } /* @end */ /* @group Navigation */ .header-navigation-container { display:none; } .slicknav_menu { display:block; } /* @end */ /* @group Header */ #header-content { padding: 0; } /* @end */ /* @group Sidebar */ .sidebar-box, #sidebar .widget-box { margin-right: 0px; } #sidebar { padding: 10px; } /* @end */ /* @group Footer */ .footer-primary-mid .inside-std { padding-right: 10px; } .footer-primary-right .inside-std { padding-left: 10px; padding-right: 0; } /* @end */ #content, #footer-content, #content.box-2, #content.box-3 { padding: 10px 10px; } .box-1-half#index-left, .box-1-half#index-right { padding: 20px 10px 20px 10px; } .post_thumbnails { margin: 0 0 20px -10px; } } @media screen and (max-width:960px) { .container { width: 95%; } }