/* ---------------------------------------------------------------------
Filename: stylesheet.css
Title: Primary CSS file for t7web media
Author: Toivo Betancourt, t7webmedia@gmail.com
Description: This style sheet imports another style sheet and provides
basic styling for XHTML elements of the t7web media website.
------------------------------------------------------------------------ */

@import url("base.css");
@import url("portfolio.css");

body {
margin:0px;
text-align:center;
background:url(../images/t7web-bg.png) #18232a repeat-x top left;
}

body, p, ul, div, span, label, table, td, h1, h2, h3, h4, legend, input, textarea {
font-family:"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
}

a {
color:#fff;
text-decoration:underline;
}

a:hover {
color:#60bae7;
text-decoration:none;
}

#news a:hover {
color:#f29d1d;
text-decoration:none;
}

#t7web, #t7web1 {
position:relative;
margin:0px auto;
padding:0 0 30px 0;
width:1024px;
background:url(../images/t7webContainer-bg.png) transparent no-repeat top center;
}

#t7web1 { height:700px; }
#t7web { min-height:510px; }

#header {
width:1024px;
height:125px;
text-align:left;
clear:both;
position:relative;
}

	#logo {
	float:left;
	width:435px;
	}

	#nav {
	float:left;
	width:589px;
	}
	
#body {
padding:34px 20px;
text-align:left;
clear:left;
}

#body2 {
padding:24px 20px;
}

#column01 {
position:absolute;
width:384px;
}

#column02 {
position:absolute;
width:600px;
}

#footer, #ftr {
position:absolute;
left:0px;
top:825px;
*top:835px;
width:1024px;
height:35px;
border-top:0px solid #546a80;
text-align:center;
color:#0e151a;
}

#ftr {
position:relative;
top:auto;
left:auto;
}

#contain-fmenu {margin:0px auto; width:720px;}
#fmenu ul {width:auto; padding:0px;}
#fmenu li {margin:0px; padding:0px 5px; list-style:none; float:left; font-size:14px; line-height:18px; text-align:center; color:#546a80;}
#fmenu a {color:#9fb0c1; text-decoration:none;}
#fmenu a:hover {color:#66819c; text-decoration:underline;}

#websolutions, #news, #projects, #projects2, #projects3, #projects4 {
position:absolute;
width:364px;
height:264px;
*height:280px;
}

#websolutions {
height:342px;
*height:357px;
}

#news {
top:364px;
*top:379px;
width:364px;
height:286px;
*height:285px;
}

#projects {
left:385px;
width:600px;
}

#projects2, #projects3 {
top:286px;
*top:300px;
left:385px;
width:600px;
height:364px;
}

#projects3 {
top:0px;
left:385px;
width:600px;
height:364px;
}

#projects4 {
top:386px;
*top:400px;
left:385px;
width:600px;
}

.tbox-bdr {
width:100%;
height:100%;
border:1px solid #546a80;
-webkit-border-radius:16px;
-moz-border-radius:16px;
}

.tbox {
width:100%;
height:100%;
background-color:#fff;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity: 0.1;
border:none;
-webkit-border-radius:15px;
-moz-border-radius:15px;
z-index:10;
}

.tboxPAD {
padding:14px;
}

.tboxCOPY {
position:absolute;
padding:14px;
z-index:100;
}

.lft {
width:336px;
}

.rgt {
width:572px;
}

#websolutions h1, #news h1, #projects h1, #projects2 h1, #projects3 h1, #projects4 h1, #homeHD h1, 
#webHD h1, .webBX h1, #portHD h1, .portBX h1, #abtHD h1, #contHD h1, .abtBX h1, .contBX h1 {
font-size:24px;
line-height:28px;
color:#67cdff;
font-weight:600;
}

#news h1, #homeHD h1 {
color:#f7a01f;
}

#about h1 {
color:#c82218;
}

#projects h1, #projects2 h1, #projects3 h1, #projects4 h1, .portBX h1, #portHD h1 {
color:#c3f647;
}

#websolutions h2, #news h2, #projects h2, #projects2 h2, #projects3 h2, #projects4 h2, #homeHD h2, 
#webHD h2, .webBX h2, #portHD h2, .portBX h2, #abtHD h2, #contHD h2, .abtBX h2, .contBX h2 {
font-size:20px;
line-height:24px;
color:#1f90c8;
letter-spacing:.02em
}

#webHD h2 {
color:#206bae;
}

#news h2, #homeHD h2 {
color:#e5790f;
}

#about h2 {
color:#a91513;
}

.abtBX h2 {
color:#a30d0d;
}

#abtHD h2 {
color:#a91513;
}

#portHD h2 {
color:#639f0e;
}

#abtHD h1, .abtBX h1 {
color:#d02200;
}

#contHD h1, .contBX h2 {
color:#79abcb;
}

#contHD h2 {
color:#536a80;
}

#projects h2, #projects h2 a, #projects2 h2, #projects2 h2 a, #projects3 h2, #projects3 h2 a, #projects4 h2, #projects4 h2 a, 
.portBX h2, .portBX h2 a, #portHD h2 a {
color:#7dbb25;
}

#projects h2 a, #projects2 h2 a, .portBX h2 a, #projects3 h2 a, #projects4 h2 a  {
text-decoration:underline;
}

.portBX h2 a:hover,  {
text-decoration:underline;
}

#projects h2 a:hover, #projects2 h2 a:hover, #projects3 h2 a:hover, #projects4 h2 a:hover  {
text-decoration:none;
}

#websolutions ul, #news ul, #websolutions p, #projects p, #projects2 p, #projects3 p, #projects4 p, #homeHD p, 
#webHD p, .webBX ul, .webBX p, #portHD p, .portBX ul, .portBX p, #abtHD p, #contHD p, .abtBX p, .contBX p, .abtBX ul, .contBX ul {
font-size:12px;
line-height:16px;
color:#fff;
padding:12px 0 0 0;
text-align:justify;
*text-align:left;
}

#websolutions p strong, #news p strong, #projects p strong, #projects2 p strong, #projects3 p strong, #projects4 p strong, #homeHD p strong, 
#webHD p strong, .webBX p strong, #portHD p strong, .portBX p strong, #abtHD p strong, #contHD p strong, .abtBX p strong, .contBX p strong {
font-size:14px;
font-weight:600;
color:#bfdbed;
}

#webHD p strong {
color:#f1f7fb;
}

#abtHD p strong, .abtBX p strong {
color:#fbf1f1;
}

#contHD p strong, .contBX p strong {
color:#c0def2;
}

#projects p strong, #projects2 p strong, #projects3 p strong, #projects4 p strong, #portHD p strong, .portBX p strong {
color:#dfedbf;
}

#websolutions ul, #news ul, .webBX ul, .abtBX ul, .contBX ul {
width:auto;
margin:0px 0 0 15px;
}

#websolutions li, #news li, .webBX li, .abtBX li, .contBX li {
list-style-type:disc;
padding:3px 0 0 6px;
}

#websolutions img, #news img, #projects img#icon-port, #projects2 img#icon-port, #projects3 img#icon-port, #projects4 img#icon-port2 {
float:right;
}

#projects img#screen, #projects2 img#screen2, #projects4 img#screen, #projects3 img#screen2 {
float:left;
padding:0 15px 20px 0;
}

#projects2 img#screen2, #projects3 img#screen2 {
padding:0 15px 20px 0;
}

#thumbs {
position:absolute;
bottom:0px;
padding-left:28px;
}

#thumbs a img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}

#thumbs a:hover img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}



/* ------------- Buttons --------------- */
.btn-blu, .btn-grn, .btn-org {
float:right;
font-size:14px;
line-height:26px;
font-weight:600;
padding:15px 0 0 0;
width:92px;
height:28px;
}

.btn-org {
float:none;
padding-top:25px;
margin:0px auto;
}

.btn-blu a, .btn-grn a, .btn-org a {
display:block;
width:92px;
height:28px;
color:#fff;
text-align:center;
background:url(../images/btn-blue.png) transparent no-repeat top left;
text-decoration:none;
}

.btn-grn a {
background:url(../images/btn-green.png) transparent no-repeat top left;
}

.btn-org a {
background:url(../images/btn-org.png) transparent no-repeat top left;
}

.btn-blu a:hover, .btn-grn a:hover, .btn-org a:hover {
background-position:0 -28px;
}

img#sec-ico {
float:left;
margin:0 15px 270px 0;
}

img#sec2-ico {
float:left;
margin:0 15px 110px 0;
}

img#sec3-ico {
float:left;
margin:0 15px 70px 0;
}

img#picR {
float:right;
margin:15px 0 0 20px;
}

/* ------------------------------------ BEGIN Secondary-Level Pages --------------------------------------- */
#webL, #webM, #webR, #abtL {
float:left;
width:333px;
}

#abtL {
padding-left:69px;
}

#webM {
*width:350px;
}

#webR {
width:318px;
}

#webHD, #abtHD, #contHD, #portHD, #homeHD {
text-align:left;
padding:0px 0 35px 0;
clear:both;
}

#contHD {
padding:0px 0 25px 0;
}

#webHD p, #abtHD p, #contHD p, #portHD p, #homeHD p {
font-size:14px;
line-height:24px;
}

.webBX p, .portBX p, #abtBX p, #contBX p {
line-height:18px;
}

.webBX li, .abtBX li, .contBX li {
color:#76d0ff;
text-align:left;
}

.portBX li {
color:#daff76;
text-align:left;
}

.abtBX li {
color:#ffd6d0;
text-align:left;
}

.contBX li {
color:#c0def2;
text-align:left;
}

#webHD h2 a, #webHD h2 a, #portHD h2 a, #abtHD h2 a, #contHD h2 a {
color:#a8d3ef;
letter-spacing:normal;
}

#abtHD h2 a {
color:#f9d9d9;

}

#portHD h2 a {
color:#d2f4ae;

}

#contHD h2 a {
color:#c3deef;

}

#webHD h2 a:hover, #portHD h2 a:hover, #abtHD h2 a:hover, #contHD h2 a:hover {
color:#fff;
}

.webBX, .portBX, .abtBX {
width:318px;
height:auto;
text-align:left;

}

.contBX {
width:auto;
height:auto;
text-align:left;
padding-left:68px;
/*
width:491px;
margin:0px auto;*/
}

.tbox2-bdr {
width:100%;
height:100%;
border:1px solid #546a80;
-webkit-border-radius:16px;
-moz-border-radius:16px;
}

.tbox2 {
width:auto;
height:100%;
background-color:#2c3b47;
border:none;
-webkit-border-radius:15px;
-moz-border-radius:15px;
z-index:10;
}

.tbox2PAD {
padding:14px;
}

.tbox2COPY {

padding:14px;
z-index:100;
}

#dev-pic {
background:url(../images/solutions/th-wrench-sm.png) transparent no-repeat bottom right;
}

legend {color:#a2c6de; font-size:18px; padding-left:15px;}
label { width: 10em; float: left; text-align:right; padding-right:10px; font-size:16px; color:#85a4b8; }
label.error { float:none; color:#b3d51c; padding-left:.5em; font-family:Tahoma, Helvetica, Arial, sans-serif; font-size:11px; width:auto; vertical-align:top; }
#cform p { clear: both; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

input, textarea { width:280px; background-color:#9bbfd5; color:#374c61; font-weight:600; font-size:14px; border:1px solid #7794a7; padding:2px; }

textarea { height:70px; }

input.submit {background-color:transparent; border:none; padding:0px; }

/* ------------------------------------ END Secondary-Level Pages ----------------------------------------- */


/* ------------------------------------ BEGIN NAV-MENU SPRITES ------------------------------------ */
#menu {width:555px; height:35px; background: url(../images/t7web-menu.png); margin:0px auto; padding:0px; position:relative; text-align:center;}
#menu li {margin:0px; padding:0px; list-style:none; display:block; position:absolute; font-size:18px; line-height:24px;}
#menu a {display:block; color:#e9e9e9; text-decoration:none;}
#menu a:hover {color:#fff; text-decoration:none;}

#home {left:3px; top:0px; width:106px; height:30px;}
#about {left:114px; top:0px; width:106px; height:30px;}
#solutions {left:225px; top:0px; width:106px; height:30px;}
#portfolio {left:336px; top:0px; width:106px; height:30px;}
#contact {left:447px; top:0px; width:106px; height:30px;}

#home a {height:30px;}
#about a {height:30px;}
#solutions a {height:30px;}
#portfolio a {height:30px;}
#contact a {height:30px;}

#home a:hover {background: url(../images/t7web-menu.png) -3px -35px no-repeat;}
#about a:hover {background: url(../images/t7web-menu.png) -114px -35px no-repeat;}
#solutions a:hover {background: url(../images/t7web-menu.png) -225px -35px no-repeat;}
#portfolio a:hover {background: url(../images/t7web-menu.png) -336px -35px no-repeat;}
#contact a:hover {background: url(../images/t7web-menu.png) -447px -35px no-repeat;}

#home a.active {background: url(../images/t7web-menu.png) -3px -70px no-repeat;}
#about a.active {background: url(../images/t7web-menu.png) -114px -70px no-repeat;}
#solutions a.active {background: url(../images/t7web-menu.png) -225px -70px no-repeat;}
#portfolio a.active {background: url(../images/t7web-menu.png) -336px -70px no-repeat;}
#contact a.active {background: url(../images/t7web-menu.png) -447px -70px no-repeat;}

#home a.active:hover {background: url(../images/t7web-menu.png) -3px -35px no-repeat;}
#about a.active:hover {background: url(../images/t7web-menu.png) -114px -35px no-repeat;}
#solutions a.active:hover {background: url(../images/t7web-menu.png) -225px -35px no-repeat;}
#portfolio a.active:hover {background: url(../images/t7web-menu.png) -336px -35px no-repeat;}
#contact a.active:hover {background: url(../images/t7web-menu.png) -447px -35px no-repeat;}
/* ------------------------------------ END NAV-MENU SPRITES ------------------------------------ */

#icon {margin:0px auto; padding:0px; position:relative; text-align:center; width:555px; height:89x; }
#icon li {margin:0px; padding:0px; list-style:none; display:block; float:left; width:111px; height:89px;}

#ihome {background: url(../images/ico-home.png) no-repeat bottom center;}
#iabout {background: url(../images/ico-about.png) no-repeat bottom center;}
#isolutions {background: url(../images/ico-solutions.png) no-repeat bottom center;}
#iportfolio {background: url(../images/ico-portfolio.png) no-repeat bottom center;}
#icontact {background: url(../images/ico-contact.png) no-repeat bottom center;}

#ihome, #iabout, #isolutions, #iportfolio, #icontact {
opacity: .9;
-moz-opacity:0.9;           /* Mozilla 1.6 and below   */
filter:alpha(opacity=90);   /* IE */
}

#social-links {
	position:absolute;
	bottom:3px;
	right:15px;	
}

#social-links ul {
	position:relative;
	background: transparent url(../images/t7web-social-icons.png) top left;	
	width:102px;
	height:51px;
}

#social-links li {
	display:block;
	position:absolute;
	list-style:none;
}

li#linkedIn {
	left:0px;
	top:0px;
	width:51px;
	height:51px;
}

li#twitter {
	left:51px;
	top:0px;
	width:51px;
	height:51px;	
}

li#linkedIn a, li#twitter a { display:block; width:51px; height:51px;}
li#linkedIn a:hover { background: transparent url(../images/t7web-social-icons.png) -0px -51px no-repeat; }
li#twitter a:hover { background: transparent url(../images/t7web-social-icons.png) -51px -51px no-repeat; }

/* ------------------ Hide elements for jQuery to reveal on document ready -------------------- */
#header, #body, #column01, #column02, .section1, .section2, #ftr, #footer { display:none; }

/* ------------------------------------ Other Global Styles ------------------------------------ */
a, a:link, img, div {outline:none;}

.clearboth {clear:both;}