/* ========================================================================== HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } A:link {color:BlueViolet;} A:visited {color:DarkOrchid;} A:hover {color:DarkSlateBlue;} ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { font: 18px/26px Papyrus, Helvetica Neue, Arial; } .wrapper { width: 90%; margin: 0 5%; } .header-container { border-bottom: 20px solid gray; } .footer-container, .main aside { border-top: 20px solid gray; } .header-container, .footer-container, .main aside { background: silver; } .title { color: black; } /* ============== MOBILE: Menu ============== */ nav ul { margin: 0; padding: 0; } nav a { display: block; margin-bottom: 10px; padding: 15px 0; text-align: center; text-decoration: none; font-weight: bold; color: black; background: gray; } nav a:hover, nav a:visited { color: black; } nav a:hover { text-decoration: underline; } /* ============== MOBILE: Main ============== */ .main { padding: 30px 0; } .main article h1 { font-size: 2em; } .main aside { color: black; padding: 20px 20px 20px 20px; } .footer-container footer { color: black; padding: 20px 0; height: 65px; } /* =============== ALL: IE Fixes =============== */ .ie7 .title { padding-top: 20px; } /* ========================================================================== Author's custom styles ========================================================================== */ div.screen{ width:100%; height:720px; border:0; } #iframe{ width:100%; height:100%; border:0; } div.pic{ width:auto; height:auto; border: 2px solid gray; } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (min-width: 480px) { /* ==================== INTERMEDIATE: Menu ==================== */ nav a { float: left; width: 9.5%; margin: 0 1.7%; padding: 25px 2%; margin-bottom: 0; } nav li:first-child a { margin-left: 0; } nav li:last-child a { margin-right: 0; } /* ======================== INTERMEDIATE: IE Fixes ======================== */ nav ul li { display: inline; } .oldie nav a { margin: 0 0.7%; } } @media only screen and (min-width: 768px) { /* ==================== WIDE: CSS3 Effects ==================== */ .header-container, .main aside { -webkit-box-shadow: 0 5px 10px #aaa; -moz-box-shadow: 0 5px 10px #aaa; box-shadow: 0 5px 10px #aaa; } /* ============ WIDE: Menu ============ */ .title { float: left; } nav { float: right; width: 70%; } /* ============ WIDE: Main ============ */ .main article { float: left; width: 57%; } .main aside { float: right; width: 35%; } } @media only screen and (min-width: 1140px) { /* =============== Maximal Width =============== */ .wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto; } } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }