/* Defaults * ======== */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } ::-moz-selection { background: #88b500; color: #0d0d0f; text-shadow: none; } ::selection { background: #88b500; color: #0d0d0f; text-shadow: none; } p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } a, a:visited { color: #88b500; text-decoration: none; padding: 1px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-transition-duration: .3s; -webkit-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } a:hover { color: #0d0d0f; background-color: #88b500; border-bottom-color: transparent; } /* Typographic scale * ================= * * Composed to a scale of 10px, 12px, 14px, *16px*, 18px, 21px, 24px, 36px, 48px, 60px and 72px * Computation formulas: * font-size: ${DESIRED_FONT_PX}/${PARENT_FONT_PX}em * e.g. 8px/16px=0.5em to have a 8px font-size for an element inside * line-height: ${DESIRED_LINE_PX}/${DESIRED_FONT_PX}em , usually a multiple of 24px * e.g. 12px/8px = 1.5em to have a 12px line-height for the above element * margin-bottom: same as the above */ body, button, input, select, textarea { font: 100%/1.5 Droid Serif, serif; *font-size: 1em} /* 16px / 24px */ p, blockquote, pre, address, hr, dl, ol, ul, menu, form, fieldset, table, th, td, img { padding:0; margin: 0; font-size: 1em; line-height: 1.5em} /* 16px / 24px */ p, blockquote, pre, address, hr, dl, ol, ul, menu, form, fieldset, table, fieldset { margin: 0 0 1.5em} /* margin-bottom: 24px */ h1.big { margin: 0; font-size: 3.75em; line-height: 1.2em; margin-bottom: 0.4em} /* 60px / 72px */ h1 { margin: 0; font-size: 3em; line-height: 1em; margin-bottom: 0.5em} /* 48px / 48px */ h2 { margin: 0; font-size: 2.25em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 0.6667em} /* 36px / 48px */ h3 { margin: 0; font-size: 1.5em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */ h4 { margin: 0; font-size: 1.3125em; line-height: 1.1428571428571428571428571428571em; margin-bottom: 1.1428571428571428571428571428571em} /* 21px / 24px */ h3 { margin: 0; font-size: 1.125em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 1.3333333333333333333333333333333em} /* 18px / 24px */ h6 { margin: 0; font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em} /* 16px / 24px */ small, p.small { margin: 0; font-size: 0.875em; line-height: 1.7142857142857142857142857142857em; margin-bottom: 1.7142857142857142857142857142857em} /* 14px / 24px */ p.x-small { margin: 0; font-size: 0.75em; line-height: 2em; margin-bottom: 2em} /* 12px / 24px margin-bottom: 24px */ p.xx-small { margin: 0; font-size: 0.625em; line-height: 1.2em; margin-bottom: 1.2em} /* 10px / 12px margin-bottom: 12px */ /* Layout * ====== */ body { margin: 0; } .vcard { margin: 0.75em auto; padding: 1.35em 15px 1.35em 125px; border-width: 0.15em; width: 520px; max-width: 100%; border-style: solid; position: relative; } .photo { float: left; margin: 0 15px 0 -95px; width: 80px; } ul { padding: 0; list-style: none; } li .key { display: inline-block; width: 15.5ex; } /* Style * ===== */ body { background-color: #0d0d0f; background: -moz-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ color: #d3d7cf; font-family: 'Cantarell', sans-serif; } .vcard { background: #2E3436 url(../img/bg.png) no-repeat scroll -50px 0; background: -moz-linear-gradient(top, rgba(255,255,255,0.175) 0%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.5) 100%), /* FF3.6+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: -webkit-linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* Chrome10+,Safari5.1+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: -o-linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* Opera 11.10+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: -ms-linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* IE10+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* W3C */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border-color: #88b500; box-shadow: 0px 0px 50px 1px black, inset 0px 0px 5px 0px black; } .fn { text-shadow: 0px 0px 10px black; } .section { border-bottom: 0.0833333333333333333333333333333em #d3d7cf solid; margin-bottom: 1.25em; text-align: left; text-shadow: 0px 0px 5px black; } .documents :last-child { margin-bottom: 0; } a .lowlight { color: #686; } a:hover .lowlight { color: inherit; } a[lang|=it]:after { margin-left: 0.5ex; opacity: 0.25; height: 16px; content: url(../img/it.png); } @media screen and (max-width: 520px) { body { background: #2E3436 url(../img/bg.png) no-repeat scroll -50px 0; background: -moz-linear-gradient(top, rgba(255,255,255,0.175) 0%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.5) 100%), /* FF3.6+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: -webkit-linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* Chrome10+,Safari5.1+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: -o-linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* Opera 11.10+ */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; background: linear-gradient(top, rgba(255,255,255,0.175) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.5) 100%), /* W3C */ url(../img/bg.png) no-repeat scroll -50px 0, #2E3436; } .vcard { width: auto; /* workaround Android browser not supporting box-sizing */ margin: 0; padding: 0.75em 5px; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; } .photo { float: right; margin: 0 10px 0 0; } .fn { margin: 0; font-size: 1.5em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */ li { margin-bottom: 0; } li .key { display: block; width: auto; } } /* @media screen and (max-width: 520px) */ /* Reference grid and debug outlines * ================================= */ /* body { background: -webkit-linear-gradient(bottom, #66f 0%, #fff 5%, #fff 50%, #eef 55%, #fff 56%) repeat; background: -moz-linear-gradient(bottom, #66f 0%, #fff 5%, #fff 50%, #eef 55%, #fff 56%) repeat; background-size: 1.5em 1.5em; } h1,h2,h3,h4,h5,h6 { outline: 1px solid red; } dt { outline: 1px solid green; } dd { outline: 1px solid blue; } p, ul, li, address { outline: 1px solid red; } */