/* CREDITS * ---------------------------------------------------------- * Title: Europlanetarium - Screen Stylesheet * Author: Dirk Bonhomme * Date: 26/01/10 * ---------------------------------------------------------- * Inventis - Web Architects - We design the Web! * www.inventis.be */ /* Reset ---------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal; } ol,ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } strong,b{ font-weight:bold; } em{ font-style:italic; } em strong,strong em { font-weight: bold; font-style: italic; } abbr,acronym{ border-bottom:1px dotted; cursor:help; } button{ cursor:pointer; } /* General elements ---------------------------------------------------------- */ textarea, body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #262626; } html { background: #000 url(../../images/layout/html_background.jpg) top no-repeat; } body { background: url(../../images/layout/body_background.jpg) bottom no-repeat; padding: 63px 0 185px; min-height: 950px; } .clear { clear:both; } .hidden { display: none; } a:focus { outline:none; } a.more { color: #b8981a; position: absolute; font-size: 11px; white-space: nowrap; } a.more:hover { text-decoration: none; } p.back { clear: both; padding-top: 20px; text-align: right; line-height: 23px; } p.back a { color: #03478A; text-decoration: underline; } p.back a:hover { text-decoration: none; } p.empty { clear: both; margin: 15px 0; padding: 10px; background: #f3f9fd; } /* Container ---------------------------------------------------------- */ #container { background: #FFF url(../../images/layout/container_top.png) left top no-repeat; width: 952px; margin: 0 auto; } #container #subcontainer { background: url(../../images/layout/container_bottom.png) left bottom no-repeat; padding: 0 25px 20px; width: 902px; position: relative; } #container h1 { font-size: 16px; color: #004990; text-transform: uppercase; } #container h1 em { color: #B8981A; margin-right: 5px; font-style: normal; } /* block */ #container div.block { overflow: hidden; margin-top: 20px; height: 100%; } /* imagelist */ #container div.imagelist { width: 214px; float: left; margin-right: 18px; overflow: hidden; } #container div.imagelist ul { width: 224px; } #container div.imagelist ul li { float: left; margin: 0 10px 10px 0; width: 102px; height: 102px; } #container div.imagelist ul li.first { width: 214px; height: auto; } #container div.imagelist ul li a { display: block; } #container div.imagelist ul li a img { display: block; border: 3px solid #e3f1f8; width: 96px; height: 96px; } #container div.imagelist ul li.first a img { width: 208px; height: auto; } #container div.imagelist ul li a:hover img { border-color: #f3ffff; } /* login form */ #container form.login_form { z-index: 500; position: absolute; top: 29px; right: 31px; width: 361px; height: 151px; background: url(../../images/layout/login_form.png); } #container form.login_form fieldset { padding: 31px 16px 0 0; } #container form.login_form fieldset div.entry { clear: both; margin-bottom: 8px; overflow: hidden; height: 100%; } #container form.login_form fieldset div.entry label { width: 141px; text-align: right; font-weight: bold; float: left; line-height: 25px; } #container form.login_form fieldset div.entry input { width: 192px; border: 1px solid #9db1be; float: right; padding: 2px; margin-top: 2px; } #container form.login_form fieldset div.entry p { float: left; width: 141px; text-align: right; line-height: 15px; } #container form.login_form fieldset div.entry p a { color: #004990; text-decoration: none; } #container form.login_form fieldset div.entry p a:hover { text-decoration: underline; } #container form.login_form fieldset div.entry button { width: 110px; height: 22px; text-indent: -999px; border: 0; overflow: hidden; cursor: pointer; padding: 0; background: url(../../images/layout/buttons/login.png); float: right; } /* list */ #container div.list h2 { font-size: 14px; font-weight: bold; color: #004990; margin: 13px 0 0; } #container div.list ol li { padding: 21px 13px 21px 12px; background: url(../../images/layout/horizontal_line.png) left bottom repeat-x; height: 100%; overflow: hidden; float: left; clear: both; position: relative; } #container div.list ol li.first { padding-top: 10px; } #container div.list ol li.even { background-color: #f3f9fd; } #container div.list ol li h3 { font-size: 14px; font-weight: bold; color: #b8981a; margin: 0 0 7px; padding-right: 100px; } #container div.list ol li h3 em { font-style: normal; color: #03478a; font-weight: bold; } #container div.list ol li h3 a { color: #b8981a; text-decoration: none; } #container div.list ol li h3 a:hover { text-decoration: underline; } #container div.list ol li div.image { float: left; width: 101px; margin-right: 12px; } #container div.list ol li div.image a img { display: block; border: 3px solid #e3f1f8; } #container div.list ol li div.image a:hover img { border-color: #f3ffff; } #container div.list ol li div.content { float: left; width: 510px; padding-bottom: 20px; } #container div.list ol li div.content p { color: #4f4f4f; line-height: 17px; } #container div.list ol li div.content ul.actions { position: absolute; bottom: 21px; left: 125px; } #container div.list ol li div.content ul.actions li { float: left; clear: none; padding: 0; background: transparent none; height: auto; position: static; margin-right: 13px; font-size: 11px; } #container div.list ol li div.content ul.actions li a { color: #03478a; text-decoration: underline; line-height: 16px; font-weight: normal; } #container div.list ol li div.content ul.actions li a:hover { text-decoration: none; } #container div.list ol li div.content ul.actions li.replies a { padding-left: 18px; background: url(../../images/layout/icons/replies.png) left no-repeat; } #container div.list ol li div.content ul.actions li.tags { font-weight: bold; color: #4f4f4f; background: url(../../images/layout/icons/tag.gif) left no-repeat; padding-left: 21px; } #container div.list ol li div.content ul.actions li.tags a { margin-right: 2px; } #container div.list ol li div.content ul.labels { position: absolute; top: 15px; right: 7px; } #container div.list ol li div.content ul.labels li { float: left; clear: none; padding: 0; background: transparent none; height: auto; position: static; margin-right: 1px; } #container div.list ol li div.content ul.labels li a { color: #03478a; text-decoration: none; font-size: 11px; line-height: 15px; float: left; border: 1px solid #a2bed1; padding: 0 3px; background: #f3f9fd; font-weight: normal; } #container div.list ol li div.content ul.labels li a:hover { background-color: #FFF; } #container div.list ol li div.content a.more { color: #004990; padding-right: 12px; background: url(../../images/layout/more_bullet.png) right no-repeat; bottom: 24px; right: 14px; } /* pagination */ #container ol.pagination { text-transform: uppercase; color: #004990; text-align: center; line-height: 20px; clear: both; top: 18px; position: relative; } #container ol.pagination li { display: inline; border: 1px solid #a2bed1; padding: 2px 0; } #container ol.pagination li.current { background: #004990; color: #f3f9fd; padding: 2px 4px; } #container ol.pagination li:hover { background: #004990; color: #f3f9fd; } #container ol.pagination li a { text-decoration: none; color: #004990; padding: 0 4px; } #container ol.pagination li:hover a { color: #f3f9fd; } /* Header ---------------------------------------------------------- */ #header { height: 84px; position: relative; width: 100%; } /* logo */ #header div.logo { position: absolute; top: -18px; left: 0; } /* login */ #header div.login { float: right; height: 16px; line-height: 16px; margin: 12px 9px 0 0; text-align: right; padding-left: 45px; display: inline;} #header div.login a { color: #03478a; text-decoration: none; } #header div.login a:hover { text-decoration: underline; } #header div.login a.login, #header div.login a.logout { font-size: 13px; text-transform: uppercase; cursor: pointer; } #header div.login a.logout { margin-left: 15px; } /* share */ #header div.share { float: right; margin-top: 12px; position: relative; } #header div.share div.overlay { position: absolute; width: 125px; height: 16px; left: 0; top: 0; cursor: pointer; } /* search */ #header form.search { float: right; clear: right; margin: 15px 6px 0 0; display: inline; } #header form.search fieldset { float: left;} #header form.search fieldset input { width: 146px; border: 1px solid #d0d2d4; color: #96b1cf; padding: 2px; float: left; margin-right: 8px; } #header form.search fieldset button { border: 0; cursor: pointer; padding: 0; text-align: right; margin: 0; color: #8a6f03; text-transform: uppercase; background: none; font-size: 13px; } /* Navigation ---------------------------------------------------------- */ #navigation { z-index: 300; } /* main */ #navigation ul.main { background: url(../../images/layout/navigation_main_background.png) top repeat-x; display: table; width: 100%; } #navigation ul.main li { display: table-cell; font-size: 13px; line-height: 36px; height: 36px; text-align: center; padding: 0 6px; vertical-align: middle; } #navigation ul.main li a { color: #03478a; text-decoration: none; text-transform: uppercase; } #navigation ul.main li a:hover, #navigation ul.main li.active a { color: #968024; } #navigation ul.main li.active { background: url(../../images/layout/navigation_main_active.png) center 30px no-repeat; } /* submenu */ #navigation ul.submenu { clear: both; border: solid #d7e9f5; border-width: 0 1px 1px; height: 26px; width: 900px; } #navigation ul.submenu li { position: relative; float: left; background: #f7fbfe; color: #074e93; cursor: pointer; height: 26px; line-height: 26px; padding: 0 13px; text-align: center; border-right: 1px solid #d7e9f5; } #navigation ul.submenu li.active { font-weight: bold; } #navigation ul.submenu li a { color: #074e93; text-decoration: none; } #navigation ul.submenu li a:hover, #navigation ul.submenu li.active a { color: #968024; } /* dropdown */ #navigation ul.submenu li ul.dropdown { z-index: 600; display: none; position: absolute; border: 1px solid #d7e9f5; background: #e1f0fa; padding: 7px 13px; left: 0; top: 26px; } #navigation ul.submenu li:hover ul.dropdown { display: block; } #navigation ul.submenu li ul.dropdown li { position: static; background: transparent; float: none; height: auto; line-height: 19px; padding: 0; text-align: left; border: 0; white-space: nowrap; } #navigation ul.submenu li ul.dropdown li a { color: #4f4f4f; font-size: 11px; text-decoration: none; font-weight: normal; } #navigation ul.submenu li ul.dropdown li a:hover { text-decoration: underline; } /* Breadcrumbs ---------------------------------------------------------- */ #breadcrumbs { overflow: hidden; border-bottom: 1px solid #d7e9f5; width: 902px; } #breadcrumbs ol { width: 100%; padding: 0 15px; } #breadcrumbs ol li { float: left; margin-right: 4px; line-height: 23px; color: #9e9e9e; font-size: 11px; } #breadcrumbs ol li a { float: left; background: url(../../images/layout/breadcrumb_bullet.png) right no-repeat; padding-right: 9px; color: #9e9e9e; text-decoration: none; } #breadcrumbs ol li a:hover { text-decoration: underline; } /* Sidebar ---------------------------------------------------------- */ #sidebar { float: right; clear: right; width: 225px; background: url(../../images/layout/sidebar_background.png) left repeat-y; margin-top: 35px; overflow: hidden; } #sidebar div.top { background: url(../../images/layout/sidebar_top.png) top no-repeat; } #sidebar div.bottom { background: url(../../images/layout/sidebar_bottom.png) bottom no-repeat; padding: 18px 16px 15px 20px; height: 100%; overflow: hidden; } /* item */ #sidebar div.item { width: 189px; margin-bottom: 51px; position: relative; } #sidebar div.item h2 { color: #ffffff; font-size: 16px; text-transform: uppercase; } #sidebar div.item ul { overflow: hidden; } #sidebar div.item ul li { border-bottom: 1px solid #e3f1f8; margin-top: 5px; padding-bottom: 10px; overflow: hidden; width: 189px; position: relative; } #sidebar div.item ul li h3 { font-size: 13px; color: #afdaf3; text-transform: none; margin-bottom: 4px; clear: both; } #sidebar div.item ul li h3 a { color: #afdaf3; text-decoration: none; } #sidebar div.item ul li h3 em { font-style: normal; color: #ffffff; margin-right: 3px; } #sidebar div.item ul li div.image { float: left; width: 66px; height: 66px; margin: 3px 10px 0 0; } #sidebar div.item ul li div.image a { border: 1px solid #b5c9d9; display: block; } #sidebar div.item ul li div.image a img { border: 2px solid #e3f1f8; display: block; width: 60px; height: 60px; } #sidebar div.item ul li div.image a:hover img { border-color: #f3ffff; } #sidebar div.item ul li div.content { float: left; width: 113px; padding-bottom: 20px; } #sidebar div.item ul li div.content strong { display: block; color: #FFF; line-height: 17px; } #sidebar div.item ul li div.content p { color: #FFF; line-height: 17px; } #sidebar div.item ul li div.content a.replies { display: block; color: #afdaf3; font-size: 11px; text-decoration: none; padding-left: 18px; line-height: 18px; background: url(../../images/layout/icons/replies.png) left no-repeat; } #sidebar div.item ul li div.content a.replies:hover { text-decoration: underline; } #sidebar div.item ul li div.content a.more { bottom: 11px; left: 76px; } #sidebar div.item a.more { bottom: -20px; right: 0; } /* info */ #sidebar div.info { width: 205px; margin: 0 0 51px -2px; position: relative; line-height: 18px; } #sidebar div.info h2 { color: #ffffff; font-size: 16px; text-transform: uppercase; } #sidebar div.info address { font-style: normal; color: #ffffff; line-height: 17px; margin: 6px 0 26px; } #sidebar div.info address strong { color: #afdaf3; } #sidebar div.info address a { color: #ffffff; } #sidebar div.info address a:hover { text-decoration: none; } #sidebar div.info a.more { position: static; margin-bottom: 2px; } /* downloads */ #sidebar div.downloads { width: 189px; position: relative; } #sidebar div.downloads h2 { color: #ffffff; font-size: 16px; text-transform: uppercase; } #sidebar div.downloads ul li { border-bottom: 1px solid #e3f1f8; padding: 7px 0; margin-top: 10px; } #sidebar div.downloads ul li.last { border-bottom: 0; margin-top: 0; } #sidebar div.downloads ul li h3 { font-weight: bold; color: #afdaf3; } #sidebar div.downloads ul li ol li { border: 0; line-height: 17px; padding: 0; margin: 0; } #sidebar div.downloads ul li ol li a { color: #afdaf3; text-decoration: none; } #sidebar div.downloads ul li ol li a:hover { text-decoration: underline; } /* navigation */ #sidebar div.navigation ul { padding: 2px 0 30px; } #sidebar div.navigation ul li { line-height: 24px; } #sidebar div.navigation ul li a { color: #afdaf3; font-weight: bold; text-decoration: none; } #sidebar div.navigation ul li.active a { color: #FFF; } #sidebar div.navigation ul li a:hover { text-decoration: underline; } /* Footer ---------------------------------------------------------- */ #footer { width: 903px; margin: 5px auto 0; clear: both; color: white; overflow: hidden; line-height: 22px; } /* address */ #footer address { float: left; } #footer address a { color: #FFF; } #footer address a:hover { text-decoration: none; } /* credits */ #footer a.credits { color: #FFF; float: right; width: 74px; text-indent: -999px; overflow: hidden; height: 22px; background: url(../../images/layout/credits.png) 0 0 no-repeat; } #footer a.credits:hover { background-position: 0 -22px; }