Added POI text field. Some tuning to detail screen item position.
[jspeed] / www / css / style.css
index ad9005a..8e0d6df 100644 (file)
-* {\r
-       border: 0;\r
-       padding: 0;\r
-       margin: 0;\r
-}\r
-\r
-h1#top {\r
-       position: absolute;\r
-       text-indent: -9999px;\r
-}\r
-\r
-body {\r
-       background: #fbfbfb url(../img/background.png) repeat-x;\r
-       font-family: Calibri, Tahoma, Arial, sans-serif;\r
-       font-size: 17px;\r
-}\r
-\r
-a:link, a:active {\r
-       color: #296293;\r
-       text-decoration: none;\r
-}\r
-\r
-a:visited {\r
-       color: #486278;\r
-       text-decoration: none;\r
-}\r
-\r
-a:hover {\r
-       color: #7496b3;\r
-       text-decoration: underline;\r
-}\r
-\r
-#mainmenu {\r
-       background: url(../img/logo.png) no-repeat;\r
-       padding-top: 93px;\r
-       list-style: none;\r
-       width: 950px;\r
-       margin: 0 auto;\r
-}\r
-\r
-#mainmenu li {\r
-       float: left;\r
-       text-align: center;\r
-       width: 165px;\r
-       height: 37px;\r
-       font-size: 14px;\r
-       font-weight: bold;\r
-}\r
-\r
-#mainmenu li a {\r
-       color: #fff;\r
-       text-decoration: none;\r
-       display: block;\r
-       padding-top: 12px;\r
-       width: 165px;\r
-       height: 26px;\r
-       background: url(../img/button.png) 0px -2px;\r
-}\r
-\r
-#mainmenu li a:focus {\r
-       outline: none;\r
-}\r
-\r
-#mainmenu li a:hover, #mainmenu li.selected a{\r
-       background: url(../img/button.png) 0px -43px;\r
-}\r
-\r
-#info {\r
-       clear: both;\r
-       background: #8fb1cf url(../img/info-background.png) repeat-x;\r
-       height: 469px;\r
-       width: 100%;\r
-}\r
-\r
-#info-content {\r
-       width: 430px;\r
-       margin: 0 auto;\r
-       color: #fff;\r
-       font-size: 26px;\r
-       background: url(../img/screenshot.jpg) no-repeat 410px 30px;\r
-       height: 469px;\r
-       padding-top: 50px;\r
-       padding-right: 520px;\r
-       line-height: 1.3em;\r
-}\r
-\r
-#info-content ul {\r
-       margin-left: 25px;\r
-       margin-top: 20px;\r
-}\r
-\r
-#info-content ul li {\r
-       margin-bottom: 14px;\r
-       padding-left: 28px;\r
-       list-style: none;\r
-       background: url(../img/ball.png) 0px 10px no-repeat;\r
-}\r
-\r
-#bottom {\r
-       background: url(../img/bottom-background.png) repeat-x;\r
-       width: 100%;\r
-       clear: both;\r
-}\r
-\r
-#bottom-content {\r
-       width: 950px;\r
-       margin: 0 auto;\r
-       padding-top: 20px;\r
-       padding-bottom: 10px;\r
-}\r
-\r
-.bottom-box {\r
-       width: 250px;\r
-       float: left;\r
-       line-height: 1.5em;\r
-       font-size: 18px;\r
-       padding-right: 20px;\r
-       border-left: 1px dotted #949494;\r
-       padding-left: 25px;\r
-       margin-bottom: 25px;\r
-       height: 125px;\r
-}\r
-\r
-#bottom-content .bottom-box:first-child {\r
-       border-left-width: 0;\r
-}\r
-\r
-.bottom-box h2, .bottom-box h3 {\r
-       font-size: 20px;\r
-       margin-bottom: 8px;\r
-}\r
-\r
-.bottom-box p, .bottom-box ul {\r
-       color: #3c3c3c;\r
-}\r
-\r
-.bottom-box ul li {\r
-       list-style: none;\r
-}\r
-\r
-#copyright {\r
-       clear: both;\r
-       border-top: 1px dotted #949494;\r
-       margin-left: 20px;\r
-       padding-top: 15px;\r
-       width: 900px;\r
-       color: #999;\r
-       padding-bottom: 10px;\r
-       font-size: 16px;\r
-}\r
-\r
-#copyright a {\r
-       color: #999;\r
-}\r
-\r
-#main {\r
-       background: #fff url(../img/content-background.png) repeat-x;\r
-       clear: both;\r
-       border-bottom: 1px solid #ccc;\r
-}\r
-\r
-#main-content {\r
-       width: 910px;\r
-       margin: 0 auto;\r
-       padding: 30px 40px 10px 20px;\r
-       line-height: 1.5em;\r
-       font-family: Tahoma, sans-serif;\r
-       font-size: 16px;\r
-}\r
-\r
-#main-content h1 {\r
-       font-size: 24px;\r
-       margin-bottom: 14px;\r
-}\r
-\r
-#main-content h2 {\r
-       font-size: 22px;\r
-       margin-bottom: 14px;\r
-       margin-top: 25px;\r
-}\r
-\r
-#main-content h3 {\r
-       font-size: 18px;\r
-       margin-bottom: 8px;\r
-       margin-top: 28px;\r
-       border-bottom: 1px dotted #064070;\r
-       padding-bottom: 8px;\r
-}\r
-\r
-#main-content h4 {\r
-       font-size: 17px;\r
-       margin-top: 8px;\r
-}\r
-\r
-#main-content p {\r
-       margin-bottom: 0.8em;\r
-}\r
-\r
-.theme {\r
-       float: left;\r
-       width: 268px;\r
-       height: 235px;\r
-       padding: 5px;\r
-       text-align: center;\r
-       color: #000;\r
-       margin-right: 16px;\r
-       margin-top: 10px;\r
-       margin-bottom: 20px;\r
-       background: url(../img/theme-background.png) no-repeat;\r
-}\r
-\r
-.theme img {\r
-       width: 250px;\r
-       height: 150px;\r
-       border: 1px solid #bbb;\r
-       margin-bottom: 5px;\r
-       filter:alpha(opacity=80);\r
-       -moz-opacity:0.8;\r
-       -khtml-opacity: 0.8;\r
-       opacity: 0.8;\r
-}\r
-\r
-.theme img, .theme a.download {\r
-       filter:alpha(opacity=80);\r
-       -moz-opacity:0.8;\r
-       -khtml-opacity: 0.8;\r
-       opacity: 0.8;\r
-}\r
-\r
-.theme div {\r
-       font-weight: bold;\r
-       margin-bottom: 4px;\r
-       font-size: 15px;\r
-}\r
-\r
-.theme a:hover img, .theme a.download:hover {\r
-       filter:alpha(opacity=100);\r
-       -moz-opacity:1.0;\r
-       -khtml-opacity: 1.0;\r
-       opacity: 1.0;\r
-}\r
-\r
-.theme a.download {\r
-       text-indent: -9999px;\r
-       background: url(../img/download-button.png) no-repeat;\r
-       display: block;\r
-       margin: 0 auto;\r
-       width: 119px;\r
-       height: 34px;\r
-}\r
-\r
-.theme a.download:focus {\r
-       outline: none;\r
-}\r
-\r
-.clear {\r
-       clear: both;\r
-}\r
-\r
-pre.code {\r
-       font-size: 12px;\r
-       margin-top: 15px;\r
-       margin-bottom: 15px;\r
-       max-height: 350px;\r
-       overflow: auto;\r
-}\r
-\r
-.spec {\r
-       margin-top: 6px;\r
-       margin-bottom: 14px;\r
-       width: 100%;\r
-       border: 1px solid #ccc;\r
-}\r
-\r
-.spec th {\r
-       text-align: left;\r
-       font-weight: bold;\r
-       padding: 6px;\r
-       white-space: nowrap;\r
-\r
-}\r
-\r
-.spec pre {\r
-       font-size: 12px;\r
-}\r
-\r
-.spec td {\r
-       padding: 2px 6px 2px 6px;\r
-}\r
-\r
-.spec .color, .spec .color td, .spec .color th {\r
-       background-color: #e4eefa;\r
-}\r
-\r
-.spec .col1 {\r
-       width: 90px;\r
-}\r
-\r
-.spec .col3 {\r
-       width: 220px;\r
-}\r
-\r
-.contents, .contents ul {\r
-       margin-left: 20px;\r
-}\r
-\r
-.contents {\r
-       margin-bottom: 15px;\r
-}\r
+* {
+       border: 0;
+       padding: 0;
+       margin: 0;
+}
+
+h1#top {
+       position: absolute;
+       text-indent: -9999px;
+}
+
+body {
+       background: #fbfbfb url(../img/background.png) repeat-x;
+       font-family: Calibri, Granada, Tahoma, Arial, sans-serif;
+       font-size: 17px;
+}
+
+a:link, a:active {
+       color: #296293;
+       text-decoration: none;
+}
+
+a:visited {
+       color: #486278;
+       text-decoration: none;
+}
+
+a:hover {
+       color: #7496b3;
+       text-decoration: underline;
+}
+
+#mainmenu {
+       background: url(../img/logo.png) no-repeat;
+       padding-top: 93px;
+       list-style: none;
+       width: 950px;
+       margin: 0 auto;
+}
+
+#mainmenu li {
+       float: left;
+       text-align: center;
+       width: 165px;
+       height: 37px;
+       font-size: 14px;
+       font-weight: bold;
+}
+
+#mainmenu li a {
+       color: #fff;
+       text-decoration: none;
+       display: block;
+       padding-top: 10px;
+       width: 165px;
+       height: 28px;
+       background: url(../img/button.png) 0px -2px;
+}
+
+#mainmenu li a:focus {
+       outline: none;
+}
+
+#mainmenu li a:hover, #mainmenu li.selected a{
+       background: url(../img/button.png) 0px -43px;
+}
+
+#info {
+       clear: both;
+       background: #8fb1cf url(../img/info-background.png) repeat-x;
+       height: 469px;
+       width: 100%;    
+       min-width: 955px;
+}
+
+#info-content {
+       width: 430px;
+       margin: 0 auto;
+       color: #fff;
+       font-size: 26px;
+       background: url(../img/screenshot.jpg) no-repeat 410px 30px;
+       height: 469px;
+       padding-top: 50px;
+       padding-right: 520px;
+       padding-left: 8px;
+       line-height: 35px;
+}
+
+#info-content ul {
+       margin-left: 25px;
+       margin-top: 20px;
+}
+
+#info-content ul li {
+       margin-bottom: 13px;
+       padding-left: 28px;
+       list-style: none;
+       background: url(../img/ball.png) 0px 10px no-repeat;
+}
+
+#bottom {
+       background: url(../img/bottom-background.png) repeat-x;
+       width: 100%;
+       clear: both;    
+       min-width: 955px;
+}
+
+#bottom-content {
+       width: 950px;
+       margin: 0 auto;
+       padding-top: 20px;
+       padding-bottom: 10px;
+}
+
+.bottom-box {
+       width: 250px;
+       float: left;
+       line-height: 1.5em;
+       font-size: 18px;
+       padding-right: 20px;
+       border-left: 1px dotted #949494;
+       padding-left: 25px;
+       margin-bottom: 25px;
+       height: 125px;
+}
+
+#bottom-content .bottom-box:first-child {
+       border-left-width: 0;
+}
+
+.bottom-box h2, .bottom-box h3 {
+       font-size: 20px;
+       margin-bottom: 8px;
+}
+
+.bottom-box p, .bottom-box ul {
+       color: #3c3c3c;
+}
+
+.bottom-box ul li {
+       list-style: none;
+}
+
+#copyright {
+       clear: both;
+       border-top: 1px dotted #949494;
+       margin-left: 20px;
+       padding-top: 15px;
+       width: 900px;
+       color: #999;
+       padding-bottom: 10px;
+       font-size: 16px;
+}
+
+#copyright a {
+       color: #999;
+}
+
+#main {
+       background: #fff url(../img/content-background.png) repeat-x;
+       clear: both;
+       border-bottom: 1px solid #ccc;
+}
+
+#main-content {
+       width: 910px;
+       margin: 0 auto;
+       padding: 30px 40px 10px 20px;
+       line-height: 1.5em;
+       font-family: Tahoma, sans-serif;
+       font-size: 16px;
+}
+
+#main-content h1 {
+       font-size: 24px;
+       margin-bottom: 14px;
+}
+
+#main-content h2 {
+       font-size: 22px;
+       margin-bottom: 14px;
+       margin-top: 25px;
+}
+
+#main-content h3 {
+       font-size: 18px;
+       margin-bottom: 8px;
+       margin-top: 28px;
+       border-bottom: 1px dotted #064070;
+       padding-bottom: 8px;
+}
+
+#main-content h4 {
+       font-size: 17px;
+       margin-top: 8px;
+}
+
+#main-content p {
+       margin-bottom: 0.8em;
+}
+
+#main-content ul {
+       margin-left: 35px;
+}
+
+.theme {
+       float: left;
+       width: 268px;
+       height: 235px;
+       padding: 5px;
+       text-align: center;
+       color: #000;
+       margin-right: 16px;
+       margin-top: 10px;
+       margin-bottom: 20px;
+       background: url(../img/theme-background.png) no-repeat;
+}
+
+.theme img {
+       width: 250px;
+       height: 150px;
+       border: 1px solid #bbb;
+       margin-bottom: 5px;
+       filter:alpha(opacity=80);
+       -moz-opacity:0.8;
+       -khtml-opacity: 0.8;
+       opacity: 0.8;
+}
+
+.theme img, .theme a.download {
+       filter:alpha(opacity=80);
+       -moz-opacity:0.8;
+       -khtml-opacity: 0.8;
+       opacity: 0.8;
+}
+
+.theme div {
+       font-weight: bold;
+       margin-bottom: 4px;
+       font-size: 15px;
+}
+
+.theme a:hover img, .theme a.download:hover {
+       filter:alpha(opacity=100);
+       -moz-opacity:1.0;
+       -khtml-opacity: 1.0;
+       opacity: 1.0;
+}
+
+.theme a.download {
+       text-indent: -9999px;
+       background: url(../img/download-button.png) no-repeat;
+       display: block;
+       margin: 0 auto;
+       width: 119px;
+       height: 34px;
+}
+
+.theme a.download:focus {
+       outline: none;
+}
+
+.clear {
+       clear: both;
+}
+
+pre.code {
+       font-size: 12px;
+       margin-top: 15px;
+       margin-bottom: 15px;
+       max-height: 350px;
+       overflow: auto;
+}
+
+.spec {
+       margin-top: 6px;
+       margin-bottom: 14px;
+       width: 100%;
+       border: 1px solid #ccc;
+       font-size: 14px;
+}
+
+.spec th {
+       text-align: left;
+       font-weight: bold;
+       padding: 2px 6px;
+       white-space: nowrap;
+
+}
+
+.spec pre {
+       font-size: 12px;
+}
+
+.spec td {
+       padding: 1px 6px 1px 6px;
+       vertical-align: top;
+}
+
+.spec .color, .spec .color td, .spec .color th {
+       background-color: #e4eefa;
+}
+
+.spec .col1 {
+       width: 90px;
+}
+
+.spec .col3 {
+       width: 220px;
+}
+
+.contents, .contents ul {
+       margin-left: 20px;
+}
+
+.contents {
+       margin-bottom: 15px;
+}
+
+.imageinfo {
+       border: 1px solid #ccc;
+       padding: 5px;
+       float: left;
+       margin: 10px 15px 30px 0;
+       text-align: center;
+}
+
+.imageinfo p {
+       margin: 0 !important;
+       font-size: 13px;
+       font-weight: bold;
+}