/* Author: Razvan Stavila Author URI: http://x3studios.com/ Version: 0.1 Project: Kinderzukunft Timisoara Description: Primul sat de copii din Romania! */ /* --------------------------------------------------------------------------------------- TABLE OF CONTENTS -- BASICS -- CUSTOM --------------------------------------------------------------------------------------- */ /* BASICS */ body { background: #fff; color: #535353; font: 12px/18px Arial, Helvetica, sans-serif; text-align: center; } a { color: #08906d } a:hover { color: #ff392e } /* layout */ #header .wrap, #content, #theyHelpedUs .wrap, #footer { width: 960px; margin: 0 auto; text-align: left; clear: both } #header, #theyHelpedUs { width: 100%; background: #e4f3ef; overflow: hidden } /* Header */ #header,#header .wrap { height: 485px; } body.despre #header, body.despre #header .wrap, body.servicii #header, body.servicii #header .wrap, body.proiecte #header, body.proiecte #header .wrap, body.sustinatori #header, body.sustinatori #header .wrap, body.multimedia #header, body.multimedia #header .wrap, body.implicate #header, body.implicate #header .wrap { height: 332px } #header .wrap { position: relative; overflow: hidden; } #header h1 { width: 289px; height: 111px; } #header h1 a { display: block; width: 289px; height: 111px; background: url(../images/logo.png) no-repeat left top; } #header h1 span { display: none } /* menu */ #menu { position: absolute; right: 0; top: 50px; z-index:100 } #menu { line-height: 1.4; height: 25px; width: 661px; } #menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } #menu ul li { width: 100%; height: auto; } #menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } #menu li { float: left; position: relative; height: 25px; } #menu li a { height: 25px; } #menu #nav-01, #menu #nav-02, #menu #nav-03, #menu #nav-04, #menu #nav-05, #menu #nav-06, #menu #nav-07 { text-indent: -5000px; background-repeat: no-repeat } #menu #nav-01:hover, #menu #nav-02:hover, #menu #nav-03:hover, #menu #nav-04:hover, #menu #nav-05:hover, #menu #nav-06:hover, #menu #nav-07:hover { background-position: 0 -50px; } #menu li.current a { background-position: 0 -50px; } #menu a.sf-with-ul:hover, #menu li.sfHover a { background-position: 0 -25px!important; } #menu #nav-01 { width: 65px; background-image: url(../images/menu_01.png); } #menu #nav-02 { width: 96px; background-image: url(../images/menu_02.png); } #menu #nav-03 { width: 75px; background-image: url(../images/menu_03.png); } #menu #nav-04 { width: 85px; background-image: url(../images/menu_04.png); } #menu #nav-05 { width: 107px; background-image: url(../images/menu_05.png); } #menu #nav-06 { width: 104px; background-image: url(../images/menu_06.png); } #menu #nav-07 { width: 129px; background-image: url(../images/menu_07.png); } #menu a { display: block; position: relative; } #menu ul li a { height: auto; background: none; color: white; font-weight: bold; } #menu li:hover ul, #menu li.sfHover ul { left: 0; top: 25px; z-index: 99; } #menu li li { background: #ff372c; } #menu li li.current { padding-top: 5px; background: #ff372c url(../images/submenu-rt.png) no-repeat right top; } #menu li li a { padding: 7px 0; margin: 0 10px; display: block; border-bottom: 1px solid #ff634f; text-decoration: none!important } #menu li li a:hover { text-decoration: underline!important } #menu li li.lastitem { height: 10px; font-size: 1px; } #menu li li li { background: #9AAEDB; } #menu li:hover, #menu a:focus, #menu a:hover, #menu a:active { outline: 0; } #menu li.last:hover ul, #menu li.last ul { left: 0; } #menu li.last ul li.current { background: #ff372c url(../images/submenu-lt.png) no-repeat left top } #menu li ul { width: 177px; } #menu li li.lastitem { background: transparent url(../images/menu_02-sub.png) no-repeat left top; } #menu li.nav2 ul { width: 177px; } #menu li.nav2 li.lastitem { background: transparent url(../images/menu_02-sub.png) no-repeat left top; } #menu li.nav3 ul, #menu li.nav4 ul { width: 290px; } #menu li.nav3 li.lastitem, #menu li.nav4 li.lastitem { background: transparent url(../images/menu_03-sub.png) no-repeat left top; } /*#menu li.nav7 ul { width: 129px; } #menu li.nav7 li.lastitem { background: transparent url(../images/menu_07-sub.png) no-repeat left top; } #menu li.nav7 ul li.current { background: #ff372c }*/ body.home #menu li.nav1 a#nav-01, body.despre #menu li.nav2 a#nav-02, body.servicii #menu li.nav3 a#nav-03, body.proiecte #menu li.nav4 a#nav-04, body.sustinatori #menu li.nav5 a#nav-05, body.multimedia #menu li.nav6 a#nav-06, body.implicate #menu li.nav7 a#nav-07 { background-position: 0 -50px; } /* Home Gallery */ #homeSlide .items { width: 20000px; position: relative; top: 7px; } #homeSlide .items div { float: left; width: 960px; height: 346px; position: relative; } #homeSlide .items div .description { position: absolute; right: 40px; bottom: 0; width: 310px; padding: 25px; background: transparent url(../images/pixel50.png); color: white; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; } #homeSlide .items div .description strong { font-size: 34px; line-height: 30px; font-weight: bold; } #homeSlide .items div .description em { font-style: normal; font-weight: bold; font-size: 13px; line-height: 18px; display: block; padding-top: 10px } #homeSlide .items div .gotogallery { position: absolute; left: 15px; bottom: 15px; background: url(../images/gotogallery.png); height: 27px; width: 271px; text-indent: -9000px; } #homeSlide .items div .gotogallery:hover { background-position: 0 -27px; } .sutalasuta { position: absolute; top: 100px; right: 5px; z-index: 98 } #maincontent { width: 618px; float: left; padding-right: 20px; margin-top: 20px; padding-bottom: 60px; } .subs { font-weight: bold; font-size: 14px; } #maincontent p { margin-bottom: 14px; line-height: 22px } #maincontent ul { margin-bottom: 20px; } #maincontent ul li { background: url(../images/lst-bullet.png) no-repeat left 8px; padding: 5px 0 5px 22px; } #maincontent h2, #maincontent h3, #getInvolved h4, #contactform legend { color: #199b7a; font-weight: bold; margin-bottom: 10px; } #maincontent h2 { font-size: 30px; } #maincontent h3, #getInvolved h4, #contactform legend { font-size: 20px; } #maincontent h3 { margin: 30px 0 15px 0 } #maincontent blockquote { background: #e4f3ef; padding: 30px; margin: 0 0 20px 20px; font-family: Georgia, serifs; font-size: 2em; font-style: italic; } #maincontent blockquote p { width: 150px; line-height: 1.2em; margin: 0 } #maincontent blockquote.right { float: right } #maincontent blockquote.left { float: left; margin: 0 20px 20px 0 } #maincontent .haveimage { padding: 5px; background-color: #e4f3ef } #maincontent .haveimage.left { float: left; margin: 0 20px 20px 0 } #maincontent .haveimage.right { float: right; margin: 0 0 20px 20px } #maincontent img { padding: 5px; background-color: #e4f3ef; margin: 0 20px 20px 0 } /* Sidebar */ #sidebar { margin-top: 30px; margin-left: 25px; } #getInvolved h4 { text-transform: uppercase } /* Contact Form */ #contactform { margin-top: 50px; } #contactform legend { padding: 0 } #contactform ol { margin-top: 10px; width: 540px } #contactform ol li { padding: 5px 0; position: relative; } #contactform ol li input, #contactform ol li textarea { padding: 7px 10px 7px 5px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; border: none; } #contactform ol li input { width: 262px; background: transparent url(../images/input-off.png) no-repeat left top; } #contactform ol li textarea { width: 463px; height: 200px; background: transparent url(../images/textarea.png) no-repeat left top; overflow: auto } #contactform ol li.mesaj { padding-bottom: 0 } #contactform ol li.mesaj em { left: 535px; } #contactform ol li.submit { text-align: right } #contactform ol li em { color: #ff372c; font-weight: bold; font-size: 16px; position: absolute; left: 335px; } #contactform label { display: inline-block; padding: 4px 0; line-height: 20px; vertical-align: top; width: 55px; } #contactform ol li input#submit { width: auto; padding: 0; margin: 0 8px 0 0; background: none } #contactform ol li span.manadatory { margin-left:63px; font-size: 11px; color: #ff372c } /* Featured */ #content { padding-top: 10px; } #featuredProjects, #featuredEvents, #getInvolved { float: left; color: white } #featuredProjects { width: 317px; } #featuredEvents { width: 321px; } #getInvolved { width: 322px; color: #535353 } #getInvolved #sidebar p { margin: 0; padding: 0 0 20px 0; font-weight: bold; font-size: 14px } #featuredProjects h2,#featuredEvents h2,#getInvolved h2 { display: none } #featuredProjects a.thumb,#featuredEvents a.thumb,#getInvolved a.thumb { display: block; height: 247px; color: white; position: relative; text-decoration: none; cursor: pointer } #featuredProjects a.thumb span,#featuredEvents a.thumb span,#getInvolved a.thumb span { position: absolute; left: 30px; bottom: 12px; font-size: 18px; } #getInvolved a.thumb span { left: 25px } #featuredProjects a.thumb span em,#featuredEvents a.thumb span em,#getInvolved a.thumb span em { font-size: 12px; font-style: normal } #featuredProjects a.thumb { background: url(../images/featured-projects.jpg); } /*#featuredEvents a.thumb { background: url(../images/featured-events11.jpg) }*/ #featuredEvents a.thumb { background: url(../images/evenimente-verde.jpg) } #getInvolved a.thumb { background: url(../images/featured-involve.jpg) } #getInvolved.main-sidebar a.thumb { background: url(../images/featured-involve-on.jpg) } #featuredProjects a.thumb:hover { background: url(../images/featured-projects-on.jpg); } #featuredEvents a.thumb:hover { background: url(../images/evenimente-rosu.jpg) } #getInvolved a.thumb:hover { background: url(../images/featured-involve-on.jpg) } #getInvolved.main-sidebar a.thumb:hover { background: url(../images/featured-involve.jpg) } #featuredProjects a.all,#featuredEvents a.all { display: block; height: 27px; width: 161px; text-indent: -9000px; margin-top: 5px; padding: 0 } #featuredProjects a.all { background: url(../images/btn-all-projects.png) 0 -27px; } #featuredEvents a.all { background: url(../images/btn-all-events.png) 0 -27px; } #featuredProjects a.all:hover,#featuredEvents a.all:hover { background-position: 0 0; } #featuredProjects p,#featuredEvents p,#getInvolved p { padding: 12px 0 40px 0; font-size: 14px; font-weight: bold; } #featuredProjects p a,#featuredEvents p a,#getInvolved p a { color: #535353; text-decoration: none; line-height: 18px; display: block; padding: 5px 0; } #featuredProjects p a:hover,#featuredEvents p a:hover,#getInvolved p a:hover { color: #ff392e; text-decoration: underline } #featuredProjects p { margin: 0 13px; } #featuredEvents p { margin: 0 11px; } #getInvolved p { margin: 0 9px 0 15px; font-size: 12px; line-height: 18px; font-weight: normal; } /* Parteneri si Sponsori */ #theyHelpedUs .wrap { padding-top: 27px; position: relative; z-index: 100 } #theyHelpedUs h2 { height: 25px; margin-left: 35px; background: url(../images/title-parteneri-sponsori.png) no-repeat left top; text-indent: -9000px; } #theySlider { width: 960px; height: 135px; position: relative; overflow: hidden; margin-top: 20px; } #theySlider ul { width: 25000px; position: absolute; top: 0; } #theySlider ul li { float: left; margin: 0 20px 0 15px; background: #e4f3ef } div.navi { height: 40px; width: 130px; position: absolute; right: 0 } div.navi a { float: left; width: 20px; height: 12px; background: url(../images/navigator.png) no-repeat center 0; font-size: 1px } div.navi a.active { height: 32px; width: 32px; background-position: center -12px; position: relative; top: -5px } /* Head Images */ .headimage { width: 940px; height: 190px; margin-top: 8px; } body.despre #headimage, body.servicii #headimage, body.proiecte #headimage, body.sustinatori #headimage, body.multimedia #headimage, body.implicate #headimage { background-image: url(../images/gallery/img06-head.jpg) } /* MULTIMEDIA */ #imagegallery { position: relative; width: 100%; } #imagegallery .categoriesarea { width: 590px; } #imagegallery .img-stats { position: absolute; right: 0; top: 5px } #imagegallery #copyright { font-size: 11px; line-height: 14px; margin-top: 60px; } #imagegallery #copyright a { color: #535353 } #imagegallery #copyright a:hover { color: #ff372c } #imagegallery .categories { color: white; } #imagegallery .categories a { font-size: 18px; color: white } #imagegallery .categories a:hover { text-decoration: none } #imagegallery .col1 td { padding: 0 5px 10px 0 } #imagegallery .col2 td { padding: 0 0 10px 5px } #imagegallery .col1 .categories { background: #199b7a; padding: 10px; } #imagegallery .col2 .categories { background: #199b7a; padding: 10px; } #imagegallery .cat { position: relative } #imagegallery .subcategories { background: #ff372c url(../images/subcat-arrow-down.png) no-repeat 30px 0; color: white; padding: 10px 0; /*position: absolute; left: 0; top:42px; z-index:100; width: 304px;*/ } #imagegallery .subcategories a { color: white; font-weight: bold; display: block; margin-left: 20px; padding: 7px 0 } #imagegallery .subcategories a:hover { text-decoration: none } .selectcat { margin-top: 20px; } .selectcat .button { border: none; background: url(../images/selectbox-go.png) no-repeat left top; font-size: 18px; font-weight: bold; color: white; padding: 8px 0; width: 59px; cursor: pointer } .listimages td { vertical-align: middle; text-align: center; padding: 10px 0} .listimages td a { display: block; margin: 10px; padding: 10px; background: #e4f3ef; } /* Select box */ #imagegallery .selectcat { position: relative; z-index: 1000 } #imagegallery .selectbox { cursor: pointer; font-size: 18px; font-weight: bold; width: 524px; padding: 8px 10px; background: transparent url(../images/selectbox.png) no-repeat left top; border: none; color: white; } #imagegallery .selectbox-wrapper ul { position: absolute; top: 38px; left:0; z-index: 20000; background: #ff372c; height: 300px; width: 520px; overflow: auto; } #imagegallery .selectbox-wrapper ul li { background: none; padding: 2px 0 2px 10px; cursor: pointer; color: white } #imagegallery .selectbox-wrapper ul li.selected, #imagegallery .selectbox-wrapper ul li:hover { background: #199b7a!important } /* Footer */ #footer { margin-top: 20px; height: 120px; width: 900px; position: relative; } #footer a { font-weight: bold; margin: 0 15px 0 0 } #footer .copy { margin-top: 7px } #footer .credits { position: absolute; right:0; top: 33px; } #footer .credits a { font-weight: normal; margin: 0 0 0 30px; float: left } /* Corners */ #imagegallery .col1 .categories, #imagegallery .col2 .categories { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; /*-moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px;*/ -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; } #imagegallery .col1 .subcategories, #imagegallery .col2 .subcategories { /* -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius:5px;*/ -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; }