owlsky

/*==== CSS Grid Mockup ====*/

.grid { overflow: hidden;}
.col { float: left; }
.col-1-3 { width: 33.33%;}
.col-2-3 { width: 66.66%;}
.col-1-4 { width: 25%;}
.col-2-4 { width: 50%;}
.col-3-4 { width: 75%;}

owlsky

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: .5;
}

owlsky

li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;

owlsky

Centering UL element

A Pen by owlsky on CodePen.

License.

owlsky

div { 
	min-height: 500px; 
	height:auto !important; 
	height: 500px; 
}

owlsky

		background: #f9f9f9; /* old browsers */
		background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
		background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
		background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
		background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
		background-image: linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

owlsky

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}

owlsky

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
}

owlsky

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

owlsky

img.polaroid {  
    background:#000; /*Change this to a background image or remove*/  
    border:solid #fff;  
    border-width:6px 6px 20px 6px;  
    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */  
    -webkit-box-shadow:1px 1px 5px #333;  
    -moz-box-shadow:1px 1px 5px #333;  
    height:200px; /*Set to height of your image or desired div*/  
    width:200px; /*Set to width of your image or desired div*/  
}