home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2011 October / PCgo_1011_CD.iso / interface / css / box.css next >
Encoding:
Cascading Style Sheet File  |  2011-05-09  |  10.9 KB  |  507 lines
  1. /***************************************************************************************************
  2. *   Document: box.css
  3. *   Description: Einstellungen der verwendeten Boxen
  4. *   Company: InteractiveM
  5. *   Author: Ren├⌐ Woizenko, Thomas Smiatek
  6. *   Email: info@im-online.de
  7. *   
  8. *   @version: v1.6
  9. *   
  10. */
  11. /***************************************************************************************************
  12. *   SEARCHBOX
  13. */
  14.  
  15. div#searchesBox {
  16.   float: left;
  17.   margin: 33px 0 0 60px;
  18. }
  19.  
  20. input.searchbox { 
  21.   width: 117px; 
  22.   height: 18px; 
  23.   padding: 2px 0 0 2px;
  24.   float: left;
  25.   border-top: solid 3px #00234c; 
  26.   border-left: solid 3px #00234c; 
  27.   border-bottom: solid 3px #00234c; 
  28.   border-right: 0; 
  29.   color: #00285d;
  30.   background: #fff url('../images/searchFieldBG.gif') no-repeat 0px 0px;
  31. }
  32.  
  33. div.searchItems {
  34.   float: left; 
  35.   margin: 0 0 0 0;
  36. }
  37.  
  38. div.searchItems a img {
  39.   width: 24px;
  40.   height: 21px;
  41.   border: solid 2px #00234c;
  42.   border-bottom: solid 3px #00234c;
  43. }
  44.  
  45. div.searchlink {
  46.   margin: 2px 0 0 5px;
  47. }
  48.  
  49. div.searchlink a.searchlink {
  50.   color: #5483b3; 
  51.   text-decoration: none;
  52. }
  53.  
  54. /***************************************************************************************************
  55. *   CONTENT  - CONTENTBOX & AD-BANNER
  56. */
  57.  
  58. div#contentBox {
  59.   width: 750px;
  60.   height: 527px;
  61.   text-align: left;
  62.   background: transparent url('../images/contentBoxBG.png') no-repeat 0px 0px;
  63. }
  64.  
  65. div#contentAboBox {
  66.   width: 750px;
  67.   height: 527px;
  68.   background-color: #10346d;
  69. }
  70.  
  71.   div#contentAboBox img {
  72.     border: 0px;
  73.   }
  74.  
  75. div#ad_banner_01 {
  76.   width: 232px;
  77.   height: 509px;
  78.   float: left;
  79.   padding-top: 18px;
  80. }
  81.  
  82. div#ad_banner_01 div#adBannerBox_top {
  83.   width: 192px;
  84.   height: 7px;
  85.   margin: 0px auto;
  86.   background: transparent url('../images/adBannerBox_top.gif') no-repeat 0px bottom;
  87. }
  88.  
  89. div#ad_banner_01 div#adBannerBox_mid {
  90.   width: 186px;
  91.   margin: 0px auto;
  92.   padding: 0 0 0 6px;
  93.   background-color: #e6e6e6;
  94. }
  95.  
  96. div#ad_banner_01 div#adBannerBox_mid a.adPicBig {
  97.   display: block; 
  98.   width: 180px; 
  99.   height: 240px; 
  100.   background-color: #c0c0c0;
  101. }
  102.  
  103. div#ad_banner_01 div#adBannerBox_mid a.adPicSmall {
  104.   display: block; 
  105.   width: 180px; 
  106.   height: 120px; 
  107.   margin-top: 3px;
  108.   background-color: #c0c0c0;
  109. }
  110.  
  111. div#ad_banner_01 div#adBannerBox_bottom {
  112.   width: 192px;
  113.   height: 7px;
  114.   margin: 0px auto;
  115.   background: transparent url('../images/adBannerBox_bottom.gif') no-repeat 0px 0px;
  116. }
  117.  
  118. /***************************************************************************************************
  119. *   CONTENT  - STARTSEITE - BTN-BOXES & TEASER-CONTENT
  120. */
  121. div.bigBtnBox {
  122.   padding: 252px 0 0 0;
  123. }
  124.  
  125. div.bigBtnBox a{
  126.   float: left;
  127. }
  128.  
  129. div.smallBtnBox {
  130.   margin: 0 0 0 0;
  131.   padding: 0 0 0 0;
  132. }
  133.  
  134. div.smallBtnBox a{
  135.   float: left;
  136. }
  137.  
  138. /***************************************************************************************************
  139. *   CONTENT  -  LICENSE-BOXES
  140. */
  141. div.licenseBoxBig {
  142.   float: right;
  143.   font-size: 14px;
  144.   font-weight: bold;
  145.   text-align: right;
  146.   padding: 0 0 0 0;
  147. }
  148.  
  149. div.licenseBoxBig div.licenseBoxBigCurve {
  150.   width: 25px;
  151.   height: 27px;
  152.   float: left;
  153.   background: transparent url('../images/licenseBigCurve.gif') no-repeat 0px 0px;
  154. }
  155.  
  156. div.licenseBoxBig div.licenseBoxBigText {
  157.   height: 23px;
  158.   padding: 4px 14px 0 0;
  159.   float: left;
  160.   color: #fff;
  161.   background: #d6e3f0 url('../images/licenseBigTextBG.gif') repeat-x 0px 0px;
  162. }
  163.  
  164. div.licenseBoxSmall {
  165.   float: right;
  166.   font-size: 9px;
  167.   height: 18px;
  168.   font-weight: bold;
  169.   text-align: right;
  170.   padding: 0 0 0 0;
  171. }
  172.  
  173. div.licenseBoxSmall div.licenseBoxSmallCurve {
  174.   width: 19px;
  175.   height: 18px;
  176.   float: left;
  177.   background: transparent url('../images/licenseSmallCurve.gif') no-repeat 0px 0px;
  178. }
  179.  
  180. div.licenseBoxSmall div.licenseBoxSmallText {
  181.   height: 15px;
  182.   padding: 3px 10px 0 0;
  183.   float: left;
  184.   background: #d6e3f0 url('../images/licenseSmallTextBG.gif') repeat-x 0px 0px;
  185. }
  186.  
  187. /***************************************************************************************************
  188. *   CONTENT - DETAILBOX LEFT CONTENT
  189. */
  190. div#softDetailBox {
  191.   width: 732px;
  192.   height: 448px;
  193.   background-color: white;
  194.   margin: 0 0 0 8px;
  195. }
  196.  
  197. div#softDetailBox div#softDetailContentLeft {
  198.   float: left;
  199.   padding: 10px 0 0 10px;
  200. }
  201.  
  202. div.ratingBox {
  203.   margin: 0 0 10px 0;
  204. }
  205.  
  206. div.ratingBox a.optionBTN {
  207.   margin: 0 auto 0 auto;
  208.   line-height: 17px;
  209. }
  210.  
  211. div.ratingBox h6 {
  212.   padding: 0 0 0 4px;
  213.   color: #2d80d5;
  214. }
  215.  
  216. div.ratingBox div#ratingStars {
  217.   width: 85px;
  218.   height: 14px;
  219. }
  220.  
  221. div.ratingBox div#ratingStars ul#starTypes {
  222.   display: block;
  223.   margin: 0 0 0 0;
  224.   padding: 0 0 0 0;
  225.   list-style: none;
  226. }
  227.  
  228. div.ratingBox div#ratingStars ul#starTypes li {
  229.   float: left;
  230.   display: block;
  231.   width: 17px;
  232.   height: 14px;
  233. }
  234.  
  235. div#voteSoftware {
  236.   width: 85px;
  237. }
  238.  
  239. div.userRatingBox {
  240.   height: 50px;
  241.   padding: 10px 0 0 0;
  242.   background-color: #247dd1;
  243. }
  244.  
  245. div.userRatingBox h6 {
  246.   padding: 0 0 0 4px;
  247.   color: #2d80d5;
  248. }
  249.  
  250. div.userRatingBox a.optionBTN {
  251.   margin: 0 auto 0 auto;
  252.   line-height: 17px;
  253. }
  254.  
  255. div.userRatingBox div#ratingStars {
  256.   width: 85px;
  257.   height: 14px;
  258.   border:1px solid #000;
  259. }
  260.  
  261. div.userRatingBox div#ratingStars ul#starTypes {
  262.   display: block;
  263.   margin: 0 0 0 0;
  264.   padding: 0 0 0 0;
  265.   list-style: none;
  266. }
  267.  
  268. div.userRatingBox div#ratingStars ul#starTypes li {
  269.   float: left;
  270.   display: block;
  271.   width: 17px;
  272.   height: 14px;
  273. }
  274.  
  275. div.userRatingBox div#ratingStars ul#voteStarTypes {
  276.   list-style-type: none;
  277.   width: 85px;
  278.   height: 14px;
  279.   background: transparent url('../images/ratingStar_blank.gif') repeat-x 0px 0px;
  280. }
  281.  
  282. div.userRatingBox div#ratingStars ul#voteStarTypes li {
  283.   float: left;
  284. }
  285.  
  286. div.userRatingBox div#ratingStars ul#voteStarTypes li a {
  287.   display: block;
  288.   width: 17px;
  289.   height: 15px;
  290. }
  291.  
  292. div.userRatingBox div#ratingStars ul#voteStarTypes li a:hover {
  293.   background: transparent url('../images/ratingStar_full.gif') no-repeat 0px 0px;
  294. }
  295.  
  296. div.ratingBox div#ratingStars ul#starTypes li.blank {
  297.   background: transparent url('../images/ratingStar_blank.gif') no-repeat 0px 0px;
  298. }
  299.  
  300. div.ratingBox div#ratingStars ul#starTypes li.half {
  301.   background: transparent url('../images/ratingStar_half.gif') no-repeat 0px 0px;
  302. }
  303.  
  304. div.ratingBox div#ratingStars ul#starTypes li.full {
  305.   background: transparent url('../images/ratingStar_full.gif') no-repeat 0px 0px;
  306. }
  307.  
  308. div#softDetailBox div#softDetailContentLeft img {
  309.   border: solid 1px #c1c1c1;
  310. }
  311.  
  312. /***************************************************************************************************
  313. *   CONTENT - DETAILBOX - LEFT CONTENT - OPTIONBOX
  314. */
  315. div#softDetailBox div#softDetailContentLeft div#optionBox {
  316.   width: 319px;
  317.   height: 21px;
  318.   background-color: #247dd1;
  319. }
  320.  
  321. div#softDetailBox div#softDetailContentLeft div#optionBox a {
  322.   float: left;
  323. }
  324.  
  325. /***************************************************************************************************
  326. *   CONTENT - DETAILBOX - LEFT CONTENT - INFOBOX
  327. */
  328. div#softDetailBox div#softDetailContentLeft div#infoBox {
  329.   width: 294px;
  330.   background-color: #d5e6f7;
  331.   margin: 7px 0 0 0;
  332.   padding: 6px 10px 10px 15px;
  333. }
  334.  
  335. div#softDetailBox div#softDetailContentLeft div#infoBox h5 {
  336.   margin-top: 4px;
  337.   margin-left: -1px;
  338.   color: #2982d6;
  339. }
  340.  
  341. div#softDetailBox div#softDetailContentLeft div#infoBox span {
  342.   font-size: 11px;
  343.   color: #00276a;
  344. }
  345.  
  346. div#softDetailBox div#softDetailContentLeft div#infoBox a.devLink {
  347.   font-size: 11px;
  348.   font-weight: bold;
  349.   color: #2982d6;
  350. }
  351.  
  352. /***************************************************************************************************
  353. *   CONTENT - DETAILBOX - RIGHT CONTENT
  354. */
  355. div#softDetailBox div#softDetailContentRight {
  356.   float: right;
  357.   width: 370px;
  358.   height: 437px;
  359.   margin: 0 0 11px 0;
  360.   color: black;
  361.   background-color: white;
  362. }
  363.  
  364. div#softDetailBox div#softDetailContentRight div#softDetailContentText {
  365.   height: 410px;
  366.   overflow: auto;
  367. }
  368.  
  369. div#softDetailBox div#softDetailContentRight p {
  370.   margin: 0 0 20px 0;
  371.   padding: 0 17px 0 0;
  372.   font-size: 13px;
  373. }
  374.  
  375. /***************************************************************************************************
  376. *   CONTENT - DETAILBOX - RIGHT CONTENT - SOFTWARE UPDATE BOX
  377. */
  378. div#softDetailBox div#softDetailContentRight div#softUpdate {
  379.   margin: 0 18px 20px 0;
  380.   padding: 5px 0 6px 8px;
  381.   background-color: #fdd2d5;
  382. }
  383.  
  384. div#softDetailBox div#softDetailContentRight div#softUpdate div#softUpdateInfo {
  385.   font-size: 11px;
  386.   color: #f61e2d;
  387. }
  388.  
  389. div#softDetailBox div#softDetailContentRight div#softUpdate a#softUpdateLink {
  390.   font-size: 11px;
  391.   font-weight: bold;
  392.   text-decoration: none;
  393.   color: #2d80d5;
  394. }
  395.  
  396. div#softDetailBox div#softDetailContentRight div#softUpdate a#softUpdateLink:hover {
  397.   text-decoration: underline;
  398. }
  399.  
  400. /***************************************************************************************************
  401. *   CONTENT - DETAILBOX - OPERATION BOX
  402. */
  403. div#operationItemBox {
  404.   height: 38px;
  405.   float: right;
  406.   margin: 0 13px 0 0;
  407. }
  408.  
  409. div#operationItemBox div#operationItemBoxLeft, div#operationItemBoxMid, div#operationItemBoxRight {
  410.   float: left;
  411. }
  412.  
  413. div#operationItemBox div#operationItemBoxLeft {
  414.   width: 5px;
  415.   height: 38px;
  416.   background: transparent url('../images/operationBox_left.gif') no-repeat 0px 0px;
  417. }
  418.  
  419. div#operationItemBox div#operationItemBoxMid {
  420.   height: 38px;
  421.   background-color: #0b244c;
  422. }
  423.  
  424. div#operationItemBox div#operationItemBoxMid a {
  425.   float: left;
  426. }
  427.  
  428. div#operationItemBox div#operationItemBoxRight {
  429.   width: 5px;
  430.   height: 38px;
  431.   background: transparent url('../images/operationBox_right.gif') no-repeat 0px 0px;
  432. }
  433.  
  434. /***************************************************************************************************
  435. *   BEWERTUNGSBOX
  436. */
  437.  
  438. #star-rating {
  439.   margin-top:17px;
  440. }
  441.  
  442. .star-rating,
  443. .star-rating a:hover,
  444. .star-rating a:active,
  445. .star-rating a:focus,
  446. .star-rating .current-rating {
  447.     background: url('../images/stars.gif') left -1000px repeat-x;
  448. }
  449. .star-rating {
  450.     position:relative;
  451.     height:25px;
  452.     overflow:hidden;
  453.     list-style:none;
  454.     margin:0;
  455.     padding:0;
  456.     background-position: left top;
  457. }
  458. .star-rating-fivestars {
  459.     width:125px;
  460. }
  461. .star-rating li {
  462.     display: inline;
  463.     margin: 0;
  464.     padding: 0;
  465. }
  466. .star-rating a,
  467. .star-rating .current-rating {
  468.     position:absolute;
  469.     top:0;
  470.     left:0;
  471.     text-indent:-1000em;
  472.     height:25px;
  473.     line-height:25px;
  474.     outline:none;
  475.     overflow:hidden;
  476.     border: none;
  477. }
  478. .star-rating a:hover,
  479. .star-rating a:active,
  480. .star-rating a:focus {
  481.     background-position: left bottom;
  482. }
  483. .star-rating-fivestars a.one-star {
  484.     width:20%;
  485.     z-index:6;
  486. }
  487. .star-rating-fivestars a.two-stars {
  488.     width:40%;
  489.     z-index:5;
  490. }
  491. .star-rating-fivestars a.three-stars {
  492.     width:60%;
  493.     z-index:4;
  494. }
  495. .star-rating-fivestars a.four-stars {
  496.     width:80%;
  497.     z-index:3;
  498. }
  499. .star-rating-fivestars a.five-stars {
  500.     width:100%;
  501.     z-index:2;
  502. }
  503. .star-rating .current-rating {
  504.     z-index:1;
  505.     background-position: left center;
  506. }
  507.