From 292e463f69f4bfa8e44cf53f790caad3772ec6fa Mon Sep 17 00:00:00 2001
From: Rob Emery <rob@mintsoft.net>
Date: Fri, 9 Jan 2015 20:40:11 +0000
Subject: [PATCH] ColorCodes: Layout fixes and tweaks

---
 lib/DDG/Goodie/ColorCodes.pm             | 4 ++--
 share/goodie/color_codes/color_codes.css | 5 +++--
 t/ColorCodes.t                           | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/DDG/Goodie/ColorCodes.pm b/lib/DDG/Goodie/ColorCodes.pm
index c48656590..d3a9601c5 100755
--- a/lib/DDG/Goodie/ColorCodes.pm
+++ b/lib/DDG/Goodie/ColorCodes.pm
@@ -95,9 +95,9 @@ sub create_output {
     
     $html = "<div class='col1'>"
           . "<p class='hex zci__caption'>$hex</p><p class='no_vspace'>$rgb</p><p class='no_vspace'>$hsl</p><p class='no_vspace'>$cmyb</p>"
-          . "<p ><a href='http://labs.tineye.com/multicolr#colors=" . $hex . ";weights=100;'>Images</a>"
+          . "<p ><a href='http://labs.tineye.com/multicolr#colors=" . $hex . ";weights=100;' class='tx-clr--lt'>Images</a>"
           . " | "
-          . "<a href='http://www.color-hex.com/color/" . $hex . "' title='Tints, information and similar colors on color-hex.com'>Info</a></p>"
+          . "<a href='http://www.color-hex.com/color/" . $hex . "' title='Tints, information and similar colors on color-hex.com' class='tx-clr--lt'>Info</a></p>"
           . "</div>"
           . "<div class='col2'>"
           . "<div>$comps</div>"
diff --git a/share/goodie/color_codes/color_codes.css b/share/goodie/color_codes/color_codes.css
index 7035a24fe..b2291d4a0 100755
--- a/share/goodie/color_codes/color_codes.css
+++ b/share/goodie/color_codes/color_codes.css
@@ -22,14 +22,15 @@
     padding: 0;
 }
 
-.zci--answer .zci--color-codes .col1,
-.zci--answer .zci--color-codes .col2
+.zci--answer .zci--color-codes .col1
 {
     display: inline-block;
     height: 125px;
 }
 
 .zci--answer .zci--color-codes .col2 {
+	display: inline-block;
+	height: 90px;
     width: 16em;
     margin-left: 2em;
 }
diff --git a/t/ColorCodes.t b/t/ColorCodes.t
index f340b9d25..21c4f285f 100755
--- a/t/ColorCodes.t
+++ b/t/ColorCodes.t
@@ -49,7 +49,7 @@ ddg_goodie_test(
     # Single full HTML check.
     'red html code' => test_zci(
         'Hex: #FF0000 ~ rgba(255, 0, 0, 1) ~ rgb(100%, 0%, 0%) ~ hsl(0, 100%, 50%) ~ cmyb(0%, 100%, 100%, 0%)'."\n".'Complementary: #00FFFF'."\n".'Analogous: #FF8000, #FFFF00',
-        html => qq(<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#ff0000"></div><div class='col1'><p class='hex zci__caption'>Hex: #FF0000</p><p class='no_vspace'>rgba(255, 0, 0, 1)</p><p class='no_vspace'>hsl(0, 100%, 50%)</p><p class='no_vspace'>cmyb(0%, 100%, 100%, 0%)</p><p ><a href='http://labs.tineye.com/multicolr#colors=Hex: #FF0000;weights=100;'>Images</a> | <a href='http://www.color-hex.com/color/Hex: #FF0000' title='Tints, information and similar colors on color-hex.com'>Info</a></p></div><div class='col2'><div><div class='cols_column'><span class='mini-color circle' style='background: #00ffff;'> </span></div><div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace text--primary'>00FFFF</p></div></div><div><div class='cols_column'><span class='mini-color circle' style='background: #ff8000'> </span><span class='mini-color circle' style='background: #ffff00'> </span></div><div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace text--primary'>FF8000, FFFF00</p></div></div></div></div>)
+        html => qq(<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#ff0000"></div><div class='col1'><p class='hex zci__caption'>Hex: #FF0000</p><p class='no_vspace'>rgba(255, 0, 0, 1)</p><p class='no_vspace'>hsl(0, 100%, 50%)</p><p class='no_vspace'>cmyb(0%, 100%, 100%, 0%)</p><p ><a href='http://labs.tineye.com/multicolr#colors=Hex: #FF0000;weights=100;' class='tx-clr--lt'>Images</a> | <a href='http://www.color-hex.com/color/Hex: #FF0000' title='Tints, information and similar colors on color-hex.com' class='tx-clr--lt'>Info</a></p></div><div class='col2'><div><div class='cols_column'><span class='mini-color circle' style='background: #00ffff;'> </span></div><div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace text--primary'>00FFFF</p></div></div><div><div class='cols_column'><span class='mini-color circle' style='background: #ff8000'> </span><span class='mini-color circle' style='background: #ffff00'> </span></div><div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace text--primary'>FF8000, FFFF00</p></div></div></div></div>)
     ),
     'rgba(99,60,176,0.5)' => test_zci(
         'Hex: #633CB0 ~ rgba(99, 60, 176, 0.5) ~ rgb(39%, 24%, 69%) ~ hsl(260, 49%, 46%) ~ cmyb(44%, 66%, 0%, 31%)'."\n".'Complementary: #89B03C'."\n".'Analogous: #9D3CB0, #B03C89',