pricecharts

track prices of consumer electronics
Log | Files | Refs | README

pricesloth.css (1602B)

      1 fieldset {
      2 	border: 0px;
      3 }
      4 
      5 p {
      6 	line-height: 1.5em;
      7 }
      8 
      9 li {
     10 	line-height: 1.5em;
     11 }
     12 
     13 body {
     14 	font-family: sans-serif;
     15 	margin: 0;
     16 }
     17 
     18 .menu_bar {
     19 	/* space at the top for round sloth face to poke out */
     20 	margin-top: 1.0em;
     21 	background-color: forestgreen;
     22 }
     23 
     24 .menu_bar_title {
     25 	font-size: 2em;
     26 	font-weight: bold;
     27 	color: white;
     28 
     29 	display: inline-block;
     30 }
     31 
     32 .search_box {
     33 	display: inline-block;
     34 	height: 2em;
     35 }
     36 
     37 .column_container {
     38 	max-width: 80em;
     39 	margin: auto;
     40 }
     41 
     42 .column {
     43 	display: inline-block;
     44 	vertical-align: top;
     45 
     46 	/* by default there will be two of these side by side */
     47 	width: 45.5%;
     48 	padding: 0 2% 0 2%;
     49 }
     50 
     51 .product_column {
     52 	display: inline-block;
     53 	vertical-align: top;
     54 
     55 	width: 49.8%;
     56 }
     57 
     58 .product {
     59 	padding: 6px;
     60 	border: 1px solid gray;
     61 	border-radius: 3px;
     62 }
     63 
     64 .product_title {
     65 	white-space: nowrap;
     66 	overflow: hidden;
     67 	text-overflow: ellipsis;
     68 }
     69 
     70 .sloth {
     71 	width: 5em;
     72 	height: 5em;
     73 	border-radius: 2.5em;
     74 	-webkit-border-radius: 2.5em;
     75 	-moz-border-radius: 2.5em;
     76 	background: url(http://pricesloth.com/pricesloth.jpg) no-repeat;
     77 
     78 	margin-top: -1.25em;
     79 	margin-bottom: -2em;
     80 
     81 	display: inline-block;
     82 }
     83 
     84 @media (max-width: 640px) {
     85 	/* anything smaller than this go into single column mode */
     86 	.column {
     87 		width: 95%;
     88 		padding: 0 2% 0 2%;
     89 	}
     90 
     91 	.product_column {
     92 		width: 100%;
     93 		padding: 0 0 0 0;
     94 	}
     95 
     96 	.logo {
     97 		max-width: 100%;
     98 	}
     99 }
    100 
    101 .logo {
    102 	height: 3em;
    103 }
    104 
    105 .retailer_logo {
    106 	width: 15em;
    107 }
    108 
    109 .product_type {
    110 	width: 15em;
    111 }
    112 
    113 .list_item {
    114 }
    115 
    116 .logo_small {
    117 	height: 0.7em;
    118 }
    119 
    120 /* used in about page to indicate online status */
    121 .online_text {
    122 	color: limegreen;
    123 	font-weight: bold;
    124 }