/* style.css contains a reset, font normalization and some base styles. credit is left where credit is due. additionally, much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */ /* fonts.css from the YUI Library: developer.yahoo.com/yui/ Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages There are three custom edits: * remove arial, helvetica from explicit font stack * make the line-height relative and unit-less * remove the pre, code styles */ body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; } table { font-size:inherit; font:100%; } select, input, textarea { font:99% sans-serif; } /* normalize monospace sizing * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /* * minimal base styles */ /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ body, select, input, textarea { color:#444; } /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ /* www.aestheticallyloyal.com/public/optimize-legibility/ */ h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } /* maxvoltar.com/archive/-webkit-font-smoothing */ html { -webkit-font-smoothing: antialiased; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a.pdf{font-weight:bold;text-transform: uppercase;} ul { margin-left:30px; } ol { margin-left:30px; list-style-type: decimal; } small { font-size:85%; } strong, th { font-weight: bold; } td, td img { vertical-align:top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } /* hand cursor on clickable input elements */ label, input[type=button], input[type=submit], button { cursor: pointer; } /* These selection declarations have to be separate. No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink. */ ::-moz-selection{ background: #003352; color:#fff; text-shadow: none; } ::selection { background:#003352; color:#fff; text-shadow: none; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; } /* always force a scrollbar in non-IE */ html { overflow-y: scroll; } /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ button { width: auto; overflow: visible; } /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /* * Non-semantic helper classes */ /* for image replacement */ .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display:none; visibility:hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */ .visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* >> The Magnificent CLEARFIX << */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } /* Hides from IE-mac \*/ .clearfix { display: block; } /* GOAL PROPERTY MATTHIEU AUSSAGUEL 14-09-2010 */ body {font-family:Arial,sans-serif; font-size:62.5%; background-color: #fff; color:#777777;} a, a:active { color:#f2112a; text-decoration:none;} a:hover { text-decoration: underline;} p {line-height:1.3; font-size:1.2em; padding-bottom:.8em;color:#777777;} p p {font-size:1em; padding-bottom:0;} strong {font-weight:bold;} h1, h2, h3, h4, h5, h6 {color: #000;font-weight:normal; text-transform: uppercase;font-style:normal; line-height:normal; font-family:'ITCAvantGardeGothicDemiRegula', sans-serif;} h1 {font-size:1.6em;} h2 {font-size:1.2em;} h3 {font-size:1.3em;} h4 {font-size:1.2em;} h5 {font-size:1.0em;} /*GENERIC CLASSES*/ .left {float: left;} .right {float: right;} /* CONTAINER */ #container {width: 960px; margin: 0 auto;} /* HEADER */ /* HEADER */ header { width: 960px;} header #logo {width: 290px; height: 100px; background: url('../images/nav/logo.gif') no-repeat 0 0; text-indent: -9999em; display: block;} header nav a{width: 145px; height: 45px; text-transform: uppercase; display: inline; text-decoration: none; float: left; color: #999999; padding: 45px 0 0 20px;} header nav a:hover, header nav a.active {background-color: #f2122a; text-decoration: none;} header nav a:hover p, header nav a.active p{text-decoration: none; color: #000;} header nav p {padding: 0; font-size: 1em;} header nav a p.title {font-size: 1.6em; color: #000;font-family:'ITCAvantGardeGothicDemiRegula', sans-serif; } header nav a:hover p.title, header nav a.active p.title {color: #fff;} /* MAIN */ #main {padding: 10px 0 80px;} #main-header {padding: 30px 0 5px;} #main-header a {text-transform: uppercase; font-weight: bold; font-size: 1.2em;} ul.pagination li{list-style: none; display: inline; margin:2px 2px 2px 2px;} ul.pagination a{font-size: 1.1em; color: #fff; font-weight: bold; background-color: #738fa0; padding: 4px 6px; } ul.pagination a:hover, ul.pagination li.active a{background-color: #6ca919; text-decoration: none;} ul.pagination span#current{background-color: #6ca919; text-decoration: none;font-size: 1.1em; color: #fff; font-weight: bold; padding: 5px 6px 4px 6px; } /* HOMEPAGE*/ #homepage {width: 925px; height: 445px; padding: 16px 0 25px 0; margin: 0 auto;} #homepage-blurb {width: 925px;margin: 0 auto;padding:0; } #homepage-blurb .left{float:left;display:inline;width:404px;padding-right:36px;} #homepage-blurb .left h2 {font-weight:bold;font-size: 18px;line-height:30px;color:#F2112A;font-family:Arial, Helvetica, sans-serif;text-transform:none;} #homepage-blurb .right{float:right; display:inline; width:416px;padding-right:67px;} #homepage-blurb .right p {color:#4C4C4C; font-family:Arial, Helvetica, sans-serif;line-height:30px;font-weight:normal;font-size: 18px;} /* ABOUT */ #about .left {width: 260px;padding: 5px 0;} #about .left p {color: #666; font-family:'ITCAvantGardeGothicBookRegula', sans-serif; font-size: 1.8em;} #about .right {width: 500px; padding-right: 150px;} /* PROJECTS */ #projects .project-listing {padding-top: 20px;} #projects .project-listing ul {margin: 5px 0 0;} #projects .project-listing li{float: left; list-style: none; width: 317px; padding-right: 1px; border-bottom: 1px solid #b2b2b2; margin-bottom: 5px;} #projects .project-listing li div.img-wrp{width: 317px; height: 200px; position: relative; overflow: hidden; } #projects .project-listing li div.img-wrp.hover {border: 8px solid #000; width: 301px; height: 184px;} #projects .project-listing li div.img-wrp.hover img{top: -8px; left: -8px;} #projects .project-listing li img{width: 317px; height: 200px; position: absolute;} #projects .project-listing li p {color: #666666; text-transform: uppercase; font-size: 1.1em; padding: 5px 0;} #projects .project-listing li a:hover {text-decoration: none;} #projects .project-listing li a {display: block;} #projects .project-listing li a:hover p, #projects .project-listing li a.hover p {color: #000; } a#visit-website{background:url('../images/visit-website.gif') no-repeat;width:107px;height:25px;display:block;padding:5px 0 0 5px;font-weight:bold;color:#fff;} /* PROJECT */ #project .left {width: 260px; background-color: #fff; padding: 5px 0;} #project .left #project-logo {margin-bottom: 15px;} #project .left p.project-info {text-transform: uppercase; padding-bottom: 30px; font-weight: bold;} #project .left p.project-info a {font-weight: normal;} #project .left p {color: #666666; font-size: 1.2em; font-weight: normal;} #project .left a.back {text-transform: uppercase; display: block; font-size: 1.1em; font-weight: bold; padding: 20px 0 10px;} #project .right, #project .right img {width: 655px;} /* CONTACT */ #contact p {color: #777; font-weight: bold;} #contact .left a {padding-left: 20px; background: url('../images/contact/icn-mail.png') no-repeat 0 1px; font-weight: bold;} #contact .left a.map-link {background: url('../images/contact/icn-map.png') no-repeat 0 0px;} #contact .left{background-color: #fff; width: 280px; padding: 25px 0;} #contact .right {width: 650px;} /* NEWS */ #news .left {width: 260px; background-color: #fff; padding: 20px 0; } #news .left p {color: #666; font-family:'ITCAvantGardeGothicBookRegula', sans-serif; font-size: 1.8em; padding: 0;} #news .right {width: 650px;} #news .right ul {margin: 0;} #news .right li {padding-bottom:10px; margin-bottom: 5px; border-bottom: 1px solid #4d7186;} #news .right li.last {border-bottom: 0;} #news .right p {color: #000; font-size: 1.2em; padding: 0;} #news .right .img-wrp {float: left; margin-right: 10px; width: 180px; /*height: 120px;*/ overflow: hidden;} #news .right img { width: 180px;} /* FOOTER */ footer {border-top: 8px solid #000; margin: 3px 0 20px; padding-top: 10px; text-transform: uppercase;} footer p {font-size: 1.1em;} footer .left p {display: inline; padding-right: 15px; color: #4c4c4c;} footer .right p {display: inline; padding-right: 15px; color: #949494;} /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } /* Don't show links for images */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /* * Media queries for responsive design */ @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ @media screen and (max-device-width: 480px) { /* Prevent iOS, WinMobile from adjusting font size */ html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } }