Listing 27.14 shows the CSS code used to style the elements in the photo view as well as the AngularJS partial templates.
01 div#photosContainer{
02 background:black; color: white;
03 border: 4px ridge blue; width:800px;
04 }
05 div.photoItem{ display:inline-block; width:120px; }
06 div#photoContainer,
07 div#photoComments{
08 background:black; color: white; width: 400px; height:450px;
09 display: inline-block; float:left; border: 2px ridge blue;
10 }
11 div#photoComments{ background:white; color: black;
12 max-height:500px; overflow-y:scroll;
13 }
14 div#pageComments{ margin:0px; clear:both; width:810px; }
15 div.comment{ border: 2px ridge blue; padding:10px;
16 border-radius: 5px;
17 }
18 img.listPhoto{ width:100px; }
19 img.mainPhoto{ width:400px; }
20 .commentBody{ background-color:lightgray;
21 border-radius: 5px; padding: 5px; margin:0;
22 }
23 .imageTitle{ font-size: 28px; font-weight: bold;
24 text-align: center; margin:0
25 }
26 .commentTitle{ font-size: 18px; font-weight: bold;}
27 .username{ font-style: italic; color:blue; }
28 .subject{ font-weight: bold;}
29 .timestamp{ color:#555555; font-style: italic;
30 font-size: 12px; text-align: right; margin:0;
31 }
32 input[type="text"],
33 textarea{ border: 2px ridge blue; border-radius: 5px;
34 padding:3px; width:95%;
35 }
36 input[type="button"]{ background-color:blue;color:white;
37 border-radius: 5px;
38 }