makes a list inside a sentance, separated my commas.
*/
#inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}
#inline-list p {
display: inline;
}
#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}
/* vertical Breadcrumb trails
http://www.alistapart.com/articles/taminglists/
gives
Home » Products » Computers » Software
*/
/* use html:
*/
/* generate the » character (or any other character you might want to use as a separator) with the :before pseudo-element, combined with a class="first" so that the first LI doesn’t generate a separator:
#bread-gen ul li:before {
content: "\0020 \0020 \0020 \00BB \0020";
color: #ff9;
}
#bread-gen ul li.first:before {
content: " ";
}
*/
#bread {
color: #ccc;
background-color: #006;
padding: 3px;
margin-bottom: 25px;
}
#bread ul {
margin-left: 0;
padding-left: 0;
display: inline;
border: none;
}
#bread ul li {
margin-left: 0;
padding-left: 2px;
border: none;
list-style: none;
display: inline;
}
#bread-gen ul li:before {
content: "\0020 \0020 \0020 \00BB \0020";
color: #ff9;
}
#bread-gen ul li.first:before {
content: " ";
}
.free {letter-spacing:.48em; text-align:center; color: #af1b52;}
/*
:first-line - can only be attached to a block-level element.
Only the following properties apply to :first-line ---
font
color
background
word-spacing
letter-spacing'
text-decoration
vertical-align
text-transform
line-height
text-shadow
clear
*/
/* .firstline:first-line
used for "initial caps" and "drop caps"
This type of initial letter is similar to an inline-level element if its 'float' property is 'none', otherwise it is similar to a floated element.
The properties that apply to :first-letter pseudo-elements:
font
color
background
text-decoration
vertical-align (only if 'float' is 'none')
text-transform
line-height
text-shadow
clear
margin
padding
border
float
To make a drop cap initial letter span two lines:
p { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
*/
/* using Times New Roman for whole section - not just first letter - needs narrower container */
.firstline:first-line { text-transform: uppercase; color:#808000; }
/*
.slogancontainer { letter-spacing:.15em;
clear:both;
width:12.9em;
margin:0 auto 0 30%;
padding:0;
text-align:left;
font:normal 200% "Times New Roman", serif;
line-height:1em;
}
*/
/* float:left; display:inline; */
/* .logo NOT I N U S E */
.logo {margin:0 0 0 .4em; display:block; letter-spacing:.48em; text-align:center; padding:1% 0 0 0; }
.slogan { font-size:1.8em; color: #af1b52; text-align:center; }
/* #subslogan {letter-spacing:.2em;} */
#subslogan {overflow:visible;font-size:50%; margin:0 -6.3em 0 -6.3em; letter-spacing:.2em;}
/* overflow requires height declaration */
/* START OF masthead text-display */
/* using:
slogancontainer, logoword, sloganmain, firstslogan, sloganbig, subslogan2 */
/* margin:0 -.2em 0 -.2em; "DejaVu Serif", */
.logoword {font:normal 1.2em Arial, Helvetica, sans-serif; letter-spacing:.6em;
text-align:center;
margin:.5em 0 .25em 1.5em;
padding:0;
}
/* can't add width to centerforslogan - prevents it from centering.
(display, position etc don't help) */
.centerforslogan { text-align:center;
margin:0; padding:0;
height:100%;
}
.slogancontainer { display:block;
height:100%;
width:8em;
margin: 0 auto 0 35%;
top:0;
padding:0;
text-align:center;
font:normal 1em Arial, Helvetica, "DejaVu Sans Condensed", "Bitstream Vera Sans", sans-serif;
line-height:1em;
clear:both;
}
/* this is when the logo is floated to left - margin:0 auto 0 35%; */
.firstslogan {
margin:0 auto 0 1px;
padding:0;
left:0;
/*height:3em;*/
font:normal 2.1em Arial, Helvetica, "DejaVu Sans Condensed", "Bitstream Vera Sans", sans-serif;
letter-spacing:.25em; /* spacing this makes the green slogan look nice */
text-align:center;
color:#808000;
clear:right;
}
/* :first-letter can crash IE - consumes all memory
see:........................... */
/* float:left;*/
/* margin:0 0 0 .2em; */
/* from first-letter - margin-top:-1em; */
.firstslogan:first-letter {
width:2em;
/*height:2.8em;*/
vertical-align:text-top;
padding:0 .05em 0 0;
left:0;
text-align:center;
font:italic 3em "Times New Roman", "TSCu_Times", serif;
color: #7b0014;
clear:none;
margin-top:-1em;
/* top margin for IE
*margin-top:-1em;
*top:-1em;*/
}
.sloganbig {color:#808000;
text-align:center;
display:block;
height:1.1em;
margin-top:-1em;
background:transparent;
letter-spacing:.5em;
font:normal 2.2em Arial, Helvetica, "DejaVu Sans Condensed", "Bitstream Vera Sans", sans-serif;
font-weight:normal;
/* padding for IE - this causes css validation error so removed:- */
/*padding-left:2em;
* padding-left:1.3em;
*/
}
/* #subslogan2 *** center point is at first comma ***
"Professional Website Design, Search Engine Optimisation
& Support Services" */
#subslogan2 {display:block; clear:both; text-align:center; font-size:110%; margin:0; letter-spacing:.2em;}
.slogancontact {text-align:center; font:normal .5em "Times New Roman", serif; letter-spacing:0;
}
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
END OF masthead text-display */
/* butt is for pictures that need to join properly*/
.butt {
position: relative;
display: inline;
border: none;
margin: 0;
padding: 0;
}
/* for footer @ image in email address symbol */
.embutt { width:14px;
position: relative;
display: inline;
border: none;
padding:0;
margin: 0;
vertical-align:bottom;
}
.em-butt { width:1.4em;
position: relative;
display: inline;
border: none;
padding: 0;
margin: 0 -.5em 0 0;
}
.blocklink { width: 100%; text-align:center;}
.blocklink a:link, .blocklink a:visited {
display:block;
padding:4px;
margin:0;
font-weight:bold;
text-decoration:none;
width:97%;
text-align:center;
border:none;
}
.blocklink a:link { color:#204544;
border:none; background:#d3d3d3;}
.blocklink a:visited { color:#7b0013;
border:none; background:#d3d3d3;}
.blocklink a:hover { color:blue;
/*#8b8970; pale grey*/
border:none; background:#d3d3d3;
/*text-decoration:underline;*/
}
.blocklink a:active { color: #d3d3d3;
border:none; }
.blocklink a:focus { color: #d3d3d3;
border:dotted 1px green; }
.newsletter {
border: 3px solid #b5d3d2;
border-right: none;
color: #204544;
background: #fff;
}
.bigger {font-size:1.5em;}
/*
the base TABLE element has various attributes:
accessibility:
* summary: Provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.
* align: Deprecated with HTML 4, - specify the position of the table with respect to the document (left, center, right).
* width: Specifies the desired width of the entire table.
* border: Specifies the width (in pixels) of the frame around a table.
* cellspacing: Specifies how much space the user agent should leave between the left side of the table and the left-hand side of the leftmost column, the top of the table, the top side of the topmost row, and so on for the right and bottom of the table. The attribute also specifies the amount of space to leave between cells.
* cellpadding: Specifies the amount of space between the border of the cell and its contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents. If the value of the attribute is a percentage length, you should equally separate the top and bottom margins from the content based on a percentage of the available vertical space. Also, you should equally separate the left and right margins from the content based on a percentage of the available horizontal space.
CSS for:
align, width, border, cellspacing, and cellpadding
the id attribute - for individual elements - useful for accessing elements programmatically.
*/
.colorname { overflow:hidden; width:6em; height:50px; }
table#color, table#color1, table#color2, table#color3, table#color4, table#color5, table#color6, table#color7, table#color8, table#color9, table#color10, table#color11, table#color12, table#color13, table#color14 { margin: 15px; display:inline; float:left; }
#color td, #color1 td, #color2 td, #color3 td, #color4 td, #color5 td, #color6 td, #color7 td, #color8 td, #color9 td, #color10 td, #color11 td, #color12 td, #color13 td, #red td, #yellow td, #blue td, #green td, #earth td {
border: 1px solid #000;
padding-left:8px;
padding-right:8px;
margin:0;
}
#color caption, #color1 caption, #color2 caption, #color3 caption, #color4 caption, #color5 caption, #color6 caption {text-transform:uppercase; color:#666; font: normal 133% Arial, Helvetica, sans-serif; font-weight: bold;}
#colhex td {
width:140px;
height:50px;
}
.colhex td {
width:6em;
}
.showcolour { width:100px; overflow:hidden; }
.centerforsloganXX {
position:relative; display:block;
width:30%;
margin-left:35%;
background:transparent url("/images-wps/ww.gif") top left no-repeat;
/* padding:0 0 0 97px; */
padding:0 0 0 2em;
height:100px;
color:#808000;
text-align:center;
letter-spacing:.2em;
line-height:1em;
font:2em Arial, Helvetica, "DejaVu Sans Condensed", "Bitstream Vera Sans", sans-serif;
font-weight:bold;
}
.firstwhite { position:relative; display:block; margin-left:-3em; width:1px; height:1px; color:#fff; font:.1em Arial, Helvetica, "DejaVu Sans Condensed", "Bitstream Vera Sans", sans-serif; overflow:hidden;
}