Skip to content
Snippets Groups Projects
box.css 2.15 KiB
Newer Older
  • Learn to ignore specific revisions
  • /* CSS for the box starts here
    ================================================*/
    /* Default styling. Used when JavaScript is unsupported */
    .cbb {
    	padding: 5px 10px;
    	margin:1em 0;
    	margin-left: 0.5em;
    	margin-right: 0.5em;
    	background:#e76808;
    	font-size: 85%;
    	}
    .cbb h1 {
    	margin:0 -10px;
    	padding:0.3em 10px;
    	background:#efece6;
    	font:bold 1.2em Arial, Helvetica, sans-serif;
    	}
    
    div.cbb img.emblem, div.cb img.emblem {
    	float: right;
    	position: relative;
    	top: -1.5em;
    }
    
    /* Insert the custom corners and borders for browsers with sufficient JavaScript support */
    
    /* Two of the boxes are floated just for this demo. Adjust to your needs. */
    .cb {
    	margin:0.5em 0;
    	font-size: 85%;
    	}
    .two {
    	width:45%;
    	float:left;
    	}
    .three {
    	width:45%;
    	float:right;
    	}
    /* Rules for the top corners and border */
    .bt {
    	background:url('/images/box.png') no-repeat 100% 0;
    	margin:0 0 0 19px;
    	height:18px;
    	}
    .bt div {
    	height:18px;
    	width:19px;
    	position:relative;
    	left:-19px;
    	background:url('/images/box.png') no-repeat 0 0;
    	}
    
    /* Rules for the bottom corners and border */
    .bb {
    	background:url('/images/box.png') no-repeat 100% 100%;
    	margin:0 0 0 19px;
    	height:18px;
    	}
    .bb div {
    	height:18px;
    	width:19px;
    	position:relative;
    	left:-19px;
    	background:url('/images/box.png') no-repeat 0 100%;
    	}
    
    /* Insert the left border */
    .i1 {
    	padding:0 0 0 12px;
    	background:url('/images/borders.png') repeat-y 0 0;
    	height: 100%;
    	}
    /* Insert the right border */
    .i2 {
    	padding:0 12px 0 0;
    	background:url('/images/borders.png') repeat-y 100% 0;
    	}
    /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
    .i3 {
    	background:#e76808;
    	border:1px solid #e76808;
    	border-width:1px 0;
    	padding:0 10px;
    	}
    
    .cbb h3, .cb h3 {
    	margin: 0;
    	color: #ffc62b;
    }
    
    .cbb p, .cb p, .cbb ul, .cb ul {
    	margin: 0;
    }
    
    /* --------------------------------------------------
        Links
       -------------------------------------------------- */
    
    .cb a:link, .cbb a:link {
    	color: #ffc62b;
    }
    
    .cb a:visited, .cbb a:visited {
    	color: #a52f0f;
    }
    
    .cb a:active, .cbb a:active {
    	color: #ffffff;
    }
    
    .cb a:hover, .cbb a:hover {
    }
    
    /* CSS for the box ends here */