@charset "UTF-8";
body{
	background-image: url(imagenes/bg2.jpg);
	background-color: #550953;
	/*background-image: url(imagenes/bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;*/
	margin: 0px;
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ADD2E2;
	background-repeat: repeat-x;
	background-position: left top;
}
#shell{
	
	/*z-index:1;
	filter:alpha(opacity=30);
-moz-opacity:.30;	opacity:.30;
	height: 1000px;*/
}
/* ===================================================== */
/*  Work section styles
/* ===================================================== */

#work_section {
	padding-top: 30px;
	padding-left: 65px;
}
#work_project_thumbnail {
	float: left;
	width: 224px;
	height: 245px;
	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	
}
#work_project_url{
	float: left;	
	width: 224px;
	height: 20px;
	padding-top: 8px;
	padding-left: 35px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
    font-weight: bold;
   	line-height: 14px;
}
#work_project_url a:link, a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
#work_project_url a:hover{
	color: #FFFFCC;
	text-decoration: none;
}
#work_project_infobox ul {
	float: right;
	width: 180px;
	height: 40px;
	margin-top: 13px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
    font-weight: normal;
	color: #ffffff;
   	list-style: none;
   	text-align: left;
   	line-height: 14px;
}
#work_project_description {
	float: left;
	width: 230px;
	height: 180px;
	margin-top: 20px;
	margin-left: 35px;
	margin-right: 0px;
	margin-bottom: 0px;
	color: #ffffff;
	text-align: left;
}
/*por aqui*/


/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	padding: 0px;
	float: left;
	clear: none;
	width: 100%;
	margin: 0px;

}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */

.TabbedPanelsTabGroup {
	width: 205px;
	height: 195px;
	float: right;
	position: relative;
	padding-left: 0px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	float: left;
	margin: 0px;
	width: 65px;
	height: 65px;
	list-style: none;
	padding: 1px;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	cursor: pointer;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
	width: 510px;
	height: 300px;
	float: left;
	position: relative;



}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {

}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}
/*otro*/
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */



/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textareaRequiredMsg,
.textareaMinCharsMsg,
.textareaMaxCharsMsg,
.textareaValidMsg {
	display:none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textareaRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
	display: inline;
	color: #F9E8E8;
	border: 1px solid #CC3333;
	background-color: #D14747;
}

/* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: * focus, required / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the TEXTAREA
 * - the widget id is placed on the TEXTAREA element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState {
	background-color:#B8F5B1;
}

/* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color:#FF9F9F;
}

/* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color:#FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textarea looks like.
 * It applies only when the widget has enforce max chars enabled and the user tries to type some more.
 */
.textareaFlashState textarea, textarea.textareaFlashState{
	color:red !important;
}
/*2*/
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #F9E8E8;
	border: 1px solid #CC3333;
	background-color: #D14747;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}
#page {
	width: 797px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	height: 100%;
	text-align: left;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	margin-top: 0;
	padding-top: 30px;

}

#sectiongroup {
	position: relative;

}

/* ===================================================== */
/*  Page item styles
/* ===================================================== */
#page_item_bottle {
	background-image: url(imagenes/creativejuice.png);
	background-repeat: no-repeat;
	width: 295px;
	height: 378px;
	position: absolute;
	left: 550px;
	top: 190px;
	z-index: 10;
}

#page_item_lightbulb {
	background-image: url(imagenes/lightbulb.png);
	background-repeat: no-repeat;
	width: 283px;
	height: 318px;
	position: absolute;
	top: 1030px;
	left: -45px;
	z-index: 11;
}
#page_item_folder {
	background-image: url(imagenes/folder.png);
	background-repeat: no-repeat;
	width: 318px;
	height: 189px;
	position: absolute;
	top: 1470px;
	left: 500px;
	z-index: 12;
}
#page_item_mailbox {
	background-image: url(imagenes/mailbox.png);
	background-repeat: no-repeat;
	width: 243px;
	height: 195px;
	position: absolute;
	top: 1660px;
	left: 50px;
	z-index: 13;
}
/* ===================================================== */
/*  Section styles
/* ===================================================== */
#centerpage {
	text-align: center;
	position: absolute;
	top:50%;
	left: 0px;
	width: 100%;
    height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
}
#warning {
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	width: 0px;
	position: absolute;
   	font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
   	line-height: 14px;
}
#fourofour{
	margin-left: -306px;
	position: absolute;
	top: -105px;
	left: 50%;
	width: 612px;
	height: 210px;
	visibility: visible
}
#messagepage {
	margin-left: -306px;
	position: absolute;
	top: -105px;
	left: 50%;
	width: 612px;
	height: 210px;
	visibility: visible
}
#header_bg {
	background-image: url(imagenes/kretivia_header1.gif);
	background-repeat: no-repeat;
	height: 287px;
	width: 797px;
	position: relative;
}
#introduction_bg {
	background-image: url(imagenes/introduction1.png);
	background-repeat: no-repeat;
	height: 271px;
	width: 797px;
	position: relative;

}
#work_bg {
	background-image: url(imagenes/work1.png);
	background-repeat: no-repeat;
	height: 341px;
	width: 797px;
	position: relative;
}
#solutions_bg {
	background-image: url(imagenes/solutions1.png);
	background-repeat: no-repeat;
	height: 431px;
	width: 797px;
	position: relative;
}
#company_bg {
	background-image: url(imagenes/kretivia_company1.gif);
	background-repeat: no-repeat;
	height: 361px;
	width: 797px;
	position: relative;
}
#contact_bg {
	background-image: url(imagenes/contact1.png);
	background-repeat: no-repeat;
	height: 600px;
	width: 797px;
	position: relative;
}
#footer {
	position: relative;
    height: 100px;
    width: 797px;

}
#copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	float: right;
	margin-bottom: 100px;
	margin-top: 10px;
	position: relative;

}
/* ===================================================== */
/*  Introduction section styles
/* ===================================================== */
#introduction_content {
	position: relative;
	height: 175px;
	width: 500px;
	color: #FFFFFF;
	padding-top: 76px;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 0px;
	margin-left: 68px;
	margin-right: 0px;
	line-height: 12px;
	text-align: justify;
}
/* ===================================================== */
/*  Work section styles
/* ===================================================== */

#work_section {
	padding-top: 30px;
	padding-left: 65px;
}
#work_project_thumbnail {
	float: left;
	width: 224px;
	height: 245px;
	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;	
}
#work_project_url{
	float: left;	
	width: 224px;
	height: 20px;
	padding-top: 8px;
	padding-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
    font-weight: bold;
   	line-height: 14px;
}
#work_project_url a:link, a:visited{
	
}
#work_project_url a:hover{
	
}
#work_project_infobox ul {
	float: right;
	width: 180px;
	height: 40px;
	margin-top: 13px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
    font-weight: normal;
	color: #ffffff;
   	list-style: none;
   	text-align: left;
   	line-height: 14px;
}
#work_project_description {
    float: left;
    width: 230px;
	height: 180px;
	margin-top: 20px;
	margin-left: 35px;
	margin-right: 0px;
	margin-bottom: 0px;
	color: #ffffff;

}
/* ===================================================== */
/*  Solutions section styles
/* ===================================================== */
#solutions_content {
	padding-top: 35px;
	padding-left: 80px;
}
#solutions_content_list {
	color: #FFFFFF;
}
#solutions_content_list img{
	margin-top: 20px;
	margin-left: 50px;
}
#solutions_content_list ul{
	list-style-type:none;
	line-height: 20px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left:50px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}
#solutions_content_list li {
	background-image: url(imagenes/bullet_cube.gif);
	background-position: 1px 4px;
	background-repeat: no-repeat;
	padding-left: 15px;
}
#solutions_content_list_web {
	background-image: url(imagenes/smalllightbulb.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 12px;
	text-align: left;
}
#solutions_content_list_print {
	background-image: url(imagenes/smalllightbulb.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 12px;
	margin-bottom: 60px;
	text-align: left;
}
#solutions_content_list_multimedia {
	background-image: url(imagenes/smalllightbulb.png);
	background-repeat: no-repeat;
	float: left;
	text-align: left;
}
#solutions_content_description {
	width: 545px;
	height: 115px;
	float: right;
	position: relative;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 30px;
	margin-bottom: 0px;
	text-align: justify;
}
/* ===================================================== */
/*  Company section styles
/* ===================================================== */
#company_content {
	color: #FFFFFF;
	padding-top: 50px;
	padding-right: 50px;
	padding-bottom: 25px;
	padding-left: 80px;
	position: relative;
}
#company_employee_list {
	padding-left: 100px;
	width: 400px;
}
#company_employee_list_info {
	background-image: url(imagenes/opaque_bar.png);
	background-repeat: no-repeat;
	margin: 3px;
	height: 43px;
	width: 166px;
}
#company_employee_list_info ul {
	list-style-type: none;
	margin: 0px;
	color: #FFFFFF;
	padding-top: 8px;
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
}
#company_employee_list_info span {
	font-weight: bold;
	font-size: 10px;
}
/* ===================================================== */
/*  Contact section styles
/* ===================================================== */
#contact_section {
	position: relative;
	padding-top: 45px;
}

#contact_info {
	width: 230px;
	height: 80px;
   	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 310px;
	color: #FFFFFF;
}
#contact_form {
	position: relative;
	width: 460px;
	height: 350px;
	margin-top: 70px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 100px;
	color: #FFFFFF;
	padding: 0px;
}
#contact_form #textbox{
	width: 220px;
	float: left;
	position: relative;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size:1.2em;
    line-height:1.3em;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
    background:#fff url(/images/fieldbg.gif) repeat-x top;
}
#textarea1 {
	width: 460px;
    height: 100px;
	float: left;
	position: relative;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size:1.2em;
    line-height:1.3em;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
    background:#fff url(/images/fieldbg.gif) repeat-x top;
}
#textarea2 {
	width: 460px;
	float: left;
	position: relative;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size:1.2em;
    line-height:1.3em;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
    background:#fff url(/images/fieldbg.gif) repeat-x top;
}
#contact_form_A, #contact_form_B {
	width: 220px;
}
#contact_form_A {
	float: left;
}
#contact_form_B {
	float: right;
	padding-left: 20px;
	height: 135px;
}
#contact_form_C {
	float: left;
	height: 135px;
	width: 460px;
}
#send {
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
   	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	cursor: pointer;
	float: left;
}
/* ===================================================== */
/*  Highslide script styles
/* ===================================================== */
.highslide {
	cursor: url("imagenes/zoomin.cur"), url("imagenes/zoomin.cur"),pointer;
    outline: none;
}
.highslide img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;	
}
.highslide:hover img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;	
}

.highslide-image {
    
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
 
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.highslide-loading {
    display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

/* ===================================================== */
.caja{
	background-color: #A1598C;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #590D55;
	font-size: 10px;
}
.boton{
	color: #D9DC57;
	background-color: #590D55;
	font-size: 10px;
	font-weight: bold;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}