yes I can 
main.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/forms.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/grid.css" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/typography.css" />
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>
<body>
<div id="barratop"></div>
<div id="global">
<div id="tools">
<ul id="language"></ul>
<?php $this->widget('zii.widgets.CMenu',array(
'id'=>'mainnav',
'items'=>array(
array('label'=>'', 'url'=>array('/site/index'),'itemOptions'=>array('class'=>'home_en_us')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
//array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
//array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->loginUrl, 'label'=>Yii::app()->getModule('user')->t("Login"), 'visible'=>Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->registrationUrl, 'label'=>Yii::app()->getModule('user')->t("Register"), 'visible'=>Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->profileUrl, 'label'=>Yii::app()->getModule('user')->t("Profile"), 'visible'=>!Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->logoutUrl, 'label'=>Yii::app()->getModule('user')->t("Logout").' ('.Yii::app()->user->name.')', 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'Rights', 'url'=>array('/rights/authItem/generate'), 'visible'=>Yii::app()->user->checkAccess(Rights::module()->superuserName))
),
)); ?>
</div>
<div id="top" >
<h1 id="logotypo">
<?php echo CHtml::encode(Yii::app()->name); ?>
</h1>
<div class="slogan">
<img alt="Coco Suites" src="<?php echo Yii::app()->theme->baseUrl; ?>/images/css_txt_search.jpg"></img>
</div>
</div>
<?php echo $content; ?>
</div>
<div id="footer">
<div id="container-footer">
<p class="copyright">
Copyright © <?php echo date('Y'); ?> by My Company.<br/>
All Rights Reserved.<br/></p>
<p class="credits"><?php echo Yii::powered(); ?></p>
</div>
</div><!-- footer -->
</body>
</html>
contact.php :
<?php
$this->pageTitle=Yii::app()->name . ' - Contact Us';
$this->breadcrumbs=array(
'Contact',
);
?>
<div id="uniqueColumn">
<h2>Contact Us</h2>
<?php if(Yii::app()->user->hasFlash('contact')): ?>
<div class="flash-success">
<?php echo Yii::app()->user->getFlash('contact'); ?>
</div>
<?php else: ?>
<br>
<h3>
If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.
</h3>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'contact-form',
'enableAjaxValidation'=>true,
'clientOptions'=>array('validateOnSubmit'=>true, 'validateOnChange'=>false),
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php //echo $form->errorSummary($model); ?>
<div class="note">
<?php echo $form->labelEx($model,'name'); ?><br>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="note">
<?php echo $form->labelEx($model,'email'); ?><br>
<?php echo $form->textField($model,'email'); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<div class="note">
<?php echo $form->labelEx($model,'subject'); ?><br>
<?php echo $form->textField($model,'subject',array('size'=>60,'maxlength'=>128)); ?>
<?php echo $form->error($model,'subject'); ?>
</div>
<div class="note">
<?php echo $form->labelEx($model,'body'); ?><br>
<?php echo $form->textArea($model,'body',array('rows'=>6, 'cols'=>50)); ?>
<?php echo $form->error($model,'body'); ?>
</div>
<?php if(CCaptcha::checkRequirements()): ?>
<div class="note">
<?php echo $form->labelEx($model,'verifyCode'); ?><br>
<div>
<?php $this->widget('CCaptcha'); ?><br>
<?php echo $form->textField($model,'verifyCode'); ?>
<?php echo $form->error($model,'verifyCode'); ?>
</div>
<div class="hint">Please enter the letters as they are shown in the image above.
<br/>Letters are not case-sensitive.</div>
</div>
<?php endif; ?>
<?php echo CHtml::submitButton('Submit'); ?>
<br/>
<?php $this->endWidget(); ?>
</div>
</div><!-- form -->
<?php endif; ?>
I use blueprint v1.0 so :
/* --------------------------------------------------------------
forms.css
* Sets up some default styling for forms
* Gives you classes to enhance your forms
Usage:
* For text fields, use class .title or .text
* For inline forms, use .inline (even when using columns)
-------------------------------------------------------------- */
/*
A special hack is included for IE8 since it does not apply padding
correctly on fieldsets
*/
label { font-weight: bold; }
fieldset { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }
fieldset, #IE8#HACK { padding-top:1.4em; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }
/* Form fields
-------------------------------------------------------------- */
/*
Attribute selectors are used to differentiate the different types
of input elements, but to support old browsers, you will have to
add classes for each one. ".title" simply creates a large text
field, this is purely for looks.
*/
input[type=text], input[type=password],
input.text, input.title,
textarea {
background-color:#fff;
border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }
input[type=text], input[type=password],
input.text, input.title,
textarea, select {
margin:0.5em 0;
}
input.text,
input.title { width: 300px; padding:5px; }
input.title { font-size:1.5em; }
textarea { width: 390px; height: 250px; padding:5px; }
/*
This is to be used on forms where a variety of elements are
placed side-by-side. Use the p tag to denote a line.
*/
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }
/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */
.error,
.alert,
.notice,
.success,
.info { margin-bottom: 1em; border: 0px solid #ddd; }
.error, .alert { background: #ffffff; color: #ffffff; border-color: #ffffff; }
.notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success { background: #ffffff; color: #ffffff; border-color: #ffffff; }
.info { background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a { color: #514721; }
.success a { color: #264409; }
.info a { color: #205791; }
/* Personnal value */
#barratop {
background: none repeat scroll 0 0 #444444;
display: block;
height: 3px;
overflow: hidden;
}
#tools {
float: left;
padding: 10px 0 20px;
width: 940px;
}
ul#mainnav {
color: #000000;
font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
float: left;
list-style: none outside none;
margin: 16px 0 0 70px;
padding: 0;
}
#mainnav li a {
background: url("../images/sprite.png") no-repeat scroll 0 0 transparent;
display: block;
height: 100%;
width: 100%;
}
#mainnav li.home_en_us {
height: 22px;
width: 72px;
}
#mainnav li.home_en_us a {
background-position: 0 -90px;
}
#mainnav li.home_en_us.active a {
background-position: 0 -49px;
}
#mainnav li.home_en_us a:hover {
background-position: 0 -49px;
}
#mainnav li {
display: inline;
float: left;
margin: 0 5px 0 0;
overflow: hidden;
}
#global, #global-top {
background: url("../images/ccs_bck_global.gif") no-repeat scroll right top transparent;
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
text-align: left;
width: 950px;
}
ul#language {
float: left;
font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
margin: 16px 0 4px;
padding: 0;
text-align: center;
width: 200px;
}
#top {
border-top: 1px solid #E9E9E9;
display: block;
float: left;
margin: 0;
overflow: hidden;
width: 940px;
}
h1#logotypo {
color: #231F20;
float: left;
font: bold 32px Georgia,"Times New Roman",Times,serif;
height: 92px;
margin: 32px 0 0 27px;
width: 217px;
}
.slogan {
background: url("../images/sprite.png") no-repeat scroll -748px -156px transparent;
float: left;
margin: 0 0 0 26px;
padding: 0 0 25px 26px;
}
#footer {
background: none repeat scroll 0 0 #272727;
float: left;
height: auto;
padding: 0 0 35px;
text-align: center;
width: 100%;
}
#container-footer {
float: none;
margin: 0 auto;
padding: 10px 0 20px;
text-align: left;
width: 980px;
}
.copyright {
color: #909090;
float: none;
font: 14px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif;
letter-spacing: -0.5px;
margin: 47px 0 0;
padding: 0;
text-align: center;
}
.credits {
clear: both;
font: 11px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif;
margin: 10px 0 0;
padding: 0;
color: #5D5D5D;
text-align: center;
}
.credits a {
color: #5D5D5D;
}
.credits a:hover {
color: #FFFFFF;
}
#columna-doble {
float: left;
margin: 20px 0 0;
padding: 0;
width: 670px;
}
#uniqueColumn {
float: left;
margin: 20px 0 0;
padding: 0;
width: 100%;
}
.totalResults {
color: #A6A6A6;
float: right;
font: italic 12px Georgia,"Times New Roman",Times,serif;
letter-spacing: normal !important;
margin: 6px 0 0;
}
.totalResults strong {
color: #EF4135;
font: italic bold 12px Georgia,"Times New Roman",Times,serif;
letter-spacing: normal !important;
margin: -5px 0 0;
}
.logoMerchant{
margin: 6px 0;
}
.DrapeauMerchant{
position: absolute;
margin: 0 0 0 20px;
padding: 0 0 0 0;
}
#galleryMerchant {
float: right;
margin: 20px 0 0;
width: 250px;
}
.resultsGallery-img {
border: 6px solid #F4F4F4;
float: left;
height: 82px;
margin: 0 10px 0 0;
overflow: hidden;
padding: 1px;
}
.resultsGallery-img:hover {
border: 6px solid #E8E8E8;
cursor: pointer;
float: left;
margin: 0 10px 0 0;
}
.separationGallery{
background: url("../images/ccs_bck_separadorlistas.gif") repeat-x scroll left bottom transparent;
}
.parafGallery {
margin: 0 0 20px;
overflow: auto;
padding: 0 0 21px;
margin-left: auto;
margin-right: auto;
width: 96px; /* largeur obligatoire pour être centré */
}
.subTitle h3 {
color: #EF4135;
font: bold 18px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif !important;
letter-spacing: -0.5px;
margin: 0 0 20px;
text-transform: none !important;
}
.note
{
color: #000000;
font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
div.form span.required
{
color: #EF4135;
font: bold 12px Verdana,Geneva,sans-serif;
}
div.form input {
background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 25px) repeat scroll 0 0 transparent;
border: 1px solid #E4E4E4;
font: 14px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif;
margin: 5px 0 14px;
padding: 8px 8px 7px 4px;
width: 252px;
}
div.form textarea {
background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 25px) repeat scroll 0 0 transparent;
border: 1px solid #E4E4E4;
font: 14px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif;
margin: 5px 0 14px;
padding: 8px 8px 7px 4px;
width: 450px;
height: 150px;
}
div.form a
{
color: #EF4135;
text-decoration: none;
}
div.form a:hover
{
color: #939393;
text-decoration: none;
}
div.form input[type="submit"]
{
background: url("../images/sprite.png") no-repeat scroll 0 -1724px transparent;
display: block;
float: none;
font: 18px Arial,Helvetica,sans-serif;
height: 33px;
margin: 20px 0 5px 0px;
text-align: center;
width: 125px;
border:none;
color: #FFFFFF !important;
padding: 0 0 0 0;
}
div.form input[type="submit"]:hover
{
background: url("../images/sprite.png") no-repeat scroll -126px -1724px transparent;
}
div div.form .errorMessage {
margin: 0 0 0 20px;
padding: 15px 0 0 0;
position: absolute;
display:inline;
color: #EF4135;
}
div div.form .errorMessage#ContactForm_body_em_ {
margin: 0 0 0 20px;
padding: 80px 0 0 0;
position: absolute;
display:inline;
color: #EF4135;
}
.note.error input
{
border-color: #EF4135;
}
.note.error{
color: #000000;
font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.error{
color: #000000;
font: 12px "Lucida Sans Unicode","Lucida Grande",sans-serif;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
div div.form .error input
{
border-color: #EF4135;
}
.note.error textarea
{
border-color: #EF4135;
}
.note.success input
{
border-color: #C6D880;
}
div div.form .success input
{
border-color: #C6D880;
}
.note.success textarea
{
border-color: #C6D880;
}
/* --------------------------------------------------------------
grid.css
* Sets up an easy-to-use grid of 24 columns.
By default, the grid is 950px wide, with 24 columns
spanning 30px, and a 10px margin between columns.
If you need fewer or more columns, namespaces or semantic
element names, use the compressor script (lib/compress.rb)
-------------------------------------------------------------- */
/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}
/* Use this class on any .span / container to see the grid. */
.showgrid {
background: url(src/grid.png);
}
/* Columns
-------------------------------------------------------------- */
/* Sets up basic grid floating and margin. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
float: left;
margin-right: 10px;
}
/* The last column in a row needs this class. */
.last { margin-right: 0; }
/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}
.span-7 {width: 270px;}
.span-8 {width: 310px;}
.span-9 {width: 350px;}
.span-10 {width: 390px;}
.span-11 {width: 430px;}
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24 {width:950px; margin-right:0;}
/* Use these classes to set the width of an input. */
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
border-left-width: 1px;
border-right-width: 1px;
padding-left: 5px;
padding-right: 5px;
}
input.span-1, textarea.span-1 { width: 18px; }
input.span-2, textarea.span-2 { width: 58px; }
input.span-3, textarea.span-3 { width: 98px; }
input.span-4, textarea.span-4 { width: 138px; }
input.span-5, textarea.span-5 { width: 178px; }
input.span-6, textarea.span-6 { width: 218px; }
input.span-7, textarea.span-7 { width: 258px; }
input.span-8, textarea.span-8 { width: 298px; }
input.span-9, textarea.span-9 { width: 338px; }
input.span-10, textarea.span-10 { width: 378px; }
input.span-11, textarea.span-11 { width: 418px; }
input.span-12, textarea.span-12 { width: 458px; }
input.span-13, textarea.span-13 { width: 498px; }
input.span-14, textarea.span-14 { width: 538px; }
input.span-15, textarea.span-15 { width: 578px; }
input.span-16, textarea.span-16 { width: 618px; }
input.span-17, textarea.span-17 { width: 658px; }
input.span-18, textarea.span-18 { width: 698px; }
input.span-19, textarea.span-19 { width: 738px; }
input.span-20, textarea.span-20 { width: 778px; }
input.span-21, textarea.span-21 { width: 818px; }
input.span-22, textarea.span-22 { width: 858px; }
input.span-23, textarea.span-23 { width: 898px; }
input.span-24, textarea.span-24 { width: 938px; }
/* Add these to a column to append empty cols. */
.append-1 { padding-right: 40px;}
.append-2 { padding-right: 80px;}
.append-3 { padding-right: 120px;}
.append-4 { padding-right: 160px;}
.append-5 { padding-right: 200px;}
.append-6 { padding-right: 240px;}
.append-7 { padding-right: 280px;}
.append-8 { padding-right: 320px;}
.append-9 { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}
/* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
.prepend-4 { padding-left: 160px;}
.prepend-5 { padding-left: 200px;}
.prepend-6 { padding-left: 240px;}
.prepend-7 { padding-left: 280px;}
.prepend-8 { padding-left: 320px;}
.prepend-9 { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}
/* Border on right hand side of a column. */
.border {
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #ddd;
}
/* Border with more whitespace, spans one column. */
.colborder {
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #ddd;
}
/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-6 { margin-left: -240px; }
.pull-7 { margin-left: -280px; }
.pull-8 { margin-left: -320px; }
.pull-9 { margin-left: -360px; }
.pull-10 { margin-left: -400px; }
.pull-11 { margin-left: -440px; }
.pull-12 { margin-left: -480px; }
.pull-13 { margin-left: -520px; }
.pull-14 { margin-left: -560px; }
.pull-15 { margin-left: -600px; }
.pull-16 { margin-left: -640px; }
.pull-17 { margin-left: -680px; }
.pull-18 { margin-left: -720px; }
.pull-19 { margin-left: -760px; }
.pull-20 { margin-left: -800px; }
.pull-21 { margin-left: -840px; }
.pull-22 { margin-left: -880px; }
.pull-23 { margin-left: -920px; }
.pull-24 { margin-left: -960px; }
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}
.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}
/* Misc classes and elements
-------------------------------------------------------------- */
/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
margin-top:1.5em;
}
div.append-bottom, .append-bottom {
margin-bottom:1.5em;
}
/* Use a .box to create a padded box inside a column. */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #e5eCf9;
}
/* Use this to create a horizontal ruler across a column. */
hr {
background: #ddd;
color: #ddd;
clear: both;
float: none;
width: 100%;
height: 1px;
margin: 0 0 1.45em;
border: none;
}
hr.space {
background: #fff;
color: #fff;
visibility: hidden;
}
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
.clearfix, .container {display: block;}
/* Regular clearing
apply to column that should drop below previous ones. */
.clear { clear:both; }
/* --------------------------------------------------------------
ie.css
Contains every hack for Internet Explorer,
so that our core files stay sweet and nimble.
-------------------------------------------------------------- */
/* Make sure the layout is centered in IE5 */
body { text-align: center; }
.container { text-align: left; }
/* Fixes IE margin bugs */
* html .column, * html .span-1, * html .span-2,
* html .span-3, * html .span-4, * html .span-5,
* html .span-6, * html .span-7, * html .span-8,
* html .span-9, * html .span-10, * html .span-11,
* html .span-12, * html .span-13, * html .span-14,
* html .span-15, * html .span-16, * html .span-17,
* html .span-18, * html .span-19, * html .span-20,
* html .span-21, * html .span-22, * html .span-23,
* html .span-24 { display:inline; overflow-x: hidden; }
/* Elements
-------------------------------------------------------------- */
/* Fixes incorrect styling of legend in IE6. */
* html legend { margin:0px -8px 16px 0; padding:0; }
/* Fixes wrong line-height on sup/sub in IE. */
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
/* Fixes IE7 missing wrapping of code elements. */
html>body p code { *white-space: normal; }
/* IE 6&7 has problems with setting proper <hr> margins. */
hr { margin:-8px auto 11px; }
/* Explicitly set interpolation, allowing dynamically resized images to not look horrible */
img { -ms-interpolation-mode:bicubic; }
/* Clearing
-------------------------------------------------------------- */
/* Makes clearfix actually work in IE */
.clearfix, .container { display:inline-block; }
* html .clearfix,
* html .container { height:1%; }
/* Forms
-------------------------------------------------------------- */
/* Fixes padding on fieldset */
fieldset { padding-top:0; }
legend { margin-top:-0.2em; margin-bottom:1em; margin-left:-0.5em; }
/* Makes classic textareas in IE 6 resemble other browsers */
textarea { overflow:auto; }
/* Makes labels behave correctly in IE 6 and 7 */
label { vertical-align:middle; position:relative; top:-0.25em; }
/* Fixes rule that IE 6 ignores */
input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; }
input.text:focus, input.title:focus { border-color:#666; }
input.text, input.title, textarea, select { margin:0.5em 0; }
input.checkbox, input.radio { position:relative; top:.25em; }
/* Fixes alignment of inline form elements */
form.inline div, form.inline p { vertical-align:middle; }
form.inline input.checkbox, form.inline input.radio,
form.inline input.button, form.inline button {
margin:0.5em 0;
}
button, input.button { position:relative;top:0.25em; }
/* --------------------------------------------------------------
print.css
* Gives you some sensible styles for printing pages.
* See Readme file in this directory for further instructions.
Some additions you'll want to make, customized to your markup:
#header, #footer, #navigation { display:none; }
-------------------------------------------------------------- */
body {
line-height: 1.5;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
color:#000;
background: none;
font-size: 10pt;
}
/* Layout
-------------------------------------------------------------- */
.container {
/*background: none;*/
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
text-align: left;
/*width: 950px;*/
}
hr {
background:#ccc;
color:#ccc;
width:100%;
height:2px;
margin:2em 0;
padding:0;
border:none;
}
hr.space {
background: #fff;
color: #fff;
visibility: hidden;
}
/* Text
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; }
code { font:.9em "Courier New", Monaco, Courier, monospace; }
a img { border:none; }
p img.top { margin-top: 0; }
blockquote {
margin:1.5em;
padding:1em;
font-style:italic;
font-size:.9em;
}
.small { font-size: .9em; }
.large { font-size: 1.1em; }
.quiet { color: #999; }
.hide { display:none; }
/* Links
-------------------------------------------------------------- */
a:link, a:visited {
background: transparent;
font-weight:700;
text-decoration: underline;
}
/*
This has been the source of many questions in the past. This
snippet of CSS appends the URL of each link within the text.
The idea is that users printing your webpage will want to know
the URLs they go to. If you want to remove this functionality,
comment out this snippet and make sure to re-compress your files.
*/
a:link:after, a:visited:after {
content: " (" attr(href) ")";
font-size: 90%;
}
/* If you're having trouble printing relative links, uncomment and customize this:
(note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */
/* a[href^="/"]:after {
content: " (http://www.yourdomain.com" attr(href) ") ";
} */
/* --------------------------------------------------------------
reset.css
* Resets default browser CSS.
-------------------------------------------------------------- */
html {
margin:0;
padding:0;
border:0;
}
body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* Line-height should always be unitless! */
body {
line-height: 1.5;
background: white;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
text-align: left;
font-weight: normal;
float:none !important;
}
table, th, td {
vertical-align: middle;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/* Remember to define your own focus styles! */
:focus { outline: 0; }
/* --------------------------------------------------------------
typography.css
* Sets up some sensible default typography.
-------------------------------------------------------------- */
/* Default font settings.
The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
font-size: 75%;
color: #222;
background: #fff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 {
background: url("../images/sprite.png") no-repeat scroll 0 -2320px transparent;
border-bottom: 1px solid #E9E9E9;
color: #000000;
font: bold 20px Arial,Helvetica,sans-serif;
letter-spacing: -0.8px;
margin: 0;
overflow: hidden;
padding: 0 0 8px 19px !important;
text-align: left;
}
h3 { color: #EF4135;
font: bold 18px "Lucida Sans Unicode","Lucida Grande","Lucida Bright",sans-serif !important;
letter-spacing: -0.5px;
margin: 0 0 20px;
text-transform: none !important; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }
h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
margin: 0;
}
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
/*
These can be used to pull an image at the start of a paragraph, so
that the text flows around it (usage: <p><img class="left">Text</p>)
*/
.left { float: left !important; }
p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right { float: right !important; }
p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
a:focus,
a:hover { color: #09f; }
a { color: #06c; text-decoration: underline; }
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn { font-weight: bold; }
em,dfn {
color: #BBBBBB;
font: italic 20px Arial,Helvetica,sans-serif;
letter-spacing: -0.5px;
margin: 0;
overflow: hidden;
padding: 0 0 0 5px !important;
text-align: left;
}
sup, sub { line-height: 0; }
abbr,
acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#666; }
pre { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
/* Lists
-------------------------------------------------------------- */
li ul,
li ol { margin: 0; }
ul, ol { margin: 0 1.5em 1.5em 0; }
ul { list-style-type: none; overflow: hidden; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
/* Tables
-------------------------------------------------------------- */
/*
Because of the need for padding on TH and TD, the vertical rhythm
on table cells has to be 27px, instead of the standard 18px or 36px
of other elements.
*/
table { margin-bottom: 1.4em; width:100%; }
th { font-weight: bold; }
thead th { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
You can zebra-stripe your tables in outdated browsers by adding
the class "even" to every other table row.
*/
tbody tr:nth-child(even) td,
tbody tr.even td {
background: #e5ecf9;
}
tfoot { font-style: italic; }
caption { background: #eee; }
/* Misc classes
-------------------------------------------------------------- */
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide { display: none; }
.quiet { color: #666; }
.loud { color: #000; }
.highlight { background:#ff0; }
.added { background:#060; color: #fff; }
.removed { background:#900; color: #fff; }
.first { margin-left:0; padding-left:0; }
.last { margin-right:0; padding-right:0; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
I join two screen copie with the "different code"
Thanks for your help
