freecss_blue : Blue « Templates « HTML / CSS

freecss_blue
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MyFreeCssTemplates.com free CSS template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  background: url(freecss_blue-images/bg_top.gif) top repeat-x  #FFFFFF;
  line-height: 18px;
}

#bg_bot { background: url(freecss_blue-images/bg_bot.gif) bottom repeat-x;}
  
#main {
  width: 800px;
  margin: 0px auto;
  background:url(freecss_blue-images/main.jpg) right top no-repeat;}

#header { 
  height: 80px;
}

#logo {  
    padding: 30px 0px 0px 0px;
    float: left;
    width: 300px;
}


#logo a {
  text-decoration: none;
  font-size: 14px;
  color: #ffffff;
  font-weight:bold;

}
  
#logo H2 a{
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 100;
  padding-left: 0px;
}

#buttons{
  text-align:center;
  height: 47px;
  margin-left: 0px;
  padding: 31px 0px 0px 0px;
  float:right;
  width: 478px;
  
}

#buttons a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 100;
  display: block;
  float: left;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  padding-top: 7px;
  height: 25px;
}

.but1 { width: 69px;}
.but2 { width: 60px;}
.but3 { width: 76px;}
.but4 { width: 90px;}
.but5 { width: 102px;}

.but1:hover { background: url(freecss_blue-images/but1.png);}
.but2:hover { background: url(freecss_blue-images/but2.png);}
.but3:hover { background: url(freecss_blue-images/but3.png);}
.but4:hover { background: url(freecss_blue-images/but4.png);}
.but5:hover { background: url(freecss_blue-images/but5.png);}


#buttons .but_n {
}

.but_razd { height: 10px;
      width: 17px;
      float: left;}

#buttons .but:hover {
  text-decoration: none;
  color: #ffffff;
  background: url(freecss_blue-images/but_hover.png) left top no-repeat;
  }

  
.top { height:318px;
    padding: 22px 25px 0px 25px;
    background: url(freecss_blue-images/top_bg.png) ;
    color:#ffffff;
    
  }  
  
.top_right { float: right;
      background: url(freecss_blue-images/top_left.gif) left top no-repeat;
      width: 262px;
      height: 271px;
      padding: 10px;
    }
    
.spis_top { list-style: none;
      padding: 0px 0px 0px 16px;}

.spis_top li {  background: url(freecss_blue-images/spis_top.gif) 0px 11px no-repeat;
        padding: 4px 0px 0px 23px;}
        
.spis_top a { color:#FFFFFF;
      text-decoration: none;
      font-size:14px;}  
.spis_top a:hover { text-decoration:underline;}      
            

.top_img { background: url(freecss_blue-images/top_img.jpg) left top no-repeat;
    height: 292px;
    width: 466px;
    float: left;}
.top_img2 { background: url(freecss_blue-images/top_img2.jpg) left top no-repeat;
    height: 292px;
    width: 466px;
    float: left;}
    
.top_img3 { background: url(freecss_blue-images/top_img3.jpg) left top no-repeat;
    height: 292px;
    width: 466px;
    float: left;}
        
    
.circl_all {
    height: 17px; 
    vertical-align:top;
    width: 75px;
    margin: auto;
    padding: 16px 0px 16px 0px;}

.circl { background: url(freecss_blue-images/circl.png) left top no-repeat;
  height: 17px;
  width: 17px;
  margin: 0px 7px 0px 0px;
  text-align: center;
  float:right; }
.circl:hover {
  background:url(freecss_blue-images/circl_hover.png) left top no-repeat; }
  

#content{
  background: url(freecss_blue-images/content.gif) left repeat-y;
  padding: 0px 0px 0px 0px;
}
.content_razd{
  background: url(freecss_blue-images/content_razd.gif) 832px repeat-y;
  padding: 0px 0px 0px 0px;
  clear:both;
}


.all_box { background: url(freecss_blue-images/all_box.gif) center top no-repeat;
      padding: 15px 0px 0px 0px;}

.razd_col {
  background:url(freecss_blue-images/razd_col.gif) 25px 5px no-repeat;
  height: 35px;
  float:left;
  width: 19px;}
  
.box {
  float: left;
  width: 263px;
  padding: 0px 0px 0px 0px;}
  
.box_l {float: left;
  text-align: left;
  width: 57px;
  padding: 0px 0px 0px 0px;}
  
.box_r {float: left;
  width: 200px;
  padding: 0px 0px 0px 0px;}  
  
.row_ind {}

a:hover {
  color: #666666;
  text-decoration: underline;}

#left{
  width: 251px;
  float: left;
  margin-left: 16px;
  padding: 0px 0px 0px 0px;
}

.img_l {  float:left;
    margin: 5px 20px 0px 0px;
}

.img_r {  float: right;
    margin: 0px 0px 0px 15px;
}

H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:24px;
  font-weight: 100;
  color: #ffffff;
  text-align: left;
  padding: 0px 0px 0px 0px;
}

#content .top .scrollable .items .item .top_right H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 100;
  color: #ffffff;
  line-height: 20px;
  text-align: left;
  padding-bottom: 10px;
}

H2{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #000000;
  text-align: left;
  padding: 0px 0px 0px 0px;
}

.read{
  display:block;
  float: right;
  width: 67px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  height: 22px;
  text-decoration: none;
  color: #ffffff;
  text-decoration: none;
  font-size:12px;
  font-weight: 100;
  background: url(freecss_blue-images/read.png) left top no-repeat;
}

.read:hover {
  text-decoration: underline;
  color: #ffffff;
}

.line { background: url(freecss_blue-images/line.gif) repeat-x;
    height: 2px;}

.text { padding: 0px 16px 0px 16px;}


#right{
  float: right;
  width: 507px;
  margin-right: 14px;
}
  
#bottom {
  width: 100%;
  background: url(freecss_blue-images/bottom.gif) left repeat-y;
  color:#000000;
  padding: 0px 0px 0px 0px;
  height: 265px;
}

#bottom h2{
  font-family: Arial, Helvetica, sans-serif;
  padding: 15px 0px 18px 0px;
  font-size: 18px;
  text-align: center;
  color: #000000;
  font-weight: 100;
  line-height: 20px;
}

.b_col1 {
  width: 136px;
  float: left;
  margin-left: 0px;
}
.b_col2 {
  width: 213px;
  float: left;
  margin-left: 24px;
}

.b_col3 {
  width: 230px;
  float: left;
  margin-left: 8px;
  text-align: left;
}

.b_col4 {
  width: 158px;
  float: left;
  margin-left: 30px;
  text-align: left;
}

.lh { line-height: 25px;}

.spis {
  list-style:none;
  padding: 0px 0px 0px 5px;}

.spis li {
  padding: 5px 0px 0px 16px;
  background: url(freecss_blue-images/spis.gif) 0px 12px no-repeat;
  }
.spis a:hover {
  text-decoration:underline;
  }
  
.spis a {
  color:#000000;
  text-decoration:none;}
  
.fu_i {
  padding: 0px 14px 0px 0px;
  vertical-align: middle ;
}

.spisb2 {
  list-style:none;
  padding: 0px 0px 0px 0px;}

.spisb2 li {
  padding: 10px 0px 0px 0px;
  background: none;
  }
  
.spisb2 li a {
  color:#000000;
  text-decoration: none;
  padding-top: 2px;
  font-weight:100;
  
}
.spisb2 li a:hover {
  text-decoration: underline;
}

#footer{
  height: 54px;
  font-size: 11px;
  color: #000000;
  text-align: center;
  padding: 15px 0px 0px 0px;
  background: url(freecss_blue-images/footer.jpg) 0px 15px no-repeat;
  font-weight: 100;
}

#footer a{
  color: #000000;
  font-size: 11px;
  text-decoration: none;
  font-weight: 100;
}

#footer a:hover{
  color: #000000;
  font-size: 11px;
  text-decoration: underline;
  font-weight: 100;
}



/* calendar */  


#calendar {
  margin: 0px 0px 0px 0px;
  color:#000000;
  font-size:10px;
  line-height: 15px;
}

#calendar a {
  color:#000000;
}

#calendar table {
  width: 100%;
  text-align: center;
}

#calendar thead {

}

#calendar td {
  height: 15px;
}

#calendar #prev{
  text-align: left;
}
#calendar #prev a{
  color:#000000;
}

#calendar #next {
  text-align: right;
}
#calendar #next a{
  color:#000000;
}

#calendar tfoot a {
  text-decoration: none;
  font-weight: bold;
}

#calendar #now {
  background: #529EBB;
  border: 1px solid #3C4F77;
  font-weight: bold;
  color: #ffffff
}  


/*
scroll styles here
*/

.item { width: 760px; height: 315px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}

.scrollable { position:relative; overflow:hidden; width: 760px; height: 315px;} 
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;} 
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; margin:5px 0; padding-left: 320px; padding-top: 14px} 
.navi a { width: 16px; cursor:pointer; height: 16px; float:left; margin:0 0 0 3px; background:url(freecss_blue-images/circl.png) no-repeat scroll right top; display:block; font-size:1px;} 
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px;  background:url(freecss_blue-images/circl_hover.png) no-repeat scroll right top}

.header1
{
width: 760px; height: 315px;

}

.header2
{
width: 760px; height: 315px;
}

.header3
{
width: 760px; height: 315px;
}


/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */


div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}

</style>


<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
</head>
<body>


<div  id="bg_bot">


<div id="main">
<!-- header begins -->
<div id="header">
  <div id="buttons">
      <a href="index.html" class="but1 "  title="">Home</a><div class="but_razd"></div>
      <a href="blog.html"  class="but2" title="">Blog</a><div class="but_razd"></div>
      <a href="gallery.html"  class="but3" title="">Gallery</a><div class="but_razd"></div>
      <a href="about_us.html" class="but4" title="">About Us</a><div class="but_razd"></div>
      <a href="contact_us.html" class="but5" title="">Contact us</a>
    </div>
  <div id="logo">
      <a href="#">freecss_blue</a>
        <h2><a href="#"><small>Small Company Slogan Goes Here</small></a></h2>
    </div>
    
</div>
<!-- header ends -->

<!-- content begins --> 
<div id="content">
        <div class="top">
              
        
          <div class="scrollable">
        <div class="items">
          <div class="item">
            
            <div class="top_img"></div>
            <div class="top_right">
                  <h1>Nulla bibendum urna eu massa pharetra a tempor odio tincidunt.</h1>
                    <div style="height:20px"></div>
                  <div><b>Quisque malesuada pretium magna, sed posuere tellus vulputate eu. </b><br />
                    In ut varius leo. Ut ante nisl, faucibus ut mollis at, suscipit et augue. In hac habitasse platea dictumst.<br />
          Donec ornare, dui nec faucibus mattis, velit felis eleifend nisi, eu luctus purus enim eget leo. Ut luctus volutpat libero in auctor.</div>
                    <div style="height:5px;"></div>
                    <div style="height:27px; float: right">
                        <a href="#" class="read">read more</a>
                    </div>
                
              </div>
        <div style="clear: both"></div>
                                                
          </div> <!-- item -->
          <div class="item">
              <div class="header2">
            
               <div class="top_img2"></div>
            <div class="top_right">
                  <h1>Nulla bibendum urna eu massa pharetra a tempor odio tincidunt.</h1>
                    <div style="height:20px"></div>
                  <div><b>Quisque malesuada pretium magna, sed posuere tellus vulputate eu. </b><br />
                    In ut varius leo. Ut ante nisl, faucibus ut mollis at, suscipit et augue. In hac habitasse platea dictumst.<br />
          Donec ornare, dui nec faucibus mattis, velit felis eleifend nisi, eu luctus purus enim eget leo. Ut luctus volutpat libero in auctor.</div>
                    <div style="height:5px;"></div>
                    <div style="height:27px; float: right">
                        <a href="#" class="read">read more</a>
                    </div>
                
              </div>
        <div style="clear: both"></div>
  
            
            </div>            
          </div> <!-- item -->
          <div class="item">
              <div class="header3">
            
               <div class="top_img3"></div>
            <div class="top_right">
                  <h1>Nulla bibendum urna eu massa pharetra a tempor odio tincidunt.</h1>
                    <div style="height:20px"></div>
                  <div><b>Quisque malesuada pretium magna, sed posuere tellus vulputate eu. </b><br />
                    In ut varius leo. Ut ante nisl, faucibus ut mollis at, suscipit et augue. In hac habitasse platea dictumst.<br />
          Donec ornare, dui nec faucibus mattis, velit felis eleifend nisi, eu luctus purus enim eget leo. Ut luctus volutpat libero in auctor.</div>
                    <div style="height:5px;"></div>
                    <div style="height:27px; float: right">
                        <a href="#" class="read">read more</a>
                    </div>
                
              </div>
        <div style="clear: both"></div>
            
            </div>            
          </div> <!-- item -->      
                      
          
        </div> <!-- items -->
      </div> <!-- scrollable -->
      <div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->       
        
                <div style="clear: both"></div>          
              
            </div> 
            <div class="circl_all">
                <div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
            </div>
            
            <div class="all_box">
                <div class="box">
                  <div class="box_l"><img src="freecss_blue-images/imgb1.gif" alt="" /></div>
                    <div class="box_r">
                      <h2>Aliquam congue nisi quis felis porttitor vestibulum.</h2>
                        <strong>Vivamus tempor mauris at mi convallis tempor.</strong><br />
            Ut tellus erat, ultricies sed cursus sit amet, vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum.
                      <div style="height:5px"></div>
                        <div style="height:27px;">
                            <a href="#" class="read">read more</a>
                        </div>
                    </div>
                    <div style="clear: both;"></div> 
                </div>
                
                <div class="box" style="margin-left:5px">
                  <div class="box_l"><img src="freecss_blue-images/imgb2.gif" alt="" /></div>
                    <div class="box_r">
                      <h2>Vivamus pretium.</h2>
                        <strong> Nulla facilisi. Aliquam erat volutpat. </strong><br />
            Donec lobortis bibendum pellentesque. Sed lobortis, arcu sit amet tempus interdum, dui sem convallis turpis, sed eleifend arcu urna sit amet lacus.<br />
            Nunc justo est, suscipit at laoreet vel, placerat 
                      <div style="height:5px"></div>
                        <div style="height:27px;">
                            <a href="#" class="read">read more</a>
                        </div>
                    </div>
                    <div style="clear: both;"></div> 
                </div>
                
                <div class="box" style="margin-left:5px">
                  <div class="box_l"><img src="freecss_blue-images/imgb3.gif" alt="" /></div>
                    <div class="box_r">
                      <h2>Quisque iaculis facilisis.</h2>
                        <strong>Proin pretium diam quis orci placerat sit amet ullamcorper lectus blandit.</strong><br />
            Fusce eu metus vitae massa euismod tempor. Fusce condimentum leo accumsan dolor laoreet eleifend. Fusce congue sem in orci sollicitudin pellentesque.
            <div style="height:5px"></div>
                        <div style="height:27px;">
                            <a href="#" class="read">read more</a>
                        </div>
                    </div>
                    <div style="clear: both;"></div> 
                </div>
                <div style="clear: both;"></div> 
            </div>
            <div style="height:30px"></div>
            <div class="line"></div>
            <div style="height:5px"></div>
            <h2 style="text-align:center">Our projects.</h2>
            <div style="height:5px"></div>
            <div class="line"></div>
            <div style="height:30px"></div>
            <div>
              <img src="freecss_blue-images/img1.jpg" style="float: left;" alt="" />
                <div style=" float:left; width:8px; height:10px"></div>
                <img src="freecss_blue-images/img2.jpg" style="float: left;" alt="" />
                <div style=" float:left; width:8px; height:10px"></div>
                <img src="freecss_blue-images/img3.jpg" style="float: left;" alt="" />
                <div style="clear: both;"></div>
            </div>
            <div class="circl_all" style=" padding: 0px;">
              </div>
            <div class="line"></div>
            <div style="height:20px"></div>
            <h2 style="text-align:center; padding: 0px 20px;">?Phasellus malesuada turpis eget arcu pellentesque vitae mollis dui lacinia. Maecenas dui nunc, ultricies a hendrerit at, hendrerit quis felis. Proin interdum imperdiet tortor, ut venenatis nulla iaculis ut.?</h2>
             <div style="height:20px"></div>
</div>

<!-- content ends -->
 <!-- bottom begin -->
<div id="bottom">
    <div class="b_col1">
      <h2>Services</h2>
      <ul class="spis">
            <li><a href="#">Service Number 1</a></li>
            <li><a href="#">Service Number 2 </a></li>
            <li><a href="#">Service Number 3</a></li>
            <li><a href="#">Service Number 4</a></li>
            <li><a href="#">Service Number 5 </a></li>
            <li><a href="#">Service Number 6</a></li>
            <li><a href="#">Service Number 7</a></li>
      </ul>
      
        
 </div>
    <div class="b_col2">
        <h2>Contact Information</h2>
        <div class="lh">
            1234 SomeStreet<br />
            Brooklyn, NY 11201<br />
            Phone:  1(234) 567 8910<br />
            Fax: 1(234) 567 8910<br />
            E-mail: companyname@yahoo.com
      </div>
        
        
        <div style="height:15px"></div>
      
    </div>
    <div class="b_col3">
        <h2>Calendar</h2>
        <div id="calendar">
              <table summary="Calendar">
        <caption>
                  <span style=" font-size:10px;">January 2010</span>
                </caption>
                <thead>
                  <tr>
                    <th abbr="Monday" scope="col" title="Monday">M</th>
                    <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                    <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                    <th abbr="Thursday" scope="col" title="Thursday">T</th>
                    <th abbr="Friday" scope="col" title="Friday">F</th>
                    <th abbr="Saturday" scope="col" title="Saturday">S</th>
                    <th abbr="Sunday" scope="col" title="Sunday">S</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <td colspan="3" id="prev" abbr="Des"><a href="#">&laquo; Des</a></td>
                    <td class="pad">&nbsp;</td>
                    <td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb &raquo;</a></td>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td colspan="5" class="pad">&nbsp;</td>
                    <td>1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                  </tr>
                  <tr>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td id="now">16</td>
                  </tr>
                  <tr>
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                  </tr>
                  <tr>
                    <td>24</td>
                    <td>25</td>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td >29</td>
                    <td>30</td>
                  </tr>
                  <tr>
                    <td>31</td>
                    <td colspan="6"></td>
                  </tr>
                </tbody>
              </table>
        </div>
        
        
        
        
   </div>
    <div class="b_col4">
        <h2>Follow Us</h2>
      <ul class="spisb2">
            <li><img src="freecss_blue-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Subscribe to Blog</a></li>
            <li><img src="freecss_blue-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Be a fan on Facebook </a></li>
            <li><img src="freecss_blue-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">RSS Feed</a></li>
            <li><img src="freecss_blue-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">Follow us on Twitter</a></li>
      </ul>
   </div>
    <div style="clear: both;"></div>
</div>
<!-- bottom end --> 
    
    
<!-- footer begins -->
            <div id="footer">
          Copyright  2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS Templates</a><!-- end --><br />
                <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></div>
        <!-- footer ends -->
</div>




</div>
</body>
</html>
Related examples in the same category

1.	metamorph_blue
2.	metamorph_bluefeather
3.	metamorph_blueflower
4.	metamorph_blueglowing
5.	metamorph_bluemadness
6.	metamorph_bluemess_lt2
7.	metamorph_bluerock
8.	metamorph_bluething
9.	metamorph_bluewave
10.	metamorph_bubbleblue_lt
11.	metamorph_bubblesonblue
12.	metamorph_lightblue
13.	metamorph_shiningblue
14.	metamorph_simpleblue
15.	metamorph_uberblue
16.	metamorph_wavesinblue
17.	blue-hosting
18.	blue-neutral
19.	blue-pigment1
20.	blue-sky
21.	blue-white
22.	blue-wood
23.	Blue 1
24.	blue99
25.	blueblogtemplate
26.	bluebottle
27.	BlueBridge
28.	bluebrush
29.	bluebusiness
30.	bluecarbon
31.	bluecorporation
32.	bluediamond
33.	blueflex
34.	BlueFlower
35.	BlueFresh
36.	bluegray
37.	blueled
38.	blueminimal
39.	blueminimalsidebar
40.	blueprism
41.	Blueshine
42.	blueshuffle
43.	BlueSpace
44.	BlueSquareShadow
45.	bluesurge
46.	bluethickline
47.	bluetoolkit
48.	bluewave
49.	blueweb
50.	blueworld
51.	bluey
52.	blue_circles
53.	blue_sky
54.	blue_space
55.	blue_trees
56.	bublue-studio
57.	bussinesblue
58.	fain-blue
59.	fairyblue
60.	basicblue
61.	CleanandBlue
62.	cleanblue
63.	flyingblue
64.	easy-blue
65.	FunkyCoolBlue
66.	genericblue
67.	gallery-blue
68.	MonsterBlue
69.	Simple_Blue
70.	wide-blue
71.	a_bit_modern_bigBlue
72.	mistyblue
73.	portal_blue
74.	SimplyBlue
75.	sleekcssblue
76.	Sexy_Blue
77.	WonderfulBlue
78.	sweetbuzzblue
79.	light-blue
80.	groovyblue
81.	iblue2b