/***************************************** ================ BOXES =================== TABLE OF CONTENTS ------------------- 1. RESETS AND DEFAULTS 1.1 LAYOUT 2. HEADER 2.1 HEADER FORM 2.1 HEADER SPRITES 3. DRAGGABLE BOXES 4. MENU 5. ARTICLE 6. TOOL-TIP 7. FOOTER 8. CONTENT 8.1 KEYNOTE BOX 9. CLEARFIX 10. TRANSLUCENT MASK ======================================== COLOURS ------------------- GRAYS: Dark : #494949 Medium : #808080 Light : #E6E6E6 ======================================== ** 1. RESETS AND DEFAULTS *****************************************************************/ html * { border : 0; margin : 0; padding : 0; color : black; } html { height : 100%; } body { font-size : 62.5%; background : #ffffff; font-family : Arial, Verdana, Helvetica, sans-serif; line-height : 1.3; height : 100%; text-align : center; background : transparent url(/images/bg_body.gif) bottom left repeat-x fixed; } li { list-style-type : none; } a { color : #015377; text-decoration : none; } a:hover { color : #000000; text-decoration : none; } h1,h2,h3,h4 { color : black; margin-bottom : 1em; } .replaced { display : block; overflow : hidden; text-indent : -5000px; } /*div#wrapper { background: url('/images/bg_middle.png'); } div#wrapper p { color : #000000; } */ /*** 1.1 LAYOUT **************************************************************************/ div#wrapper { width: 1200px; min-height : 800px; margin: auto; text-align: left;} div#header { width: 988px; height : 110px; margin: auto;} div#header2 { width: 1100px; height : 110px; margin: auto; } div#head_logo { float: left; height : 110px;} div#head_image { float: right; margin-top:35px;} div#content { margin: auto; width: 988px; min-height : 600px; text-align: left; } div#content2 { margin: auto; width: 1100px; min-height : 600px; text-align: left; } div#draggables { width: 988px; margin:auto; z-index: 100; font-size : 10px; min-height : 700px; letter-spacing : -1px; text-align: left; position: relative;} div#draggables2 { float: left; z-index: 100; font-size : 10px; letter-spacing : -1px; text-align: left; position: relative;} div#extras { margin-top: 0px; -moz-opacity:0; filter: alpha(opacity=0); } div#extras2 { float : right; margin-top: 0px; } .cleaner {clear: both;} div#top { background: transparent url(../images/main/bb_top.png) scroll 0 0; height: 40px; width: 813px; } div#top h2 { padding-top: 15px; padding-left: 15px; color: #015377; font-weight: bold; font-size: 1.3em; } div#bottom { background: transparent url(../images/main/bb_bottom.png) scroll 0 0; height: 27px; width: 813px; } /*** 2. HEADER **************************************************************************/ div#header h1 { width : 120px; height : 50px; /*background : url(../images/logo_h1.png) no-repeat top left;*/ float : left; margin-bottom : 0; font-size : 350%; font-family : Helvetica, Arial, Verdana, sans-serif; font-weight : bolder; } div#header h2 { margin-top : 20px; margin-left : 15px; float : left; font-weight : normal; font-size : 1.1em; } div#header ul { margin-top : 5px; padding-right : 1.5em; float : right; width : 204px; } div#header li { display : inline; } /*** 2.1 HEADER FORM *********************************************************************/ div#form_container { width : 187px; height : 250px; /*background : url(/images/form_bg.png); */ padding : 5px 5px 5px 10px; } div#form_container p { margin-bottom : 1.3em; } div#form_container label { font-size : 1.2em; } div#form_content label { width : 120px; float : left; } div#form_container label.block{display : block; margin-bottom : 0.5em; } div#form_content input.submit {margin-left : 120px; } div#form_content input.text, div#form_content select { width : 200px; } div#form_error_container { color : #FFFFFF; margin-left : 120px; margin-bottom : 1em; } div#header form { float : right; border-left : 1px solid #494949; width : 202px; padding : 14px 13px 0 10px; } div#header input.text { width : 202px; font-size : 1em; padding : 1px 0; } div#header input.submit { float : right; } /*** 2.2 HEADER SPRITES *********************************************************************/ div#header a#download { height : 13px; width : 76px; background-image : url(/images/download.png); } div#header a#download:hover{ background-position : 76px 0; } div#header a#subscribe { height : 19px; width : 204px; background-image : url(/images/get_sdk.png); margin-top : 10px; float : right; } div#header a#subscribe:hover{ background-position : 203px 0; } /*** 3. DRAGGABLE BOXES *********************************************************************/ #draggables div.box { width : 200px; cursor : move; margin-top: 0px; } div.box h2 { position : relative; font-size : 1.3em; margin-bottom : 3px; color: #015377; } div.box h3 { margin-bottom : 3px; } div.box p { margin-top : 1em; font-size : 0.9em; margin-bottom : 0.2em; } div.box span { font-size : 0.8em; color : #000000; } div.box h2.big { padding-left : 0px; padding-top : 0px; margin-left : 0px; height: 20px; margin-top: 0px; } div.box a { color : #015377; text-decoration : none; } div.box a:hover { color : #015377; text-decoration : underline; } div.box_content { position : relative; margin-left : -14px; margin-top : 10px; margin-bottom : 0px; width: 96%; } .resizable { width : 100%; } div.border_top_left { background : transparent url(/images/main/big_box2.png) no-repeat scroll left top; } div.border_top_right { background : transparent url(/images/main/big_box2.png) no-repeat scroll right top; } div.border_bottom_left{ background : transparent url(/images/main/big_box2.png) no-repeat scroll left bottom;} div.border_bottom_right{ background : transparent url(/images/main/big_box2.png) no-repeat scroll right bottom;} div.border_top_left { position : absolute; top : 0px; left : -45px; height : 100%; width : 45px; } div.border_top_right { position : relative; top : 0px; left : 45px; padding-top : 22px; } div.border_bottom_right{ position : relative; top : 0px; left : 45px; height : 40px; } div.border_bottom_left{ position : absolute; left : -45px; width : 45px; height : 40px; } /*** 3.1 PAGER *********************************************************************/ div.box span { float : left; margin-right : 5px; } div.box_content li { float : left; padding-left : 3px; display : inline; width : 15px; } div.box a { cursor : pointer; } div.box a.pager { height : 12px; width : 12px; background-image : url(/images/pager_sprite.png); } div.box a.selected { background-position: 12px 0px; } /*** 4. MENU *********************************************************************/ div#navbar { z-index : 900; border-left : 1px solid #494949; padding : 0 1em 1em 1em; width : 202px; float : left; } div#navbar h2 { border-bottom : 1px solid #E6E6E6; margin-bottom : 0; } div#navbar li { font-size : 1.1em; font-weight : 600; border-bottom : 1px solid #E6E6E6; padding-bottom : 5px; } div#navbar a em { display : block; font-style : normal; color : #999999; font-weight : 500; } div#navbar p { margin-bottom : 1.3em; } div#arrow_left { height : 450px; width : 15px; background : url(/images/arrow_left.png) no-repeat bottom left; float : right;} /*** 5. ARTICLE *********************************************************************/ .scrollbar-vert { background : transparent; height : 600px; width : 5px; border-right : 1px solid #808080; float : left; } .handle-vert { height : 30px; width : 5px; background : #808080; } div#article_content p{ margin-bottom : 1em; } /*div#column_first { padding : 0 10px 0 5px; float : left; width : 200px; } div#column_second { padding : 0 0 0 10px; float : left; width : 200px; } */ /*** 6. TOOL-TIP *********************************************************************/ .tool-tip { color : #fff; width : 202px; z-index : 13000; } .tool-title { display : none; } .tool-text { color : #000000; padding : 8px 8px 8px 8px; background : url(/images/form_bg.png); } /*** 7. FOOTER *********************************************************************/ div#footer { width : 988px; margin:auto; margin-top: 10px; text-align: right; height: 20px; } div#footer li, div#footer ul { display : inline; } div#footer2 { width : 1100px; margin: auto; text-align: right; bottom : 0; height: 20px; } div#footer2 li, div#footer ul { display : inline; } /*** 7.2 LEGALS *********************************************************************/ div#footer ul#legals { } div#footer ul#legals li {} div#footer ul#legals li.first{ background : none; } div#footer ul#legals a { color : #808080; } div#footer ul#legals a:hover { color : #808080; text-decoration: underline; } div#footer2 ul#legals { } div#footer2 ul#legals li {} div#footer2 ul#legals li.first{ background : none; } div#footer2 ul#legals a { color : #808080; } div#footer2 ul#legals a:hover { color : #808080; text-decoration: underline; } /*** 8. CONTENT *********************************************************************/ /*** 8.1 KEYNOTE BOX *********************************************************************/ div#keynote { width : 200px; margin-bottom : 2em; } div#keynote img { border : 1px solid #E6E6E6; margin : 1em 0; width : 198px; } /*** 9. CLEARFIX *********************************************************************/ .clearfix:after { clear : both; content : "."; display : block; height : 0; line-height : 0; visibility : hidden; } .clearfix { display : inline-block; } html[xmlns] .clearfix { display : block; } * html .clearfix { height : 1%; } /*** 10. TRANSLUCENT MASK *********************************************************************/ .last-focus { z-index : 600; } .the-focus { z-index : 700; } .translucent { -moz-opacity : 0.40; opacity : 0.40; } /*** 11. Anzeigen *********************************************************************/ .logo1 { float: left; padding-left: 3px; padding-right: 0px; padding-bottom: 0px; } .logo2 { padding-bottom: 6px; } /*** 12. Help-Buttons *********************************************************************/ #help_buttons { position: relative; top: -28px; left: 710px; width: 76px; height: 0; float:left; } #help_box1 { float: left; } #help_box1 a { z-index: 99999; text-decoration:none; display:block; padding:0px; border:0px solid black; position:relative; top:0px; left:0px; } #help_box1 a:hover { z-index: 99999; position:relative; top:0px; left:0px; } #help_box1 a span {display:none;} #help_box1 a:hover span { position:absolute; top:-10px; left:-380px; width: 360px; z-index: 99999; background:#ffffff; border:1px solid black; display:block; padding:5px; } #help_box2 { float: left; margin-left: 10px; } #help_box3 { float: left; margin-left: 10px; } /*** 13. Planungsmappe *********************************************************************/ #merkzettel { background: url(/images/main/console.png) no-repeat; height:52px; width:242px; } #gemerkte { color: #015377; font-size:14px; font-weight:bold; padding-top:14px; padding-left:30px; text-align:left; height:52px; width:242px; letter-spacing: 0.1em; } #hidden_button { background:silver; border:0px solid white; color:white; cursor:pointer; } .img_planungsmappe{ position: relative; top: 6px; left: 0px; padding-right: 4px; } table, td, tr { padding: 0; margin:0;} .test {padding-top: 7px;}