git.schokokeks.org
Repositories
Help
Report an Issue
tor-webwml.git
Code
Commits
Branches
Tags
Suche
Strukturansicht:
3b647388e
Branches
Tags
bridges
docs-debian
jobs
master
press-clips
tor-webwml.git
css
layout.css
Add screenshots that show how to run Tor Browser on OS X.
David Fifield
commited
3b647388e
at 2015-04-25 02:17:38
layout.css
Blame
History
Raw
@charset "UTF-8"; /* Layout */ /* UNIVERSAL ------------*/ body { background: #fff; } #wrap { width: 960px; margin: 0 auto; } .left { float: left; } .right { float: right; } .twenty { width: 20%; } .thirty { width: 30%; } .forty { width: 40%; } .fifty { width: 50%; } .sixty { width: 60%; } .hundred { width: 100%; } .nopad { padding: 0; } .toppad { padding-top: 10px; } .toptwenty { margin-top: 20px; } .topforty { margin-top: 40px; } /* HEADER ------------*/ #header { width: 960px; height: 97px; margin-bottom: 23px; position: relative; } h1#logo { margin: 0; float: left; } h1#logo a, h1#logo a:visited { background: url(../images/tor-logo.jpg) left top no-repeat; text-indent: -9999px; overflow: hidden; width: 150px; height: 97px; display: block; } #nav { float: right; } #nav ul { height: 50px; float: right; margin-bottom: 0; } #nav ul li { float: left; display: inline; width: auto; } #calltoaction { height: 30px; float: right; margin-top: 10px; margin-right: 5px; text-align: center; } #calltoaction ul { padding: 0; margin: 0px; height: 30px; list-style: none; float: right; } #calltoaction ul li { list-style: none; display: inline; float: none; width: 100px; margin-left: 0px; } #calltoaction ul li a:link, #calltoaction ul li a:visited { display: block; background: url(../images/cta-buttons.jpg) top center no-repeat #885ca4; padding: 4px 8px; color: #FFFFFF; font-weight: bold; text-decoration: none; font-size: 13px; line-height: 22px; height: 22px; width: 84px; float: left; text-shadow: 1px 1px 0px #111111; } #calltoaction ul li:hover a { background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800; font-weight: bold; text-shadow: 1px 1px 0px #111111; } #calltoaction ul li:first-child a:link, #calltoaction ul li:first-child a:visited, #calltoaction ul li:hover:first-child a { -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-bottomleft: 7px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } #calltoaction ul li:first-child a:link, #calltoaction ul li:first-child a:visited { background: url(../images/cta-buttons.jpg) top left no-repeat #885ca4; } #calltoaction ul li:hover:first-child a { background: url(../images/cta-buttons.jpg) bottom left no-repeat #ff9800; } #calltoaction ul li:last-child a:link, #calltoaction ul li:last-child a:visited, #calltoaction ul li:hover:last-child a { -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; } #calltoaction ul li:last-child a:link, #calltoaction ul li:last-child a:visited { background: url(../images/cta-buttons.jpg) top right no-repeat #885ca4; color: #FFFFFF; } #calltoaction ul li:hover:last-child a { background: url(../images/cta-buttons.jpg) bottom right no-repeat #ff9800; } /* BANNER ------------*/ #banner { background: url(../images/bg-banner.jpg) left top no-repeat; height: 200px; width: 600px; padding: 23px 15px; margin-bottom: 15px; } #download a:link, #download a:visited { margin: -17px 0 0; background: url(../images/button-download.png) left top no-repeat; width: 257px; height: 79px; float: left; padding: 35px 0 0 80px; text-decoration: none; } #download a .download-tor { background: url(../images/button-download-arrow.png) right center no-repeat; font-family: "Arial Narrow", Arial, sans-serif; color: #fff; font-size: 2.167em; letter-spacing: 1px; padding-right: 25px; } #download a .version { color: #bda5cc; font-size: 1.167em; line-height: 1.167em; } #download a .info { color: #bda5cc; font-size: 0.833em; line-height: 0.833em; } #download a:hover { background-position: 0 -114px; } #download a:hover .version, #download a:hover .info { color: #f1c6a1; } #banner ul { background: #387520 url(../images/banner-gradient.jpg) left top repeat-x; border: 1px solid #366b32; width: 180px; float: right; margin: 0 15px 0 0; padding: 10px 10px 10px 30px; } #banner ul li { list-style: url(../images/white-bullet.png) outside; padding: 5px 0; } /* CONTENT ------------*/ #content { width: 960px; } #content img { max-width: 710px; } #breadcrumbs { padding: 0 0 10px 5px; } #home #maincol { float: left; width: 620px; margin-right: 20px; } #maincol { float: right; width: 710px; margin-bottom: 20px; } #dow-don-left, #maincol-left { float: left; width: 710px; margin-bottom: 20px; } #maincol .topforty .icon img { border: none; } .subcol { width: 280px; float: left; margin: 0 0 25px; } #content .first { margin-right: 20px; } /* SIDEBAR ------------*/ #home #sidecol { float: right; width: 300px; } #sidecol { float: left; width: 230px; margin-right: 20px; } #dow-don-right, #sidecol-right { float: right; width: 230px; margin-left: 20px; } #torusers { margin: 0 0 27px; } .user { margin: 0 0 12px; height: auto; } .user img, .project-icon { border: 1px solid #cac8a7; float: left; margin: 3px 10px 0 0; } .user p { margin: 0; } /* IMGSHADOW ------------*/ .img-shadow { float:left; background: url(../images/shadowAlpha.png) no-repeat bottom right !important; background: url(../images/shadow.gif) no-repeat bottom right; margin: 10px 0 10px 10px !important; margin: 10px 0 10px 5px; } .img-shadow .infoblock, .img-shadow .important-infoblock, .img-shadow .custom-infoblock, .img-shadow #sidenav, .img-shadow .sidenav-sub { display: block; position: relative; margin: -6px 6px 6px -6px; background-color: #fff; border: 1px solid #ddd; } .img-shadow .important-infoblock { background-color: #f7f8f0; border: 1px solid #eeefe8; } .img-shadow .infoblock, .img-shadow .important-infoblock { padding: 15px; width: 188px; } .img-shadow .custom-infoblock { padding: 15px; height: 120px; width: 426px; } .img-shadow .infoblock p, .img-shadow .important-infoblock p, .img-shadow .custom-infoblock p { margin: 0; } /* SIDENAV ------------*/ /*Note: #sidenav-sub is used on the downloads page as a tertiary navigation*/ .img-shadow #sidenav, .img-shadow .sidenav-sub { padding: 10px 0 0; width: 218px; } #sidenav ul li, .sidenav-sub ul li { border-bottom: 1px solid #ddd; } #sidenav ul li.dropdown a:link, #sidenav ul li.dropdown a:visited { background: url(../images/sidenav-arrow.gif) left center no-repeat; } #sidenav ul li.dropdown a.active { background: url(../images/sidenav-arrow-active.gif) left center no-repeat; } .sidenav-sub ul li.dropdown a:link, .sidenav-sub ul li.dropdown a:visited { background: url(../images/sidenav-arrow.gif) left top no-repeat; margin-top: 12px; } #sidenav ul li a:link, #sidenav ul li a:visited { display: block; height: auto; padding: 8px 15px 8px 26px; } #sidenav ul li ul li a:link, #sidenav ul li ul li a:visited { padding-left: 37px; } .sidenav-sub ul li a:link, .sidenav-sub ul li a:visited { display: block; padding: 0 15px 10px 26px; line-height: 16px; } #sidenav ul li.active { background: url(../images/sidenav-active.png) left center no-repeat; width: 230px; border: 0; } #sidenav ul li ul li ul li a:link, #sidenav ul li ul li ul li a:visited { padding-left: 48px; } /* TABLE ------------*/ table { width: 100%; } td { padding: 12px; } table td img, table tr img { border: 1px solid #cac8a7; float: left; margin-right: 10px; } .icon { float: left; width: auto; margin-right: 15px; padding: 10px 0; border: 0; } .calendar { background: url(../images/icon-calendar.jpg) left top no-repeat; float: left; margin-right: 10px; width: 45px; height: 54px; text-align: center; padding: 4px 0; } .fauxhead { background: url(../images/table-arrow.jpg) right top no-repeat; width: 100%; height: 11px; } #home-our-projects td { height: 92px; width: 296px; padding: 6px; } #ecosystem_presentation { height: 30px; padding-top: 10px; padding-left: 60px; vertical-align: middle; background: url("../images/video.png") no-repeat scroll left center transparent; font-size: 1.7em; font-weight: bold; } #ecosystem_presentation a { text-decoration: none; } .project { float: left; padding: 6px; border: 1px solid #CAC8A7; height: 76px; width: 284px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .project img { border: none; margin-right: 6px; } .beige { background: #f5f5df; } .gray { background: #e0e0e0; } .meta { float: right; width: auto; } /* DL PAGE ------------*/ .windows24 { /* Open Icon Library - Webpage Icons Package * Source: http://openiconlibrary.sourceforge.net/downloads.html */ background: url("../images/icon-windows24.png") no-repeat scroll left center transparent; } .mac24 { /* Open Icon Library - Webpage Icons Package * Source: http://openiconlibrary.sourceforge.net/downloads.html */ background: url("../images/icon-mac24.png") no-repeat scroll left center transparent; } .linux24 { /* Open Icon Library - Webpage Icons Package * Source: http://openiconlibrary.sourceforge.net/downloads.html */ background: url("../images/icon-linux24.png") no-repeat scroll left center transparent; } .smartphone24 { /* Icon from the Crystal set * author: Everaldo Coelho * source: http://www.everaldo.com/crystal/ * license: LGPL v2 */ background: url("../images/icon-smartphone24.png") no-repeat scroll left center transparent; } .sourcecode24 { /* Icon from the Crystal set * author: Everaldo Coelho * source: http://www.everaldo.com/crystal/ * license: LGPL v2 */ background: url("../images/icon-sourcecode24.png") no-repeat scroll left center transparent; } .windows24, .mac24, .linux24, .smartphone24, .sourcecode24 { display: block; line-height: 32px; padding: 0px 0 0px 33px; } .accordionButton { background: url("../images/table-title.jpg") repeat-x left bottom #885CA4; color: #FFFFFF; margin: 0; font-size: 1.1em; font-weight: bold; height: 32px; float: left; _float: none; /* Float works in all browsers but IE6 */ border: 1px solid #FFFFFF; border-bottom: none; cursor: pointer; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px; position: relative; padding-left: 30px; width: 680px; } .accordionButton:hover { background: url("../images/table-title-hover.jpg") repeat-x left bottom #885CA4; text-shadow: 1px 1px 0px rgba(17, 17, 17, 1); } .on:before, .off:before { position: absolute; content: ''; height: 0px; width: 0px; font-size:0px; line-height:0px; } .on:before { top: 14px; left: 10px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #FFFFFF; } .off:before { top: 9px; left: 14px; border-bottom:7px solid transparent; /* left arrow slant */ border-top:7px solid transparent; /* right arrow slant */ border-left:7px solid #FFFFFF; /* bottom, add background color here */ } .accordionContent { width: 708px; float: left; _float: none; /* Float works in all browsers but IE6 */ background: #FFFFFF; display: block; } .accordionContent .fauxhead { width: 710px; } .package { float: left; height: 280px; margin: 0px; padding: 25px 20px 20px 20px; border-top: 1px solid #888888; } .package h2 { margin-bottom: 3px; } .package p { margin-top: 16px; padding-left: 10px; } .downloads { display: block; float: left; width: 238px; padding: 0 16px 0 0; text-align: center; } .lang { float: right; display: none; width: 80px; height: 20px; margin: 0px 7px 0px 0px; padding: 0px 0px 0px 3px; background-color: #fefff7; border: 2px solid #CCCFB8; border-top: 0px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .button { text-align: center; display: block; width: 234px; height: 69px; text-decoration: none; background: url(../images/button-downloadpage.png) bottom left no-repeat; margin: 0px auto 8px auto; text-shadow: 1px 1px 0px rgba(17, 17, 17, 1); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .button .strong { display: block; padding: 10px 0 0 57px; } .button .normal { padding: 5px 0 0 57px; display: block; } .sig { display: block; margin: 3px 0px 20px 0px; } /* DOWNLOAD-EASY ---*/ .easy { width: 712px; margin-bottom: 10px; padding-bottom: 8px; } .howto th, .howto td { padding: 2px; } .howto th { font-weight: bold; text-align: center; } .howto img { border: 0; margin: 0; } #download-donate { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url(../images/headerbg.jpg); background-origin: padding-box; background-position: 0% 0%; background-repeat: no-repeat; background-size: 100% 100%; } .easy .package h2, .easy .package em { display: block; width: 100%; text-align: left; } .easy .package h2 { padding-top: 10px; padding-bottom: 5px; } .easy .package em { font-size: 1.2em; padding-top: 8px; padding-bottom: 4px; } .easy .package p { padding-left: 0px; font-size: 15px; text-align: justify; } .easy .package p.alt-dl { text-align: left; text-indent: 0px; padding-left: 0px; margin-top: 32px; } .all-dl { display: block; text-align: left; width: 100%; font-size: 15px; } .all-dl a{ text-decoration: none; font-weight: bold; } .all-dl a:hover{ text-decoration: underline; } .easy .package { float: none; padding: 0 8px 0 12px ; } .open { display: block; } .lang-alt { line-height: 15px; font-size: 10px; float: right; margin-right: 10px; } .expander { text-align: right; float: right; padding: 10px 20px 0 0px; font-size: 15px; display: none; } /* MISC ------------*/ .title { background: url(../images/table-title-arrow.jpg) right top no-repeat; padding: 10px 25px 0 10px; height: 33px; float: left; } .title a:link, .title a:visited { background: url(../images/table-title.jpg) left top no-repeat; height: 33px; display: block; } .paypal { float: left; width: auto; min-height: 159px; max-width: 365px; } .paypal span { padding-right: 20px; } .warning-top { width: 618px; padding: 10px 10px 10px 60px; margin: 0px 10px 0px 10px; display: block; background: url("../images/warning.png") no-repeat scroll 2px 23px #FFFEB6; border: 1px solid #A6A427; border-bottom: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .warning-top h2 { padding-right: 15px; padding-left: 0px; margin-bottom: 5px; } .warning-top p { padding-left: 10px; margin-bottom: 0px; } .warning { float: left; _float: none; /* Float works in all browsers but IE6 */ padding: 25px 25px; margin-top: 4px; } .warning p { padding-left: 10px; } .focus { background: #f4f2c7; border: 1px solid #ebd4a9; padding: 10px 15px; } .focus .icon { float: left; width: auto; margin-right: 10px; } .featured-project { width: 313px; } /* FORM ------------*/ input, select { margin: 0 3px 10px 0; } input.textfield { padding: 0 10px; vertical-align: top; } .donate-btn { background: left top no-repeat; height: 26px; width: 92px; text-indent: -9999px; overflow: hidden; border: 0; vertical-align: top; margin-top: 5px; } .donate-btn:hover { background-position: 0 -26px; cursor: pointer; } .signup { background: #96c35a; border-top: 1px solid #6ab334; border-left: 1px solid #6ab334; border-bottom: 1px solid #5a952b; border-right: 1px solid #5a952b; height: 31px; padding: 0 5px; vertical-align: top; color: #222c14; font-weight: bold; font-size: 1em; line-height: 1em; } .signup:hover { background: #6ab334; } select#lang { float: left; width: 160px; margin-right: 3px; } .go { background: #96c35a; border-top: 1px solid #6ab334; border-left: 1px solid #6ab334; border-bottom: 1px solid #5a952b; border-right: 1px solid #5a952b; padding: 0 5px; vertical-align: top; color: #222c14; font-weight: bold; font-size: 1em; line-height: 1em; height: 18px; } .go:hover { background: #6ab334; } /* FOOTER ------------*/ #footer { /* width: 960px; original */ width: 1024px; height: 200px; border-top: 1px solid #ddd; padding: 20px 0; margin: 20px 0 0; } .onion { float: left; /* width: 78px; original */ width: 88px; padding-right: 20px; height: 100%; } #footer .about { width: 180px; padding-right: 30px; border-right: 1px solid #ddd; float: left; } #footer .newsletter { padding: 0 0 15px 30px; width: auto; margin-left: 308px; } #footer input.textfield { width: 220px; height: 26px; } #footer input { margin: 0; } #footer .col { float: left; width: 100px; margin-left: 20px; } #footer .first { margin-left: 30px; } #footer .wider { width: 201px; } /* DONATION ADDITIONS ----------- */ small { margin: 0px auto 0px auto; text-align: center; font-size: 10px; font-style: italic; } .hlist { text-align: center; display: block; width: 100%; padding: 0px 0px; list-style: none; margin: 0px 0px 18px 0px; } .hlist li { display: inline-block; border-right: 1px solid #444444; margin-left: -4px; } .hlist li.last { border-right: 0px solid #444444; } .hlist a { display: block; top: 0px; right: 0px; bottom: 0px; left: 0px; text-decoration: none; font-weight: bold; padding: 0px 8px; } .dbox { float: none; text-align: center; color: #222222; border: none; padding: 1.4em 0.7em; width: 163px; margin: 0px 0px 0px 10px; } .dbox p { display: block; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } .dbox h2 { padding:13px 0px 15px 0px; position: relative; color: black; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; height: 35px; margin-bottom: -20px; margin-left: -6px; z-index:-10; } .dbox input.donate-btn { background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent; height: 68px; width: 186px; margin-top: 0px; display: block; background-color: transparent; color: transparent; margin: 10px auto 10px auto; padding: 0px 0px 0px 0px; } .dbox span { float: left; padding-right: 0px; } .dbox div label { padding: 0px 10px 0px 0px; } .dbox h6#ppinfo{ width: 100%; text-align: center; margin: -15px auto 0px auto; } .dbox small, .dbox.donate #ppinfo { margin: 0px auto 0px auto; text-align: center; font-size: 10px; font-style: normal; } .dbox.dl { float: none; width: 177px; margin: 0px 5px 20px 5px; } .dbox.dl input.amount { width: 87px; } .dbox.donate { float: none; padding: 30px 30px; width: 626px; min-height: 0px; max-width: none; text-align: left; } .dbox.donate input , .dbox.donate select { padding-bottom: 0px; margin-bottom: 0px; } .dbox.donate .drow { margin: 0px 0px 0px 20px; } .dbox.donate .drow div { padding: 0px 0 0 0px; width: auto; display: block; } .dbox.donate h3 { padding-left: 0px; color: #23300E; margin: 0 0 10px 0; } .dbox.donate h4 { padding-left: 20px; } .dbox.donate p { padding: 5px 20px 15px 40px; } .dbox.donate span { float: left; padding-right: 0px; } .dbox.donate div label { padding: 0px 10px 0px 0px; } .dbox.donate .type { padding-left: 20px; } .dbox.donate select#t3 { width: auto; margin-bottom: 0px; } .dbox.donate ul.amounts { width: auto; } .dbox.donate ul.amounts li { display: inline-block; margin-left: 15px; } .dbox.donate ul.amounts li label { padding: 0px 0px 0px 5px; } .dbox.donate input.donate-btn { background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent; height: 26px; width: 115px; margin-top: -3px; display: inline-block; background-color: transparent; color: transparent; border:0px solid transparent; } .dbox.dsmall { position: relative; display: inline-block; width: 170px; height: 140px; text-align: center; margin: 0px 10px; vertical-align: top; } .dbox.dsmall input.donate-btn { background: url() left top no-repeat transparent; width: auto; height: auto; margin-top: 0px; display: block; background-color: transparent; color: transparent; border:0px solid transparent; } .dbox.dsmall div label { padding: 0px 0px 0px 0px; } .dbox.dsmall small { display: block; position: absolute; width: 172px; float: none; bottom: 20px; margin: 0px auto; } .givv p { text-align: justify; margin-top: 10px; font-size: 11px; line-height: 13px; } dwolla p { text-align: justify; margin-top: 10px; font-size: 11px; line-height: 13px; } /* BLOG WIDGET ----------*/ div.blogRow, div.blogFirstRow { height: 40px; padding: 3px 10px; margin: 0 0; } div.blogLastRow { height: 20px; text-align: center; } div.blogFirstRow { height: 22px; background: url(../images/table-head.jpg) left top repeat-x #885ca4; } .blogRow:hover { background: #f6ffd5; } div.blogRow1, div.blogRow3 { background: #eee8f1; } .blogFeed a { text-decoration: none; } .blogFeed p { margin: 0; font-size: 12px; } p.blogTitle { font-weight: bold; text-decoration: underline; } p.blogAuthor { color: #000000; text-align: right; margin-top: -20px; } p.blogAuthor em{ color: #4e6a20; text-align: right; margin-top: -20px; } p.blogDate { color: #000000; } .blogFeed h2 { font-size: 1.467em; margin: 0; line-height: 23px; color: #f6f6ed; } /* Project page */ #projectpage td { width: 50%; } .projectbox { width: 710px; position: relative; margin-bottom: 80px; } .projectbox .name { font-size: 1.5em; font-weight: bold; } .projectbox a img { float: none; position: absolute; top: 0; left: 0; } .projectbox .projectdesc { margin-left: 100px; } /* END */ /* ** Markup free clearing ** Details: http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */