/* Eric Meyer's reset http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE: WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ /* Use this reset as a starting point, and customize to your needs */ /* Slightly modified to prevent anchor elements from losing outline, as in HTML5 Boilerplate */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; cursor: default; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: none } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* Meyer's reset ends here */ /* ---------------------------------------------------------- */ /* Layout /* ---------------------------------------------------------- */ html, body { height: 100%; } html { overflow-y: scroll; } body { font-family: Verdana, sans-serif; font-size: 13px; color: #082C38; line-height: 1.5; background: transparent url('images/bg-main.jpg') 0 0 repeat; min-width: 990px; } div.container-wrap { height: 100%; min-height: 100%; } div.header-wrap { width: 100%; height: 70px; padding-top: 18px; background-color: #666; background-color: rgba(0, 0, 0, 0.7); background-image: url('images/bg-main.png'), url('images/bg-download-bottom.png'); background-repeat: repeat, repeat-x; background-position: 0 0, 0 bottom; *background-color: #666; position: absolute; left: 0; top: 0; z-index: 999; } div.header { margin: 0 auto; position: relative; } div.target-wrap { min-height: 100%; margin-bottom: -100px; } div.footer-wrap { width: 100%; background-color: #666; background-color: rgba(0, 0, 0, 0.7); background-image: url('images/bg-main.png'), url('images/bg-download-top.png'); background-repeat: repeat, repeat-x; background-position: 0 0, 0 top; *background-color: #666; } div#start div.footer-wrap { background: none; } div.footer { margin: 0 auto; position: relative; } div.header, div.footer, div#start, div#features, div#download, div#develop { width: 990px; margin: 0 auto; position: relative; } div#features-container, div#download-container, div#develop-container { padding: 30px 0 25px 0; } /* ---------------------------------------------------------- */ /* Logo /* ---------------------------------------------------------- */ a.logo { display: block; background: transparent url('images/logo-dropit.png') left 0 no-repeat; width: 420px; height: 62px; } a.logo:hover { background-position: left -70px; } a.logo span { display: none; } a.logo-sourceforge { position: absolute; top: -3px; right: 0; display: block; background: transparent url('images/logo-sourceforge.png') 0 0 no-repeat; width: 100px; height: 25px; } a.logo-sourceforge:hover { background-position: 0 -25px; } div.langpages { position: absolute; right: -4px; top: 32px; } div.fb-like { margin-right: 25px; } span.linked { margin-right: 20px; } /* ---------------------------------------------------------- */ /* Headlines /* ---------------------------------------------------------- */ h2 { font-family: Georgia, serif; color: #35B4DE; font-size: 23px; font-weight: bold; margin-bottom: 15px; padding-bottom: 0; text-shadow: 1px 1px rgba(255, 255, 255, 0.1); } h3 { font-family: Verdana, serif; font-size: 15px; font-weight: bold; margin-top: 15px; margin-bottom: 12px; } /* ---------------------------------------------------------- */ /* Navigation /* ---------------------------------------------------------- */ ul.menu { position: absolute; top: 30px; right: -15px; } ul.menu li { display: inline; float: left; } ul.menu li a { display: block; padding: 6px 15px; color: #eee; font-weight: normal; font-size: 13px; text-decoration: none; } ul.menu li a:hover, ul.menu li a.active { color: #35B4DE; } ul.fixmenu { position: fixed; top: 30%; right: 0; z-index: 9999; margin: 0 auto; } ul.fixmenu li { display: block; float: none; margin: 0; } ul.fixmenu li a { background: url('images/icons-side.png') 0 0 no-repeat; text-indent: -9999px; width: 50px; height: 50px; padding: 2px 5px; display: block; } ul.fixmenu li a.features:hover, ul.fixmenu li a.features.active { background-position: 0 -300px; } ul.fixmenu li a.download { background-position: 0 -600px; } ul.fixmenu li a.download:hover, ul.fixmenu li a.download.active { background-position: 0 -900px; } ul.fixmenu li a.develop { background-position: 0 -1200px; } ul.fixmenu li a.develop:hover, ul.fixmenu li a.develop.active { background-position: 0 -1500px; } /* ---------------------------------------------------------- */ /* Start Page /* ---------------------------------------------------------- */ div#start { height: 100%; min-height: 100%; } div#start div.footer { position: absolute; bottom: 0; height: 40px; } div#start div.footer a { color: #666; } div.footer a.design { color: #bbb; } div#start div.footer a.design { display: none; } div.main-illustration { width: 920px; height: 158px; margin: 120px auto 30px auto; background: transparent url('images/main-illustration.png') center 0 no-repeat; } div.main-illustration p { display: none; } div#start h2 { margin-bottom: 15px; } div#start div p { padding: 0 10px; } div#start div p.smalltext { font-size: 10px; color: #666; margin-top: -8px; } div#start a { color: #35B4DE; } div#start div.features, div#start div.download, div#start div.develop { color: #082C38; padding-bottom: 55px; background: transparent url('images/start-hover.png') center 400px no-repeat; } div#start div.features:hover, div#start div.download:hover, div#start div.develop:hover { background: #E1EEFA url('images/start-hover.png') center bottom no-repeat; background: rgba(197, 223, 248, 0.5) url('images/start-hover.png') center bottom no-repeat; } div#start div.features a, div#start div.download a, div#start div.develop a { display: block; padding-top: 75px; background: transparent url('images/icons-start.png') center 0 no-repeat; text-decoration: none; } div#start div.features a { background-position: center 20px; } div#start div.features a:hover, div#start div.features:hover a { background-position: center -280px; } div#start div.download a { background-position: center -580px; } div#start div.download a:hover, div#start div.download:hover a { background-position: center -880px; } div#start div.develop a { background-position: center -1180px; } div#start div.develop a:hover, div#start div.develop:hover a { background-position: center -1480px; } /* ---------------------------------------------------------- */ /* Features Page /* ---------------------------------------------------------- */ div#features-container { } div.whatisdropit, ul.featurelist { margin-bottom: 30px; } ul.featurelist li { padding-left: 3.66%; background: transparent url('images/icons-featurelist.png') 0 3px no-repeat; margin-bottom: 25px; width: 26.3%; } ul.featurelist li.first { clear: left; } ul.featurelist li.last { margin-right: 0; } ul.featurelist li.filterfiles { background-position: -402px 3px; } ul.featurelist li.foldermonitor { background-position: -804px 3px; } ul.featurelist li.actions { background-position: 0px -115px; } ul.featurelist li.profiles { background-position: -402px -115px; } ul.featurelist li.specialactions { background-position: -804px -115px; } ul.featurelist li.paths { background-position: 0px -232px; } ul.featurelist li.alternativeusage { background-position: -402px -232px; } ul.featurelist li.automaticupdate { background-position: -804px -232px; } ul.featurelist li.profileencryption { background-position: 0px -350px; } ul.featurelist li.variables { background-position: -402px -350px; } ul.featurelist li.log { background-position: -804px -350px; } ul.featurelist li.multilanguage { background-position: 0px -473px; } ul.featurelist li.unicode { background-position: -402px -473px; } ul.featurelist li.installerportable { background-position: -804px -473px; } ul.featurelist li.ftp { background-position: 0px -598px; } ul.featurelist li h3 { font-size: 13px; margin-bottom: 1px; margin-top: 0; } div#features p.two-third { margin: 0 0 10px 0; text-align: justify; } div#features div.one-third a { float: left; position: relative; margin: 0 2px 2px 0; line-height: 0; } div#features div.one-third a:hover { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); } ol.howtousedropit { list-style-type: none; width: 100%; height: 244px; background: transparent url('images/illustration-howtousedropit.png') 0 0 no-repeat; } ol.howtousedropit li { margin: 0 0 10px 0; position: relative; width: 24.9%; float: left; } ol.howtousedropit li p { position: absolute; width: 70%; margin-left: 17%; line-height: 1.45; color: #000; } ol.howtousedropit li.step1 p { margin-left: 16%; } ol.howtousedropit li p.desc { top: 168px; } ol.howtousedropit li p.rules { top: 96px; left: 25px; } ol.howtousedropit li p.rules-type { top: 110px; } ol.howtousedropit li p.action { top: 95px; left: 24px; } ol.howtousedropit li p.action-type { top: 118px; left: 32px; } ol.howtousedropit li.step4 p { margin-left: 19%; } ol.howtousedropit li.step4 p.desc { top: 125px; } ol.howtousedropit li p.guide { top: 175px; color: #A08F5D; font-size: 10px; } /* ---------------------------------------------------------- */ /* Download Page /* ---------------------------------------------------------- */ div#download-container { position: relative; background-color: #E1EEFA; background-color: rgba(197, 223, 248, 0.5); background-image: url('images/bg-download-top.png'), url('images/bg-download-bottom.png'); background-position: 0 top, 0 bottom; background-repeat: repeat-x; *background-color: #E1EEFA; width: 100%; } div#download p.latestversion { font-size: 11px; position: absolute; top: 12px; right: 5px; } div#download p.latestversion a { text-decoration: underline; font-size: 11px; color: #082C38; } div.downloadbox { background: #2D96BE; width: 100%; margin-bottom: 30px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; } div.downloadbox .one-third { margin: 0; border-right: 2px dotted #3FA9D1; min-height: 140px; width: 27%; padding: 3%; } div.downloadbox .one-third h3 { margin-top: 0; } div.downloadbox .one-third.last { border: none; width: 27%; padding-right: 3.5%; } div.downloadbox a { color: #fff; text-decoration: underline; } div.downloadbox a.button { text-decoration: none; width: 225px; height: 42px; padding-top: 6px; padding-left: 15px; line-height: 1.4; display: block; color: #fff; font-weight: bold; font-size: 16px; text-shadow: -1px -1px 0 #3084CE; background: transparent url('images/btn-download.png') 100% 0 no-repeat; margin-top: 15px; box-shadow: 1px 1px 3px -2px rgba(0, 0, 0, 0.33); } div.downloadbox a.button:hover { background-position: 100% -52px; box-shadow: 1px 1px 4px -2px rgba(0, 0, 0, 0.5); } div.downloadbox a.button span { display: block; color: #1A3540; font-size: 10px; text-shadow: 1px 1px 0 #369BD9; font-weight: normal; font-family: Arial, sans-serif; } p.alert-red { text-align: center; font-size: 12px; margin: 6px 0px 18px 0px; padding: 6px 10px 6px 10px; border-top: 1px solid #FFA2A2; border-bottom: 1px solid #FFA2A2; background-color: #FFEAEA; color: #D81F1F; } p.alert-blue { text-align: center; font-size: 12px; margin: 6px 0px 18px 0px; padding: 6px 10px 6px 10px; border-top: 1px solid #056F92; border-bottom: 1px solid #056F92; background-color: #E8F7FF; color: #086486; } p.alert-green { text-align: center; font-size: 14px; margin: 6px 0px 18px 0px; padding: 7px 10px 7px 10px; border-top: 1px solid #4FA704; border-bottom: 1px solid #4FA704; background-color: #A2D36F; color: #FFF; font-weight: bold; } table.languages { border-collapse: separate; margin-bottom: 20px; } table.languages caption { display: none; } table.languages th, table.languages td { padding: 6px 5px 4px 2px; vertical-align: top; } table.languages td { background-color: #F8FBFE; background-color: rgba(255, 255, 255, 0.75); padding: 6px 5px 4px; border-bottom: 1px solid #999; border-bottom: 1px solid #E2EAF3; } table.languages td img { margin-right: 7px; } table.languages tbody tr:first-child td { border-top: none; } table.languages th { text-align: left; white-space: nowrap; border-bottom: 1px solid #082C38; font-weight: bold; } table.languages tbody tr:hover td { background-color: #fff; } table.languages tbody tr:hover td img { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } table.languages td a { color: #082C38; text-decoration: underline; } table.languages td a:hover { color: #35B4DE; } .upitem {font-size: 10px; font-weight: bold; color: green } div.one-third.translate { top: 5px; } ol.translatehowto { list-style: outside; list-style-type: decimal; margin-top: 10px; margin-bottom: 30px; } ol.translatehowto li { margin-left: 20px; margin-bottom: 10px; } ul.simplelist { list-style: outside; list-style-type: disc; margin-top: 10px; margin-bottom: 50px; } ul.simplelist li { margin-left: 20px; margin-bottom: 10px; } /* ---------------------------------------------------------- */ /* Develop Page /* ---------------------------------------------------------- */ div#develop-container { clear: both; width: 100%; margin-bottom: 30px; } div.developContent .two-third h3 { margin-top: 30px; margin-bottom: 5px; } div.quicklinks a { display: block; margin: 0 0 10px; } /* ---------------------------------------------------------- */ /* Footer /* ---------------------------------------------------------- */ div.footer { height: 80px; text-align: center; clear: both; z-index: 999; padding-top: 20px; } div.footer p, div.footer a { color: #ccc; font-size: 11px; position: relative; } div.startfooter p { color: #666; } div.footer a { text-decoration: underline; } div.footer a.design { text-decoration: none; font-size: 9px; position: absolute; right: 0; bottom: 20px; } div.footer a:hover { color: #ddd; } div.footer a.top { font-size: 8px; float: right; text-decoration: none; z-index: 999; width: 18px; height: 16px; background: transparent url('images/top.png') 0 0 no-repeat; text-indent: -9999px; } div.footer a.top:hover { background-position: 0px -16px; } div#start div.footer a.top { display: none; } /* ---------------------------------------------------------- */ /* Helpers /* ---------------------------------------------------------- */ a { text-decoration: underline; color: #082C38; border: none; outline: none; } a:hover { text-decoration: underline; color: #1393B9; } p { margin-bottom: 12px; } strong, .strong { font-weight: bold; } em, .italic { font-style: italic; } .hidden { display: none; } .no-border { border: none !important; } .one-half { width: 48% } .one-third { width: 29.66%; *width: 29%; } .two-third { width: 65.33% } .one-fourth { width: 22% } .three-fourth { width: 74% } .one-fifth { width: 16.8% } .two-fifth { width: 37.6% } .three-fifth { width: 58.4% } .four-fifth { width: 67.2% } .one-sixth { width: 13.33% } .five-sixth { width: 82.67% } .one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth { float: left; margin-right: 5%; position: relative; } .clear { clear: both; } .left { float: left; } .right { float: right; } .text-left { text-align: left } .text-right { text-align: right } .text-center { text-align: center } .text-justify { text-align: justify } .img-left { float: left; margin: 4px 10px 4px 0 } .img-right { float: right; margin: 4px 0 4px 10px } .first { margin-left: 0 !important } .last { margin-right: 0 !important } .nomargin { margin: 0 !important } .nopadding { padding: 0 !important } .noindent { margin-left: 0; padding-left: 0 } .nobullet { list-style: none; list-style-image: none } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }