94 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
		
		
			
		
	
	
			94 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
|  | body { | ||
|  |   padding: 20px; | ||
|  | } | ||
|  | 
 | ||
|  | h1 { | ||
|  |   border-bottom: 1px solid gray; | ||
|  |   margin-top: 0; | ||
|  | } | ||
|  | 
 | ||
|  | /* View: Phone list */ | ||
|  | .phones { | ||
|  |   list-style: none; | ||
|  | } | ||
|  | 
 | ||
|  | .phones li { | ||
|  |   clear: both; | ||
|  |   height: 115px; | ||
|  |   padding-top: 15px; | ||
|  | } | ||
|  | 
 | ||
|  | .thumb { | ||
|  |   float: left; | ||
|  |   height: 100px; | ||
|  |   margin: -0.5em 1em 1.5em 0; | ||
|  |   padding-bottom: 1em; | ||
|  |   width: 100px; | ||
|  | } | ||
|  | 
 | ||
|  | /* View: Phone detail */ | ||
|  | .phone { | ||
|  |   background-color: white; | ||
|  |   display: none; | ||
|  |   float: left; | ||
|  |   height: 400px; | ||
|  |   margin-bottom: 2em; | ||
|  |   margin-right: 3em; | ||
|  |   padding: 2em; | ||
|  |   width: 400px; | ||
|  | } | ||
|  | 
 | ||
|  | .phone:first-child { | ||
|  |   display: block; | ||
|  | } | ||
|  | 
 | ||
|  | .phone-images { | ||
|  |   background-color: white; | ||
|  |   float: left; | ||
|  |   height: 450px; | ||
|  |   overflow: hidden; | ||
|  |   position: relative; | ||
|  |   width: 450px; | ||
|  | } | ||
|  | 
 | ||
|  | .phone-thumbs { | ||
|  |   list-style: none; | ||
|  |   margin: 0; | ||
|  | } | ||
|  | 
 | ||
|  | .phone-thumbs img { | ||
|  |   height: 100px; | ||
|  |   padding: 1em; | ||
|  |   width: 100px; | ||
|  | } | ||
|  | 
 | ||
|  | .phone-thumbs li { | ||
|  |   background-color: white; | ||
|  |   border: 1px solid black; | ||
|  |   cursor: pointer; | ||
|  |   display: inline-block; | ||
|  |   margin: 1em; | ||
|  | } | ||
|  | 
 | ||
|  | .specs { | ||
|  |   clear: both; | ||
|  |   list-style: none; | ||
|  |   margin: 0; | ||
|  |   padding: 0; | ||
|  | } | ||
|  | 
 | ||
|  | .specs dt { | ||
|  |   font-weight: bold; | ||
|  | } | ||
|  | 
 | ||
|  | .specs > li { | ||
|  |   display: inline-block; | ||
|  |   vertical-align: top; | ||
|  |   width: 200px; | ||
|  | } | ||
|  | 
 | ||
|  | .specs > li > span { | ||
|  |   font-size: 1.2em; | ||
|  |   font-weight: bold; | ||
|  | } |