/*
	Interactive [ Landing Page ] ~ Main CSS.
        Developed By ~ QuadCodes
        Date ~ 30/11/2010
        Version ~ 1.0
	Website ~ http://quadcodes.com/
*/

/* `BODY	
----------------------------------------------------------------------------------------------------*/

body {
	min-width: 960px;
	background-image: url(../img/grid_bg.png);
	font-family: "Verdana",Calibri,Arial;
	font-size: 11px;
	color: #777777;
	letter-spacing: 0.015em;
	border-top: 6px #DEDEDE solid;
	background-color: #F2F2F2;
}


/* `HEADER RIBBON LOGO
----------------------------------------------------------------------------------------------------*/

#ribbon {
        position: absolute;        
        width: 100%;        
        background-image: url('../img/shadow.png');
        background-repeat: none;    
}        
#logo {
	margin-right: auto;
	margin-left: auto;
	width: 800px;
	margin-top: 30px;
	margin-bottom: 10px;
}
#call { 
        position: relative;
        float:right;
        padding: 40px 20px 0 0;      
}


/* `MAIN DIV - CONTENT ETC
----------------------------------------------------------------------------------------------------*/
#main {
        position: relative;                  
}
.main_left { 
        width: 420px;
        float: left;         
        padding: 10px 20px 10px 0;                     
}
.main_right { 
        width: 500px;
        float: left; 
        padding: 10px 0;  
}
.video {
        width: 445px;
        height: 293px;
        padding: 10px;
        margin: 15px 0 0 50px;
        background-image: url('../img/video_bg.png');
        background-repeat: none;
}
.content   {
	position: relative;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#bar_wrapper, #footer_wrapper {
        background: #EEEEEE;
        border-top: 1px #E5E5E5 solid;
        border-bottom: 1px #E5E5E5 solid;   
}
.subscribe_input {
        width: 400px;
        padding: 10px;
        *margin-top: 18px; /* --- IE7 FIX --*/
        color: #666666;
}
.subscribe, .social {
        float: left;       
}
.subscribe input[type="image"] {
        position: relative;
        top: 13px;
        *top: 2px; /* --- IE7 FIX --*/             
        left: 22px;       
}
.social {
        padding-left: 55px;       
}
ul.social_icons {
        margin: 20px 0; 
} 
ul.social_icons li {
        display: inline;
        padding: 0 5px;               
}
.para, .footer_info {
        width: 530px;
        float: left;
        padding: 10px 0;
}
.three_column {
        min-height: 100px;
        border-left: 1px #DDDDDD solid;
}
.side_box {
        width: 390px;
        float: left;
        padding: 20px 0 20px 0;
}
ul.links li {
        display: inline;
        padding: 0 8px 0 5px;
        border-right: 1px #AAAAAA solid;        
}
ul.feature li {
        padding: 5px;
}
ul.feature li a {
        color: #666666;
}
.footer_info {      
        width: 700px;
        float: left;     
}
.footer_logo {
        width: 240px;
        float: right;       
}
.border_right {        
        border-right: 1px #DDDDDD solid;
}
.black {
        color: #000000;
}
.left {
        float:left;
}
.right {
        float:right;
}

/* `SIGN UP & TRIAL BUTTONS
----------------------------------------------------------------------------------------------------*/
.sign_up { 
        width: 195px;
        float: left;
        padding: 10px 10px 10px 0;
        margin: 20px 0;
        border: 1px #DDDDDD solid;        
        background: #FFFFFF;                          
}
.take_trial { 
        width: 195px;
        float: left;
        padding: 10px 10px 10px 5px;
        margin: 20px 0;       
        border-top: 1px #DDDDDD solid;
        border-right: 1px #DDDDDD solid;
        border-bottom: 1px #DDDDDD solid;
        background: #F9F9F9;                                       
}
.sign_up:hover {
        background: #F7FDFF;
        border-bottom: 1px #DDDDDD solid;
        border-left: 1px #DDDDDD solid;             
}
.take_trial:hover {
        background: #FBFFF3;
        border-bottom: 1px #DDDDDD solid;
        border-right: 1px #DDDDDD solid;             
}
.sign_up img, .take_trial img { 
        margin: 5px 0 0 22px;                         
}


/* `TYPOGRAPHY
----------------------------------------------------------------------------------------------------*/
h1 {
        margin: 20px 0;
        font-family: Calibri;
        font-size: 26px;
        color: #3AC5FF;        
        text-shadow: 0px 2px 3px #FFFFFF;             
}
h2 {
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120px;
	color: #333;
	text-shadow: 0px 2px 3px #FFFFFF;
}
.content h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 35px;
	color: #231F20;
}

h3 {
        font-family: Calibri;
        font-size: 16px;
        color: #555555;        
        text-shadow: 0px 2px 3px #FFFFFF;            
}
.para h3 {
        margin: 10px 0; 
        font-family: Calibri;
        font-size: 16px;
        color: #555555;                 
        text-shadow: 0px 2px 3px #FFFFFF;            
}
h4 {
        margin: 0 0 15px 0; 
        font-family: Calibri;
        font-size: 14px;
        color: #555555;                       
        text-shadow: 0px 2px 3px #FFFFFF;            
}
.note {
        margin: 8px;
        font-family: Calibri;
        font-size: 10px;
        color: #888888;        
        line-height: 12px;                   
}
.note_condition {
        position: relative;
        top: -15px;
        *top: 0px; /* --- IE7 FIX --*/
        margin: 8px; 
        font-family: Calibri;
        font-size: 10px;
        color: #AAAAAA;                                     
}
p {
        font-family: Verdana;
        font-size: 11px;
        color: #777777;
        line-height: 16px;
        text-shadow: 0px 2px 3px #FFFFFF;        
}
a { 
        color:#3AC5FF;
        text-decoration: underline;
}
a:hover { 
        color:#018ABB;
        text-decoration: none;  
}


/* `QUOTES CSS 
----------------------------------------------------------------------------------------------------*/

.quotes_icon {
        float: left;
        width: 40px;
        height: 33px;
        margin: 0 10px 0 0;
        background-image: url('../img/quotes.png');
        background-repeat: none;
}
.quotes {        
        font-family: Times new roman;
        font-size: 20px;
        font-style: oblique;
}
.commenter {
        font-family: Calibri;
        font-size: 12px;
}


/* `THUMB ZOOMER CSS 
----------------------------------------------------------------------------------------------------*/

.imggallery {
        margin: 0 0 0 -20px;
}
ul.thumb {
        float: left;
        width: 480px;
        list-style: none;               
}
ul.thumb li {
        position: relative;  /* Set the absolute positioning base coordinate */
        width: 100px;
        height: 100px;
        float: left;         
        margin: 10px 0 30px 20px;        
}
ul.thumb li img {
        position: absolute;
        left: 0; 
        top: 0;
        width: 100px; 
        height: 100px; /* Set the thumbnail size */
        padding: 10px;  
        -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
        border: 1px solid #DDDDDD;	
        background: #FFFFFF;          
}
ul.thumb li img.hover {
        background: url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
        border: none; /* Get rid of border on hover */
}
.content .links {
	text-align: center;
	margin: 20px;
	float: left;
	padding-left: 150px;
}