/* Global CSS for Sony Business Solutions - corporate style guide 2007 */ /* DEVELOPER NOTES: GENERAL _For most declarations: TOP RIGHT BOTTOM LEFT. [Ex: margin: 10px 10px 0 0;] No "px" needed for 0 value. _For most positioning: TOP LEFT. [Ex: background-position: 0 2px;] _Abreviated Color Values acceptable for repeated HEX values. [Ex: color: #333; is the same as: color: #333333;] _"color: #ffffff" sets the FONT COLOR. To set a background color, use "background-color: #ffffff;" _Image paths are relative to where this style sheet is located. So if you change the directory structure from what was delivered, you may need to update each image path. They all start with "../img" for Find and Replacing. _All font sizes are using the relative EM font declarations so that font sizes properly increase/decrease when doing so through the browser. _IDs and Classes are not the same: IDs should only be present once on any given page and can be used to associate JavaScript and/or XML to various HTML elements [Ex: #header]. Classes can be repeated throughout the same page and is only used for styling. BROWSER COMPATIBILITY _What does "IE6 Fix" mean?? Saddly, this common browser was not developed in accordance with coding standards in mind. Therefore, several "hacks and fixes" are used to ensure the site is properly presented in Internet Explorer v6. These are identified with "IE 6 Fix" to indicate that the style attribute is only there to satisfy this browser and provides no other meaningful benefit. _What does "!important" mean?? Again, this is for our favorite browser IE6. IE6 will render margins differently than Mozilla/Safari/IE7 in some cases. Thankfully, IE6 ignores the use of the "!important" attribute, which is intended to tell CSS that "use this attribute over any other attributes declared the same way". Therefore, IE6 will instead give presidence to the latest declaration of this attribute while all other browsers give presidence to the "!important" one. _Why do some attributes have an underscore "_" before them?? Well, three time's a charm for IE6. This is just another method to set attributes for IE6 only since Mozilla, IE7, and Safari will ignore any attribute that begins with an underscore [Ex: _width: 200px;]. _Why is "IE6 Fix" next to "position: relative"?? Just another hack for IE6 - try adding this attribute if an element, background color, or background image does not appear in IE6, but does appear in Mozilla/Safari/IE7. _Why is "IE6 Fix" next to "display: inline"?? Just another hack for IE6 - try adding this attribute if you notice padding and/or margin is being doubled in IE6, but appears fine in Mozilla/Safari/IE7. REVISIONS: November 16, 2007 [Anamika Dahiya - Sapient] November 27, 2007 [Anamika Dahiya - Sapient] */ body { /* Sets up the default overall styles. Font size is set to a percentage to allow for relative font sizes with intuitive use of EM fonts. */ margin: 0; padding: 0; width: 100%; border: 0; font-family: "avant garde", arial, verdana, helvetica, sans-serif; font-size: 62.5%; /* For all elements: 1em is 10pt, 0.8em is 8pt, 1.6em is 16pt, etc */ color: #333; background: #232323 url(../images/g_background_764.jpg) top center repeat-y; } #container { /* containing DIV that wraps around the entire page area. */ position: relative; margin: 0 auto; padding: 0 0 0px 0; width: 764px; border-right: 2px solid #fff; border-left: 2px solid #fff; background-color: #000; text-align: left; } /* begin INITIALIZE elements ------------------------------------- */ /* This entire section initializes the various HTML tags that have default styles inheritantly applied */ ul, img { list-style: none; margin: 0; padding: 0; border: none; } li, img, h1, h2, h3, h4 { margin: 0px; padding: 0px; font-size: 1.0em; /* sets the default font size to 10pt for all tags listed above. */ } p { margin: 0px 0px 6px 0px; padding: 0px; font-size: 1.0em; /* sets the default font size to 10pt for all tags listed above. */ } a { /* sets the default link color used most often. */ color: #fff; text-decoration: none; padding:0; margin: 0; } a:hover { /* sets any effects upon rollover of linked text */ text-decoration: underline; margin: 0; padding:0; } form {margin: 0px;padding: 0px;} /* end INITIALIZE elements ----------------------------------------- */ /* begin HEADER elements ------------------------------------------- */ #header { /* contains the two logos towards the top of the page. */ width: 728px; clear: both; padding: 17px 19px 0px 17px; margin: 0px; } #header {font-size: 1.1em;} /* sets all header font sizes to 11pt. */ #sony_logo { float: left; /* allows for absolute positioning in relation to this element (#logo a) */ height: 18px; width: 110px; display: block; } #for_edu_logo { float: right; width: 94px; text-align: right; } #utility_links { font-size: 1.0em; width: auto; text-align: right; clear:both; float:right; margin:20px 0px 14px 0; padding: 0; } #utility_links ul { display: inline; margin: 0; padding: 0; } #utility_links li { display: inline; /* IE double float margin hack */ margin: 0; float: left; padding: 0; font-size: 1.0em; padding:0 12px 0 10px; background: transparent url(../images/vertical_utility.gif) center right no-repeat; } #utility_links ul li.last { padding:0px 12px 0px 10px; background: transparent url(../images/arrow_utility.gif) center right no-repeat; } #utility_links ul li a:link, #utility_links ul li a:visited, #utility_links ul li a:active {color:#fff;text-decoration:none;} #utility_links ul li a:hover {color:#fff;text-decoration:underline;} #utility_links ul li.last a:link, #utility_links ul li.last a:visited, #utility_links ul li.last a:active { color:#fff;text-decoration:none; } #utility_links ul li.last a:hover {color:#00a4e8;text-decoration:none;} /* end HEADER elements ------------------------------------------- */ /* begin GLOBAL SEARCH elements ------------------------------------------- */ #search_container { float:right;width:175px; } ul#search { display: inline; float: right; width: 175px; font-size: 0.9em; font-weight: bold; margin: 5px 18px 0 0; z-index: 1000; background-color: transparent; } ul#search li { position:relative; float: left; } ul#search input.search_field { width: 151px; height: 15px; padding: 2px 20px 1px 2px; font-size: 1em; border:1px solid #7c7c7c; } ul#search input.image { position: absolute; top: 2px !important; top: 3px; right: 1px; border:0; } /* end GLOBAL SEARCH elements ------------------------------------------- */ /* start MAIN MENU NAVIGATION elements ------------------------------------------- */ #utility_bar { position: relative; height: 32px; /* for IE */ width:764px; border-top:1px solid #01a4e9; background-color: #e6e6e6; background: transparent url(../images/nav/nav_bg.jpg) left top repeat-x; border-bottom: 2px solid #fff; z-index: 200; } #main_menu_container { float:left;width:472px; } #nav { position: relative !important; /* for Mozilla */ float:left; width:450px; height: 32px; z-index: 100; float: left; margin: 0; } #nav a { display: block; height: 32px; } #nav li { position: static !important; /* for Mozilla */ position: relative; /* for IE */ float: left; text-align: left; padding: 0px; } #nav li ul { display: none; position: absolute; top: 32px; left: 0; padding: 0; } #nav li>ul {left: auto;} #nav li:hover ul, #nav li.over ul { display: block; background-color: #dedede; } #nav li:hover div, #nav li.over div { z-index: 99; height: 32px; background-color: #dedede; } /* global nav images - off state */ #nav li div { height: 32px; background-position: 0 -32px; background-repeat: no-repeat; } /* global nav images - on state */ #nav li a { background-position: 0 0; background-repeat: no-repeat; cursor: default; } .hide {text-indent:-300em;} /* begin top nav images */ #nav li#navHome div {background-image: url(../images/nav/navHome.jpg); width: 79px; } #nav li#navProducts div {background-image: url(../images/nav/navProducts.jpg); width: 109px;} #nav li#navSolutions div {background-image: url(../images/nav/navSolutions.jpg); width: 120px;} #nav li#navHowToBuy div {background-image: url(../images/nav/navHowToBuy.jpg); width: 131px;} #nav li#navHome a {background-image: url(../images/nav/navHome.jpg);} #nav li#navProducts a {background-image: url(../images/nav/navProducts.jpg);} #nav li#navSolutions a {background-image: url(../images/nav/navSolutions.jpg);} #nav li#navHowToBuy a {background-image: url(../images/nav/navHowToBuy.jpg);} /* end top nav images */ #nav ul ul { position: absolute; display: none; border-right: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; } #nav ul ul#navProductsList { background-image: url(../images/nav/navProductsList.jpg); background-repeat: no-repeat; } #nav ul ul#navSolutionsList { background-image: url(../images/nav/navSolutionsList.jpg); background-repeat: no-repeat; } #nav ul ul#navHowToBuyList { background-image: url(../images/nav/navHowToBuyList.jpg); background-repeat: no-repeat; } #nav ul ul#navProductsList, #nav ul li:hover ul#navProductsList ul, #nav ul ul#navProductsList li:hover ul ul, #nav ul ul#navSolutionsList, #nav ul li:hover ul#navSolutionsList ul, #nav ul ul#navSolutionsList li:hover ul ul, #nav ul ul#navHowToBuyList, #nav ul li:hover ul#navHowToBuyList ul, #nav ul ul#navHowToBuyList li:hover ul ul {display: none;} #nav ul li:hover ul#navProductsList, #nav ul ul#navProductsList li:hover ul, #nav ul ul#navProductsList ul li:hover ul, #nav ul li:hover ul#navSolutionsList, #nav ul ul#navSolutionsList li:hover ul, #nav ul ul#navSolutionsList ul li:hover ul, #nav ul li:hover ul#navHowToBuyList, #nav ul ul#navHowToBuyList li:hover ul, #nav ul ul#navHowToBuyList ul li:hover ul {display: block;} #nav li:hover ul#navProductsList, #nav li.over ul#navProductsList, #nav li:hover ul#navSolutionsList, #nav li.over ul#navSolutionsList, #nav li:hover ul#navHowToBuyList, #nav li.over ul#navHowToBuyList { display: block; } #nav li li a { width: 195px !important; /* consistant width for all global nav dropdowns */ display: block; height: auto; text-indent: 0px; font-size: 1.1em; font-weight: bold; padding: 5px 5px 5px 9px; color: #383838; cursor: pointer; text-decoration:none; } #nav li li a:hover { display: block; color: #00a4e8; text-decoration:none; } #nav li li { display: block; float: none; } #nav li li:hover, #nav li li.over { display: block; float: none; } /* turning rollover images on (removing the background of (off state) to show the background image of
(on state) */ #nav li#navProducts:hover a, #nav li#navSolutions:hover a, #nav li#navHowToBuy:hover a, #nav li#navHome:hover a, #nav li#navProducts.over a, #nav li#navSolutions.over a, #nav li#navHowToBuy.over a, #nav li#navHome.over a, #nav li#navProducts a:hover, #nav li#navSolutions a:hover, #nav li#navHowToBuy a:hover, #nav li#navHome a:hover { background-image: none; } /* end MAIN MENU NAVIGATION elements ------------------------------------------- */ /* begin FOOTER elements ------------------------------------------- */ #footer { width: 728px; padding: 17px 19px 13px 17px; margin: 0px; border-top:2px solid #fff; } #footer #logo_nwob { float: right; height: 11px; width: 180px; margin: 17px 0px 0 0px; padding:0px; } #footer_links { float: left; width: 462px; margin: 0; color: #5a5a5a; text-align: left; } #footer_links p { margin:0; padding: 0; } #footer_links ul { display: inline; margin: 4px 0 0 0; padding: 0; float: left; /* the entire set of utility links are floated left ... */ } #footer_links ul li { display: inline; float: left; margin:0px; font-size: 1em; padding:0px 10px 0 10px; background: transparent url(../images/vertical.gif) center left no-repeat; } #footer_links ul li.first { padding:0px 10px 0px 0px; background: transparent url() center right no-repeat; } #footer_links ul li a:link, #footer_links ul li a:visited, #footer_links ul li a:active {color:#666666;text-decoration:underline;} #footer_links ul li a:hover {color:#666666;text-decoration:underline;} #footer div#sony_verbs_logo { float: left; background: transparent url(../images/sony_verbs_logo.gif) top left no-repeat; width: 61px; height: 32px; text-indent: -300em; padding: 0px 11px 0px 0px; } /* end FOOTER elements ------------------------------------------- */ /* begin CONTENT AREA elements ------------------------------------------- */ /* DIV ID black_bg will be used for NEW pages with BLACK background */ #content_wrapper { width: 950px; } #black_bg .content_area { background-color:#000; color:#fff; text-align:center; } /* DIV ID white_bg will be used for EXISTING pages with WHITE background */ #white_bg { background-color:#fff; color:#262626; width: 100%; } /* CENTERING EXISTING pages with WHITE background on the browser */ #white_bg .content_area { color:#262626; text-align:center; margin-left: auto; margin-right: auto; padding: 13px 0 13px 0; width: 760px; } /* LEFT aligning the content on CENTERED EXISTING pages with WHITE background on the browser */ #white_bg .content_area table, tr, td { text-align:left; } /* end CONTENT AREA elements ------------------------------------------- */ /* begin LOGIN DIV and ERROR STATES on hover on SOLUTION PROVIDER LOGIN navigation element ------------------------------------------- */ div#loginOutermostDiv { position:absolute;top:52px;right:12px;z-index:998;width:267px;height:165px; background: transparent url(../images/g_spc_background.gif) top left no-repeat; } div#errorOutermostDiv { position:absolute;top:52px;right:12px;z-index:998;width:267px;height:210px; background: transparent url(../images/g_spc_error_background.gif) top left no-repeat; } .error_msg { color:#e01a05;padding:0px 0 5px 0; } .show_div { display:block; } .hide_div { display:none; } label { font-size: 100%; } form div#formElements { clear: left; display: block;width:250px; height: expression('1%'); margin: 30px 10px 10px 14px; padding: 0px; } form div#formElements div.required { width:240px; } form div#formElements label { display: block; float: left; width: 80px !important; width: 76px; padding: 3px 5px; margin: 0; text-align: right; } div.required label:before { content: ''; } form#login_box_form div input.inputText, form#login_box_form div input.inputPassword { width: 142px; height:14px; padding: 1px 3px; margin: 0 0 3px 0; border:1px solid #a0a0a0; font-size:0.8em; } form#error_box_form div input.inputText, form#error_box_form div input.inputPassword { width: 142px; height:14px; padding: 1px 3px; margin: 0 0 3px 0; border:1px solid #e01a05; font-size:0.8em; } form div.submit { clear:both; padding: 3px 0 3px 213px; } form div input.inputSubmit, input.inputSubmit { width: 26px; height: 17px; padding: 0; margin: 0; } #formElements ul { display: inline; margin: 4px 6px 0 0; padding: 0; float: right; /* the entire set of utility links are floated left ... */ } #formElements ul li { display: inline; float: left; margin:0px; font-size: 0.8em; padding:0px 4px 0 4px; background: transparent url(../images/vertical.gif) center left no-repeat; } #formElements ul li.first { font-size: 0.8em; padding:0px 4px 0px 0px; background: transparent url() center right no-repeat; } #formElements ul li a:link, #formElements ul li a:visited, #formElements ul li a:active {color:#000000;text-decoration:underline;} #formElements ul li a:hover {color:#000000;text-decoration:underline;} #formElements ul li.first a:link, #formElements ul li.first a:visited, #formElements ul li.first a:active {color:#000000;text-decoration:underline;} #formElements ul li.first a:hover {color:#000000;text-decoration:underline;} /* end LOGIN DIV and ERROR STATES on hover on SOLUTION PROVIDER LOGIN navigation element ------------------------------------------- */ /* begin FLOAT CLEARS and HACKS ---------------------------------- */ /* When elements are floated, the HTML needs to clear the floats so that subsequent HTML elements will position themselves below the row of previous floats. */ .gbrow:after { content: "."; display: block; height: 0; clear: both; /*overflow: hidden;*/ visibility: hidden; } .gbrow, .clearfix {display: inline-table;} /* IE 7 Fix */ .gbrow, .clearfix {display: inline-block;} /* IE 6 Fix */ * html .gbrow, * html .clearfix {height: 1% !important;} .gbrow , .clearfix{display: block;} .gbrow, .clearfix {display: table;} /* end FLOAT CLEARS and HACKS ---------------------------------- */ /* begin FLOAT CLEARS and HACKS ---------------------------------- */ /* Use to clear floats */ .gbrow:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; /*overflow: hidden;*/ visibility: hidden; } .gbrow, .clearfix {display: inline-table;} /* IE 7 Fix */ .gbrow, .clearfix {display: inline-block;} /* IE 6 Fix */ * html .gbrow, * html .clearfix {height: 1% !important;} .gbrow, .clearfix {display: block;} /* end FLOAT CLEARS and HACKS ---------------------------------- */ .debug{ border: 1px solid red !important; }