/* * Main CSS - default modul styles * */ /* ========================================================================== Page Container ========================================================================== */ /** * HEAD **/ #header { color:#fff; } #header h1.headline { background: url("../images/icons/cosnova_logo.jpg") no-repeat; background-size:150px 150px; font-size:0px; color:#fff; width:150px; height:129px;} #header h1.headline a {display:block; width:150px;height:129px; } /** HEADER main-menu **/ #header #header-main-menu { width:800px; float:right; display:block; padding:0px; margin:-10px 0px 0px 0px;} #header #header-main-menu ul {} #header #header-main-menu ul li{ font-family:Gotham-Light; font-size:1.2em; float:left; padding-left:15px; padding-right:15px; text-align:center; border-left:1px solid #cecece;} #header #header-main-menu ul li.active{ font-weight:bold; font-size:1.3em; margin-top:-5px; } #header #header-main-menu ul li.active a{ color: #D50057 !important; font-weight:bold;} /** HEADER short-menu **/ #header .short-menu { float:left; margin-top:5px; margin-left:50px; } #header .short-menu li.first { margin-left:15px;} #header .short-menu li { float:left; margin-left:5px; margin-right:5px; height:20px; width:20px; font-size:0px;} #header .short-menu li a { display:block; height:20px; width:20px; font-size:0px;} #header .short-menu li.home { background: url("../images/icons/short-nav-icons.png"); background-position: 0px 0px; } #header .short-menu li.home:hover, #header .short-menu li.home.active { background-position: 0px 20px; } #header .short-menu li.user { background: url("../images/icons/short-nav-icons.png"); background-position: -20px 0px; } #header .short-menu li.user:hover, #header .short-menu li.user.active { background-position: -20px 20px; } #header .short-menu li.countly { background: url("../images/icons/short-nav-icons.png"); background-position: -100px 0px;} #header .short-menu li.countly:hover, #header .short-menu li.countly.active { background-position: -100px 20px; } /** HEADER header-menu **/ #header .header-menu { width:350px; float:right; margin-top:5px; font-family:Gotham-Light;} #header .header-menu li { float:right; margin-left:5px; margin-right:5px;} #header .header-menu li.login { font-weight:bold; position:relative;} #header .header-menu li.logout { height:30px; font-weight:bold; background: url("../images/icons/door_closed.png") no-repeat; padding-top:1px;padding-right:30px; background-position: 74px 0px; } /** HEADER login-box **/ #header #login-box { left:-143px; width:220px; position:absolute; color:#fff; font-size:0.8em; font-family:Gotham-Light; filter: alpha(opacity = 90); /* IE 6, 7, 8 */ -ms-filter: "alpha(opacity = 90)"; /* ab IE 8 zusätzlich möglich */ opacity: .90; /* alle anderen Browser einschließlich IE 9 */} #header #login-box a { color:#dedede; } #header #login-box a:hover { color:#D893A7; } #header #login-box .form .row { margin-bottom:15px;} #header #login-box .form input { width:100%;} #header #login-box .form label { display:block; width:100%; text-align:left !important;} #header #login-box div.head{ background: url("../images/icons/arrow-up-grey.png") no-repeat; width:10px;height:10px; margin-left:165px;} #header #login-box div.content{ padding:15px 15px 10px 15px;; background-color: #313131; height:180px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;} #header #login-box div.content #ajaxSubmitButton { font-size:1.4em; border:0px;} #header #login-box div.content #ajaxSubmitButton:hover { color:#D50057;} #header #login-box .login-success{ font-size:1.8em; } {} #header #login-box .loginButton {margin:0px;} /** user selection */ #header .user-selection {position:absolute;margin-left:215px; top:55px; } #header .user-selection span.label { font-family:Gotham-Light; margin:4px 5px 0px 0px; font-weight:bold; font-size: 1.1em;} #header .user-selection .ui-selectmenu { margin-top: 25px; display:block; border-radius:0px;border:none; } #header .user-selection .ui-selectmenu-status { border:1px solid #cecece;} /** * col1 wrapper */ /** col1 main-menu **/ #col1-wrapper { color:#A2ABAB; border-right:1px solid #D6D7D6; height:100vh; } #col1-wrapper .menu-spacer { height:1px; display:block; position:relative; background:#ff0000;width:210px;margin: 10px 0px 10px -20px;background-image: -o-linear-gradient(right, #FFFFFF 0%, #D6D7D6 30%);background-image: -moz-linear-gradient(right, #FFFFFF 0%, #D6D7D6 30%);background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #D6D7D6 30%);background-image: -ms-linear-gradient(right, #FFFFFF 0%, #D6D7D6 30%);background-image: linear-gradient(to right, #FFFFFF 0%, #D6D7D6 30%);background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #FFFFFF),color-stop(0.3, #D6D7D6)); } #col1-wrapper .main-menu { font-size:0.9em; margin-bottom:25px; float:right; padding-right:5px; font-weight:bold; font-family:Gotham-Light;} #col1-wrapper .main-menu li { width:150px;} #col1-wrapper .admin-menu { font-size:0.9em; margin-bottom:25px; float:right; padding-right:5px; font-weight:bold; font-family:Gotham-Light;} #col1-wrapper .admin-menu li { width:130px;} /** col1 social-menu **/ #col1-wrapper .social-menu{ display:block; } #col1-wrapper .social-menu li { width:50px; height:50px; margin-left:20px; float:left; background: url("../images/icons/social-icons.png") no-repeat; font-size:0px;} #col1-wrapper .social-menu li a { width:50px; height:50px; display:block;} #col1-wrapper .social-menu li.facebook { background-position: 0px 0px; margin-left:30px;} #col1-wrapper .social-menu li.twitter { background-position: -50px 0px; } #col1-wrapper p { padding:15px 0px 0px 5px; } /** * col1 content warpper */ #col2-wrapper {} /** * Modules */ /** * cockpit module */ #col2-wrapper .wrapper-content.cockpit {} #col2-wrapper .wrapper-content.cockpit .modules-list .linkbox { margin-bottom:25px; } #col2-wrapper .wrapper-content.cockpit .modules-list .linkbox:hover a { color:#D50057; } #col2-wrapper .wrapper-content.cockpit .modules-list .linkbox h3 { font-size:1.3em; } #col2-wrapper .wrapper-content.cockpit .modules-list .linkbox:hover h3 { color:#D50057; } #col2-wrapper .wrapper-content.cockpit .modules-list .teaser-image { border: 7px solid #ddd; padding:25p; } #col2-wrapper .wrapper-content.cockpit .modules-list p {width:785px; padding:25px; } #col2-wrapper .wrapper-content.cockpit .modules-list p.more {width:auto; margin-top:10px; } #col2-wrapper .wrapper-content.cockpit .modules-list h3 { margin:0; background:#ddd; padding:25px; width:785px; font-family:Gotham-Light;} /** * feedback module */ #col2-wrapper .wrapper-content.feedback {} #col2-wrapper .wrapper-content.feedback .feedback-list {} #col2-wrapper .wrapper-content.feedback .feedback-list td { vertical-align:top; padding-bottom:20px;} #col2-wrapper .wrapper-content.feedback .feedback-list td { vertical-align:top; padding-bottom:20px;} /** delete confirm layer */ .wrapper-content.feedback .confirm { font-size:1.3em; text-align:center;} .wrapper-content.feedback .confirm a{ padding:6px; border:1px solid #cecece; } .wrapper-content.feedback .confirm .selection-spacer { margin-left:35px; margin-right:35px;} .wrapper-content.feedback td.message p {font-family:serif;} /** * stack module */ .wrapper-content.stack { } .wrapper-content.stack .wrapper-device { position:relative; margin:0 auto; width:390px; font-family: Helvetica; } .wrapper-content.stack #device {z-index:100; position: relative; height:746px; background: url(../images/etc/cosnova-app-device.png) no-repeat; margin-bottom:30px; } .wrapper-content.stack #device-bg { z-index:80; position:absolute; top:61px; left:31px; height:573px; width:325px; background: url(../images/etc/cosnova-app-bg.png) no-repeat;} .wrapper-content.stack #device-title { position:absolute; text-align:center; width:255px; font-size:1.6em; z-index:110; left:90px; top:82px; color: #8D267F; font-weight:lighter;} .wrapper-content.stack #stages { z-index:110; position:absolute; top:150px; left:31px; width:325px; } .wrapper-content.stack #stages ul { position:relative; width:320px; height:340px; overflow:hidden; } .wrapper-content.stack #stages ul li{ margin-top:15px; margin-bottom:55px; width:248px; float:left; margin-left:40px;height:276px; border:2px solid #fff; border-radius:10px; position:relative;} .wrapper-content.stack #stages ul li.current { } .wrapper-content.stack #stages ul li h3 { position:absolute; bottom:5px; width:247px; margin:0px; text-align:center; color:#fff; font-size: 16px; font-weight:normal;} .wrapper-content.stack #stages ul li input.editHeadline { position:absolute; bottom:4px; left:-3px; width:247px; margin:0px; text-align:center;background:none; border:none; color:#fff; font-size: 16px; font-weight:normal;} .wrapper-content.stack #stages ul li textarea.editContent { line-height:18px; position:absolute; top:-3px; left:-3px; box-shadow: none; width:178px; height:178px; font-size: 1.0em; padding:20px; margin:8px; background:#fff; border:10px solid #fff; border-radius:10px; color:#000; font-weight:normal;} .wrapper-content.stack #stages ul li img { z-index:120; border:10px solid #fff; border-radius:10px; margin: 4px 4px 0px 4px; position:relative; } .wrapper-content.stack #stages ul li img:hover { border:10px solid #D50057; cursor:pointer; } .wrapper-content.stack #stages ul li p { width:178px; overflow-y:scroll; z-index:110; margin:5px; height:178px; position:absolute; top:0px; padding:20px; background: #fff; border:10px solid #fff; border-radius:10px; } .wrapper-content.stack #stages ul li div.close { color: #fff; z-index : 130;position: absolute; font-size: 1.0em;text-align: center; line-height: 41px; background-color: #8D267F;border-radius: 3.25em;-webkit-border-radius: 3.25em;height: 40px;width: 40px;top: -15px;right: -15px;z-index: 130; } /** stage item submenu **/ .wrapper-content.stack #stages ul li div.product-submenu { position:absolute; bottom:-45px; z-index:110; } .wrapper-content.stack #stages ul li div.product-submenu ul { height:42px; width:248px; } .wrapper-content.stack #stages ul li div.product-submenu ul li{ height:17px; padding:3px; background:#fff; font-weight:bold; width:auto; } .wrapper-content.stack #stages .stage.category ul li div.product-submenu ul li{ margin-left:17px; } /** stack menu left */ .wrapper-content.stack #menu-left { position:absolute; top:0px; left:-265px;width:250px; top:100px; height:500px; text-align:right; } .wrapper-content.stack #menu-left .swipe-left { margin-top:35px; height:40px; width:100px; display:block; background: url(../images/icons/cosnova-arrow-left.png) no-repeat; } .wrapper-content.stack #menu-left .switch-left { margin-top:35px; height:40px; width:100px; display:block; background: url(../images/icons/switch-right.png) no-repeat; } /** stack menu right */ .wrapper-content.stack #menu-right { position:absolute; top:0px; right:-265px;width:250px; top:100px; height:500px; } .wrapper-content.stack #menu-right .swipe-right { margin-top:35px; height:40px; width:100px; display:block; background: url(../images/icons/cosnova-arrow-right.png) no-repeat; } .wrapper-content.stack #menu-right .switch-right { margin-top:35px; height:40px; width:100px; display:block; background: url(../images/icons/switch-left.png) no-repeat; } /** stack mapping */ .wrapper-content.stack #mapping { padding-bottom:55px; height:135px; } .wrapper-content.stack #mapping ul { width:100%; margin:0 auto; } .wrapper-content.stack #mapping ul li { height:75px; } .wrapper-content.stack #mapping ul li h3 { opacity:0.5; border-radius:5px; border:1px solid #dedede; margin-left:15px; float:left; height:75px; width:75px; } .wrapper-content.stack #mapping ul li h3.current { opacity:1; border:1px solid #D50057; border-radius:5px; } .wrapper-content.stack #mapping ul li ul { width:100%; margin:0 auto; } .wrapper-content.stack #mapping ul li ul li { opacity:0.5; float:left; margin-top:10px; border-radius:5px; border:1px solid #dedede; margin-left:5px; width:50px; height:50px; } .wrapper-content.stack #mapping ul li ul li.current { opacity:1.0; border:1px solid #D50057; border-radius:5px; } .wrapper-content.stack #mapping ul li ul li.add-dummy {background: #fff; font-size:4em; width:46px; height:46px; border:3px solid #dedede; line-height:50px; text-align:center; font-weight:lighter; } .wrapper-content.stack #mapping ul li ul li.add-dummy.current { border:3px solid #D50057; } /** category list **/ .wrapper-content.stack .stage.category {} /** product list **/ .wrapper-content.stack .stage.product{} .wrapper-content.stack .stage.product .back{ position:absolute; top:-80px; left:10px; height:43px; width:43px; } /** * FOOTER **/ #footer { color:#A2ABAB; font-size:0.8em; } #footer .menu { width:350px;} #footer .menu li { float:right; margin-left:5px; margin-right:5px; font-weight:bold; text-transform: uppercase;}