Ejemplo de css para webs

@charset "utf-8";

body { font-family: "Arial Black", Gadget, sans-serif; font:12px/1.35 Arial,Helvetica,sans-serif; background:url("../images/bg.png") repeat-x scroll 0 0 #181818; margin-top:40px;}

img { border:0; vertical-align:top; }

.v-middle { vertical-align: middle;}

a { color:#26afd2; text-decoration:none; }

a:hover { text-decoration:underline; }

:focus { outline:0; }

/* Layout ================================================================================ */

.page { width:90px; margin: auto;text-align:left; }

.clear{clear:both;}

.col-main {float: right; width: 900px ;margin:5px }

.col-right { float: left; width: 312px;}

/* Reset ================================================================================= */

* { margin:0; padding:0; }

/* Lists */

ul,ol { list-style:none; }

/* Headings */

h1 { font-size:10px; font-weight:normal; line-height:1.15; }

h2 { font-size:18px; font-weight:normal; line-height:1.25; }

h3 { font-size:16px; font-weight:bold; line-height:1.25; }

h4 { font-size:14px; font-weight:bold; }

h5 { font-size:12px; font-weight:bold; }

h6 { font-size:11px; font-weight:bold; }

/* Global Styles ========================================================================= */

/* Form Elements

ots @ tp2p*/

input,select,textarea,button { font:12px Arial, Helvetica, sans-serif; vertical-align:middle; color:#000; }

input.input-text,select,textarea { border:1px solid #e6e6e6; background:#fff url(../images/input-bg.png) 0 0 no-repeat;}

input.input-text,textarea { padding:6px; }

select { padding:6px; }

select option { padding-right:10px; }

select.multiselect option { border-bottom:1px solid #ddd; padding:2px 5px; }

select.multiselect option:last-child { border-bottom:0; }

textarea { overflow:auto; }

input.radio { margin-right:3px; }

input.checkbox { margin-right:3px; }

input.qty { width:2.5em !important; }

button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */

button.button { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */

button.button { overflow:visible; width:auto; border:0; padding:0; margin:0; background:transparent; cursor:pointer; }

button.button span { float:left; height:29px; background:transparent url(../images/btn.png) 0 0 no-repeat; padding:0 0 0 14px; font:normal 12px/28px 'Oswald',sans-serif; text-transform:uppercase; text-align:center; white-space:nowrap; color:#fff;text-shadow:1px 1px #000; }

button.button span span { background-position:100% 0; padding:0 16px 0 3px;}

button.button:hover span{background: url(../images/btn.png) 0 -39px no-repeat;text-shadow:1px 1px #04748f;}

button.button:hover span span{background-position:100% -39px; }

fieldset { border:0; }

/* Form Validation */

p.required { font-size:10px; text-align:right; color:#f00; }

/* Header ================================================================================ */

.logo { float:left; }

.header-container { margin:20px 0 0;}

.header {}

.header .logo { float:left; text-decoration:none !important; margin:20px 0px 2px 40px; position: relative; bottom: 30px}

.header .logo strong { position:absolute; top:-999em; left:-999em; width:0; height:0; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; }

.header h1.logo { margin:2; padding:0; }

.header .links { float:right; font-size:10px; font-weight:bold; text-transform:uppercase; margin:6px 0 0;}

.header .links a{color:#4dc1df; text-decoration:none;}

.header .links a:hover{color:#FF0000; text-decoration:underline;}

.header .links li { display:inline; padding:0 14px 0 11px;border-right: 1px solid #4f4f4f;}

.header .links li.first { padding-left:0 !important; }

.header .links li.last { background:none !important; padding-right:0 !important;border-right: 0 none;}

.header .search{background: url(../images/sprites.png) 22px -104px no-repeat; padding:10px 10px 9px 0px; height:32px; width:334px; clear:right; float:right;}

.header .form-search { text-align:right;background: url(../images/sprites.png) 1px 0 no-repeat; width:292px; float:right;}

.header .form-search .search-autocomplete { z-index:999; }

.header .form-search .search-autocomplete ul { border:1px solid #ddd; background-color:#fff; }

.header .form-search .search-autocomplete li { padding:3px; border-bottom:1px solid #ddd; cursor:pointer; }

.header .form-search .search-autocomplete li .amount { float:right; font-weight:bold; }

.header .form-search .search-autocomplete li.selected {}

.header .form-language { clear:both; text-align:right;}

.header .form-search .button{background: url(../images/sprites.png) 0 -62px no-repeat;height: 32px;width:44px;}

.header .form-search .button:hover{background: url(../images/sprites.png) -54px -62px no-repeat;height: 32px;width:44px;}

.header-container .top-container { clear:both; text-align:right; }

.header .form-search .input-text{border:0px; background:none; color:#585858; font-weight:bold; width:222px; margin:0 8px 0 0;}

.header .quick-access{ float:right;}

.header .welcome-msg {float:left; color:#FFF;text-align: left; font-family: 'Oswald', sans-serif;background: url(../images/sprites.png) 0 -326px no-repeat; padding:4px 0 6px 16px; text-shadow:1px 1px #006780;}

.header .welcome-msg span{background: url(../images/sprites.png) -252px 0 no-repeat;padding:10px 10px 10px 8px; position:absolute; margin:-14px 0 0; *margin-top:-13px;}

.header .shopLinks {height: 28px;}

.shoppingCart {background: url(../images/sprites.png) -102px -64px no-repeat; position:relative;padding:7px 10px 7px 44px; font-size:12px; color:#FF0000; margin:13px 0 22px; float:right;}

.shoppingCart .empty { font-size:12px; }

.shoppingCart .block-content { padding: 0 !important;}

/* Navigation ================================================================================ */

.nav-container { clear:both; height:70px; position:relative; top:-40px }

.nav-container .nav-left{background: #FFFFE0 0px -446px repeat-x; float:left; left:85px ; width:15px; height:70px;}

.nav-container .nav-right{background: url(../images/sprites.png) -2px -246px repeat-x;

...