working in IE6, skins cleaner

css/mod.css

@@ -5,26 +5,28 @@ version: 0.2
 */
 /* **************** BLOCK STRUCTURES ***************** */
 /* mod */
-.mod{margin:10px;position:relative;zoom:1;}
-.hd,.bd,.ft{overflow:hidden; _overflow:visible; zoom:1;}
-.inner{position:relative;_zoom:1;}
-b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;float:left;z-index:10;}
-.tl, .tr, .bl, .br{height:7px; width:7px;}
-.top{position:absolute;top:0; left:0; width:100%;}
-.top, .bottom{float:none;/*width:auto;clear:both;*/background-position:-6999px; background-color:magenta;}
-.tl{background-position: left top;margin-bottom:-100px;}/* this margin can be anything as long as it is > height of the corner, bah */
-.tr{background-position: right top;float:right;margin-bottom:-100px;}/* this margin can be anything as long as it is > height of the corner, bah */
-.bl{background-position: left bottom;margin-top:-7px;} 
-.br{background-position: right bottom; float:right;margin-top:-7px;}
-/* complex is a structural obj that extends mod to allow for full image borders */
-.complex{overflow:hidden;}
-.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;}
-.complex .top{background-position:center top;height:5px;}/* can't stay like this */
-.complex .bottom{background-position:center bottom;height:7px;}
-.complex .bl, .complex .br{margin-top:-7px;clear:none;height:14px; width:14px;}
-/*.pop - a structural object originally coded by Leslie Sommers that extends mod to allow transparent outside corners. Use for popups. */
-.pop{overflow:visible;margin: 10px 17px 17px 10px; background-position:left top;}
-.pop .inner{right:-7px; bottom:-7px; background-position:right bottom;padding:0 7px 7px 0;}
+.mod{margin:10px;}
+.hd,.bd,.ft,{overflow:hidden;_overflow:visible; zoom:1;}
+.inner{position:relative;}
+b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
+.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
+.tl{background-position: left top;}
+.tr{background-position: right top;}
+.bl{background-position: left bottom;} 
+.br{background-position: right bottom;}
+.br,.tr{float:right;}
+.bl,.br{margin-top:-10px;}
+.top{background-position:center top;}
+.bottom{background-position:center bottom;}
+/* complex */
+.complex{overflow:hidden;_position:relative;_zoom:1;}
+.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;overflow:hidden;}
+.complex .bl, .complex .br{/*margin-top:0;*/}
+.complex .top{height:5px;}
+.complex .bottom{height:5px;/*margin-top:-10px;*/}
+/* pop  */
+.pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top;}
+.pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
 .pop .tl, .pop .br{display:none;}
-.pop .bl{bottom:-7px;}
-.pop .tr{right:-7px;}
+.pop .bl{bottom:-10px;}
+.pop .tr{right:-10px;}

css/mod_skins.css

@@ -1,68 +1,78 @@
 /* **************** BLOCK SKINS ***************** */
 /* ====== Contour blocks ====== */
-/* ----- .excerpt (extends complex) ----- */
-.excerpt b{background-image:url(skin/mod/excerpt.png);}
-.excerpt .top{height:1px;}
+/* remove *background-image:" to default to square corners for IE */
 /* ----- simple extends the mod ----- */
-.simple .inner {border:1px solid #D7D7D7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
-.simple b{*background-image:url(skin/mod/simple_corners.png);}/* remove this line to default to square corners for IE */
+.simple .inner {border:1px solid #D7D7D7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
+.simple b{background-image:url(skin/mod/simple_corners.png);}
 /* ----- basic extends the mod ----- */
-.basic .inner {-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
-.basic b{*background-image:url(skin/mod/round.png);}/* remove this line to default to square corners for IE */
+.basic .inner {/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
+.basic b{background-image:url(skin/mod/round.png);}
 /* ----- simpleExt (extends mod) ----- */
-.simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; */}
+.simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; }
 .simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;}
-.simpleExt b{background-image:url(skin/mod/simple_extended.png);}/* remove this line to default to square corners for IE */
-.simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}/* values for top, right, bottom, and left are equal to border thickness on mod */
+.simpleExt b{*background-image:url(skin/mod/simple_extended.png);}
+.simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
 .simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
 .simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;} 
 .simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
 /* ----- me (extends mod) use for my comments ----- */
-.me,.me .inner{border:1px solid #909090;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.me,.me .inner{border:1px solid #909090;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
 .me .inner{border-color:#d76a84;}
-.me b{background-image:url(skin/mod/me.png);}/* remove this line to default to square corners for IE */
-.me .tl{left:-1px;top:-1px;}/* values for top, right, bottom, and left are equal to border thickness on mod */
+.me b{background-image:url(skin/mod/me.png);}
+.me .tl{left:-1px;top:-1px;}
 .me .tr{right:-1px;top:-1px;}
 .me .bl{left:-1px;bottom:-1px;} 
 .me .br{right:-1px;bottom:-1px;}
 /* ----- noted (extends mod) ----- */
-.noted,.noted .inner{border:1px solid #c2c2c2;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.noted,.noted .inner{border:1px solid #c2c2c2;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
 .noted .inner{border-color:#eded68;}
-.noted b{background-image:url(skin/mod/noted.png);}/* remove this line to default to square corners for IE */
-.noted .tl{left:-1px;top:-1px;}/* values for top, right, bottom, and left are equal to border thickness on mod */
+.noted b{background-image:url(skin/mod/noted.png);}
+.noted .tl{left:-1px;top:-1px;}
 .noted .tr{right:-1px;top:-1px;}
 .noted .bl{left:-1px;bottom:-1px;} 
 .noted .br{right:-1px;bottom:-1px;}
 /* ----- grab (extends mod) ----- */
 .grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
 .grab b{background-image:url(skin/mod/grab.png);}
 .grab .tl, .grab .tr{height:10px; width:10px;}
-.grab .bl, .grab .br{height:16px;margin-top:-16px;}
+.grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
 /* ----- talk (extends mod) ----- */
-.talk,.talk .inner{border:1px solid #c7c7c7;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.talk,.talk .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
 .talk .inner{border-color:#ededed;}
-.talk b{background-image:url(skin/mod/talk.png);}/* remove this line to default to square corners for IE */
-.talk .tl{left:-1px;top:-1px;}/* values for top, right, bottom, and left are equal to border thickness on mod */
+.talk b{background-image:url(skin/mod/talk.png);}
+.talk .tl{left:-1px;top:-1px;}
 .talk .tr{right:-1px;top:-1px;}
 .talk .bl{left:-1px;bottom:-1px;} 
 .talk .br{right:-1px;bottom:-1px;}
 /* ----- photo (extends complex) ----- */
-.photo .inner{border:solid 10px #fff;margin:4px 4px 0 4px;}
+.photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
 .photo b{background-image:url(skin/mod/photo.png);}
 .photo .tr, .photo .tl{width:20px;}
-.photo .top, .photo .bottom{height:4px;} 
+.photo .top, .photo .bottom{height:4px;margin-top:0px;} 
 .photo .bl, .photo .br{height:16px;margin-top: -12px;}
-/* ----- even (extends complex) ----- */
+/* ----- flow (extends complex) ----- */
+.flow{margin:6px;}
 .flow b{background-image:url(skin/mod/even.png);}
+.flow .inner{padding:0 4px;}
+.flow .top{height:4px;}
+.flow .bottom{height:4px;margin-top:-4px;}
+.flow .br,.flow .bl{height:10px;margin-top:-6px;}/* margin top = bottom height - corner height */
+/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
+.boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border:solid 1px #949494;background:#fff;}
+/* ----- .excerpt (extends complex) ----- */
+.excerpt b{background-image:url(skin/mod/excerpt.png);}
+.excerpt .top{height:1px;}
+.excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */
+.excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */
 /* ----- sommers (extends pop) ----- */
-.sommers, 
-.sommers .inner, 
-.sommers b{background-image:url(skin/mod/glow_7px.png);}
+.sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
+.sommers,.sommers .inner,.sommers b{background-image:url(skin/mod/glow_7px.png);_background-image:none;}
+.sommers{/*margin:3px 10px 10px 3px;*/}
 /* ====== Background blocks ====== */
 .sale .inner{background-color:red;}
 .nicole .inner{background-color:#c01c41; color:#fff;}
 .nicole *, .login *{ color:#fff;}
-.highlight .inner{background-color:#e3e36f;/* previously #e2e22e*/}
+.highlight .inner{background-color:#e3e36f;}
 .universe .inner{background:url(skin/mod/universe.png) repeat left top;}
 .foo .inner{background: url(skin/mod/universe_gray.png) repeat left top;}
 .login .inner{background: url(skin/mod/universe_login.png) repeat left top;}
@@ -74,5 +84,4 @@
 .topper{background: #fff url(skin/mod/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
 .topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
 .bam{background: #00477a url(skin/mod/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
-.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
-.note{font-family:"Comic Sans MS", "Comic Sans MS5", cursive;color:#000669;font-size: 120%; text-align:center;}
+.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}