/** * Location: layout/default/style.css * *********** * * CSS opsætning af default-templaten, ved visning på skærmen. */ /** * RESET * ********** * * Nulstiller alle standard-styles, så alle browsere har samme udgangspunkt. */ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;} ul,ol {list-style:none;} fieldset,img {border:none;} caption,th {text-align:left;} table {border-collapse:collapse; border-spacing:0;} /** * OPSÆTNING AF LAYOUT * ********** * * Opsætning af det overordnede design (placering og opsætning menu, logo, indholdsfelt, footer mv.) */ html, body {height:100%; margin:0; padding:0; background:#000000; color:#FFFFFF;} #container {height:auto !important; height:100%; min-height:100%; position:relative; font:11px/1em arial,sans-serif; color:#FFFFFF;} #container_margins {width:940px; margin:0 auto; padding:30px 0 100px 0;} #header {height:54px; padding:0 30px 30px 30px; border-bottom:2px solid #FFFFFF;} #header #logo {float:right; width:199px; height:54px; background:url(images/plast-team.gif) no-repeat; text-indent:-1000em;} #menu {padding-top:12px;} #menu li {float:left; margin-right:10px;} #menu a {position:relative; float:left; height:14px; padding:7px 9px; background:url(images/menu.gif) repeat-x 0 -200px; font:bold 14px/14px arial,sans-serif; text-decoration:none; color:#FFFFFF;} #menu a img.left {position:absolute; top:0; left:-1px; width:6px; height:28px; background:url(images/menu.gif) no-repeat 0 -200px;} #menu a img.right {position:absolute; top:0; right:-1px; width:6px; height:28px; background:url(images/menu.gif) no-repeat 0 -200px;} #menu a:hover {background-position:0 -28px;} #menu a:hover img.left {background-position:0 -56px;} #menu a:hover img.right {background-position:0 -84px;} #menu a.active {background-position:0 0 !important; color:#EE3324;} #menu a.active img.left {background-position:0 -112px !important;} #menu a.active img.right {background-position:0 -140px !important;} #middle {margin-top:30px; line-height:1.35em;} #submenu {position:relative; overflow:hidden; height:128px; margin-bottom:30px; border-bottom:2px solid #FFFFFF; line-height:1em;} #submenu #submenu_wrapper {position:absolute; top:0; left:0; width:50000px;} #submenu ul {position:absolute; top:0; left:30px; z-index:1;} #submenu li {float:left; display:inline; margin-right:30px; text-align:center; text-transform:uppercase;} #submenu a {text-decoration:none;} #submenu a.active {color:#EE3324;} #submenu a:hover {color:#EE3324;} #submenu img {display:block; height:75px; margin:0 auto; padding-bottom:20px;} *+html #submenu img {margin:0 !important;} #submenu_slider {position:absolute; top:128px; left:21px; width:898px; height:22px; background:url(images/submenu/bg.gif) no-repeat; display:none;} #submenu_slider div {position:absolute; top:3px; left:2px; width:128px; height:16px; background:url(images/submenu/slider.gif); cursor:pointer;} #submenu_left {position:absolute; top:128px; left:0; width:21px; height:22px; background:url(images/submenu/left.gif) no-repeat; cursor:pointer;} #submenu_right {position:absolute; top:128px; right:0; width:21px; height:22px; background:url(images/submenu/right.gif) no-repeat; cursor:pointer;} #submenu_fade_left {position:absolute; top:0; left:0; z-index:2; width:30px; height:128px; background:url(images/submenu/wrapper-l.png) repeat-y;} #submenu_fade_right {position:absolute; top:0; right:0; z-index:2; width:30px; height:128px; background:url(images/submenu/wrapper-r.png) repeat-y;} #left {float:left; width:197px; line-height:1em;} #left ul {margin-left:23px;} #left ul li {clear:both; height:auto;} #left ul a {float:left; margin-bottom:5px; padding:5px 8px; font:11px/1em arial,sans-serif; text-decoration:none; background:#000000;} #left ul a:hover {color:#EE3324;} #left ul a.active {position:relative; padding:5px 7px; background:#FFFFFF; border-left:1px solid #969696; border-right:1px solid #969696; color:#EE3324; font-weight:bold;} #left ul a.active img.left-top {position:absolute; top:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 0;} #left ul a.active img.left-bottom {position:absolute; bottom:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 -11px;} #left ul a.active img.right-top {position:absolute; top:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px 0;} #left ul a.active img.right-bottom {position:absolute; bottom:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px -11px;} #right {float:right; width:651px; margin-right:31px; text-align:justify;} #footer {position:absolute; bottom:30px; margin:0; padding:0; line-height:1em;} #footer li {float:left; position:relative; margin-right:30px;} #footer a {text-decoration:none;} #footer #footer_logo {font-weight:bold; color:#EE3324;} #footer #footer_login {background:url(images/footer.gif) no-repeat 0 2px; padding-left:15px; font-weight:bold;} #footer #footer_language {background:url(images/footer.gif) no-repeat 0 -20px; padding-left:12px; font-weight:bold;} #footer div {position:absolute; bottom:20px; right:0; visibility:hidden; width:100px; padding:10px 10px 3px 10px; background:#FFFFFF; border-left:1px solid #969696; border-right:1px solid #969696;} #footer div a {display:block; margin-bottom:7px; color:#000000;} #footer div a:hover span {text-decoration:underline;} #footer div a img {position:relative; top:2px; height:12px; width:16px; padding-right:5px; text-decoration:none !important;} #footer div img.wrapper-tl {position:absolute; top:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 0;} #footer div img.wrapper-tr {position:absolute; top:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px 0;} #footer div img.wrapper-bl {position:absolute; bottom:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 -11px;} #footer div img.wrapper-br {position:absolute; bottom:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px -11px;} /** * DIVERSE ELEMENTER * ********** * * Opsætning af diverse standard elementer og klasser. */ a {outline:0; color:#FFFFFF;} p {margin-top:1em;} h1 {font:bold 34px/1em arial,sans-serif; margin-bottom:20px; text-align:left;} h1 + p {margin-top:0;} h2 {margin-bottom:5px; font:18px/1em arial,sans-serif;} h2 + p {margin-top:0;} img.full {width:651px; margin:20px 0 30px 0;} img.full + p {margin-top:0;} a.more {float:left; position:relative; margin-top:1em; padding:5px 7px; background:#FFFFFF; font:11px/1em arial,sans-serif; text-decoration:none; font-weight:bold; color:#EE3324;} a.more img.left {position:absolute; top:0; left:-1px; width:5px; height:21px; background:url(images/submenu.gif) no-repeat 0 0;} a.more img.right {position:absolute; top:0; right:-1px; width:5px; height:21px; background:url(images/submenu.gif) no-repeat -5px 0;} .clear {clear:both; font:0/0 serif; height:0;} /** * FORSIDEN * ********** * * Opsætning af elementerne på forsiden */ div#index {padding-top:30px; background:url(images/index/bg.gif) no-repeat center top;} div#index div.left {float:left; height:50px; margin-bottom:30px; padding:30px; border-right:2px solid #FFFFFF;} div#index div.right {float:left; margin:0 0 30px 30px; padding:10px 0; font:16px/1.4em arial,sans-serif;} a#index_catalogue {float:right;} a#index_catalogue {width:228px; height:298px;} div#slider {float:left; overflow:hidden; position:relative; z-index:1; width:680px; height:300px;} img#slider_overlay {position:absolute; top:0; left:0; width:680px; height:300px; z-index:2; background:url(images/index/slider.png) no-repeat;} div#slider_wrapper {position:absolute; top:0; left:0; z-index:1;} div#slider_wrapper div.slide {position:absolute; top:0; left:0; width:680px; height:300px; background-repeat:no-repeat; background-position:center center;} div#slider_wrapper2 {position:absolute; top:0; left:0; z-index:3;} div#slider_wrapper2 div.slide {position:absolute; top:20px; left:400px; width:250px;} div#slider_wrapper2 div.slide h2 {margin-bottom:20px; font:bold 28px/1em arial,sans-serif;} div#slider_wrapper2 div.slide p {text-align:justify;} div#slider_wrapper2 div.slide a {float:left; position:relative; margin-top:30px; padding:7px 4px; background:#FFFFFF; border-left:1px solid #969696; border-right:1px solid #969696; font:bold 14px/1em arial,sans-serif; text-decoration:none; color:#EE3324;} div#slider_wrapper2 div.slide a img.left {position:absolute; top:0; left:-7px; width:7px; height:28px; background:url(images/index/more-left.png) no-repeat;} div#slider_wrapper2 div.slide a img.right {position:absolute; top:0; right:-7px; width:7px; height:28px; background:url(images/index/more-right.png) no-repeat;} div#slider_indicator {position:absolute; top:266px; right:20px; z-index:3;} div#slider_indicator img {width:20px; height:20px; margin-right:10px; background:url(images/index/slider_indicator.png) no-repeat; cursor:pointer;} /** * PRODUKTER * ********** * * Opsætning af listen over produkter, søgning mv. */ div#options {margin-bottom:30px;} div#paging {float:left; font-size:13px;} div#paging span {float:left; padding:5px 0;} div#paging a {float:left; margin-left:15px; padding:5px; text-decoration:none;} div#paging a:hover {color:#EE3324;} div#paging b {position:relative; float:left; margin-left:20px; padding:4px 8px; background:#FFFFFF; border-left:1px solid #969696; border-right:1px solid #969696; color:#EE3324;} div#paging b img.wrapper-tl {position:absolute; top:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 0;} div#paging b img.wrapper-tr {position:absolute; top:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px 0;} div#paging b img.wrapper-bl {position:absolute; bottom:0; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 -11px;} div#paging b img.wrapper-br {position:absolute; bottom:0; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px -11px;} div#search_for {margin-top:20px; font-size:13px;} form#search {float:right; padding:0; margin:0;} form#search p {margin:0;} form#search p.input_text {float:left; width:111px; height:18px; margin-right:5px; padding:2px 5px; background:url(images/search2.gif) no-repeat;} form#search p.input_text input {width:111px; height:14px; padding:2px 0; background:none; border:0; font-size:11px; line-height:1em; color:#FFFFFF;} form#search p.input_submit {float:left;} div.product {float:left; position:relative; width:451px; margin-bottom:30px; border:2px solid #FFFFFF;} div.product .left {float:left; position:relative; width:155px; padding-bottom:20px; background:#FFFFFF; border-right:6px solid #000000;} div.product .left img.img {display:block; margin:10px auto; cursor:pointer;} div.product .left p {position:absolute; bottom:5px; left:0; width:100%; text-align:center; font-weight:bold; color:#000000;} div.product .left img.wrapper-t {position:absolute; top:0; right:-6px; width:6px; height:4px; background:url(images/products.gif) no-repeat 0 -12px;} div.product .left img.wrapper-b {position:absolute; bottom:0; right:-6px; width:6px; height:4px; background:url(images/products.gif) no-repeat 0 -16px;} div.product .right {position:relative; float:left; width:243px; padding:15px 20px 35px 20px;} div.product .right h4 {margin:0 0 10px 0; padding:0 0 10px 0; height:26px; border-bottom:2px solid #FFFFFF; font:13px/1em arial,sans-serif; text-transform:uppercase;} div.product .right h4 span {color:#EE3324;} div.product .right p {margin:0 0 5px 0;} div.product .right p img {position:relative; top:2px; height:12px; width:16px; margin-right:3px;} div.product .right .product_options {position:absolute; bottom:10px; left:20px;} div.product .right .product_options a {margin-right:10px; padding-left:7px; background:url(images/arrow.gif) no-repeat 0 center; text-decoration:none;} div.product img.wrapper-tl {position:absolute; top:-2px; left:-2px; width:6px; height:6px; background:url(images/products.gif) no-repeat 0 0;} div.product img.wrapper-tr {position:absolute; top:-2px; right:-2px; width:6px; height:7px; background:url(images/products.gif) no-repeat 0 -20px;} div.product img.wrapper-bl {position:absolute; bottom:-2px; left:-2px; width:6px; height:6px; background:url(images/products.gif) no-repeat 0 -6px;} div.product img.wrapper-br {position:absolute; bottom:-2px; right:-2px; width:49px; height:32px; background:url(images/products.gif) no-repeat 0 -27px; cursor:pointer;} div#product_popup {position:absolute; top:10px; left:10px; width:500px; padding:20px; z-index:1000000; background:#FFFFFF; border:1px solid #969696; color:#000000;} div#product_popup h2 {margin-bottom:5px; text-transform:uppercase;} div#product_popup h2 span {color:#EE3324;} div#product_popup img.logo {float:right; width:100px; height:28px;} div#product_popup p {margin-bottom:20px; padding-bottom:20px; border-bottom:2px solid #000000; font:12px/1em arial,sans-serif;} div#product_popup img.img {display:block; margin:0 auto 0 auto; cursor:pointer;} div#product_popup a {float:right; margin-left:15px; padding-left:7px; background:url(images/arrow2.gif) no-repeat 0 center; text-decoration:none; font:bold 11px/1em arial,sans-serif; color:#000000;} div#product_popup img.wrapper-tl {position:absolute; top:-1px; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 0;} div#product_popup img.wrapper-tr {position:absolute; top:-1px; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px 0;} div#product_popup img.wrapper-bl {position:absolute; bottom:-1px; left:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat 0 -11px;} div#product_popup img.wrapper-br {position:absolute; bottom:-1px; right:-1px; width:5px; height:10px; background:url(images/submenu.gif) no-repeat -5px -11px;} /** * INSPIRATION * ********** * * Opsætning af listen med inspirations-billeder */ div.inspiration {margin-bottom:30px;} div.inspiration img {width:940px;} div.inspiration p {margin:10px 0 0 0;} /** * KONTAKTPERSONER * ********** * * Opsætning af listen over kontaktpersoner. */ div.contactperson {float:left; width:197px; margin:0 30px 30px 0; text-align:left;} div.contactperson img {display:block; margin-bottom:30px;} div.contactperson p.title {margin-bottom:20px; color:#EE3324;} div.contactperson a {text-decoration:none;} /** * sIFR * ********** * * CSS-default opsætning af sIFR. */ /* These are standard sIFR styles... do not modify */ .sIFR-flash {visibility:visible !important;margin:0;} .sIFR-replaced {visibility:visible !important;} span.sIFR-alternate {position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden;} /* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */ .sIFR-flash + div[adblocktab=true] {display:none !important;} /* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */ .sIFR-hasFlash h1 {visibility:hidden; line-height:1.1em; letter-spacing:-2px;} .sIFR-hasFlash div#index div.right {letter-spacing:-2px;} /*.sIFR-hasFlash h2 {visibility:hidden; letter-spacing:-9px; font-size:55px;}*/