/* Start of CMSMS style sheet 'ArgentumLight : IluminandoBlue' */ /* Version 3.0 del estilo para iluminando Clasicas en tonos azules */ /* menu links accesskeys */ span.accesskey { text-decoration: none; } /* accessibility divs are hidden by default, text, screenreaders and such will show these */ .accessibility, hr.accessibility { /* position set so the rest can be set out side of visual browser viewport */ position: absolute; /* takes it out top side */ top: -999em; /* takes it out left side */ left: -999em; } /* browsers interpret margin and padding a little differently, we'll remove all default padding and set them later on */ * {margin: 0; padding: 0;} /*Set initial font styles*/ body { text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 75.01%; line-height: 1em; } /*set font size for all divs, this overrides some body rules*/ div { font-size: 1em; } /* No image should have a border when linked */ a, a img { outline: none; border: 0; } /*default link styles*/ a, a:link a:active { text-decoration: none; /* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */ background-color: inherit; color: #00447F; } a:visited { text-decoration: none; background-color: inherit; color: #00447F; } a:hover { text-decoration: none; background-color: inherit; color: #2a2a45; } /* Input boxes - just a bit smaller than normal so they align well. */ input, textarea, button { color: #000000; font-family: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif; font-size: 95%; } input, button { font-size: 95%; } /* All input elements that are checkboxes or radio buttons. */ input.check { } /* Selects are a bit smaller, because it makes them look even better 8). */ select { font-size: 90%; font-weight: normal; color: #000000; font-family: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif; } /*****************Basic layout *****************/ body { margin: 0; padding: 0; /* default text color for entire site*/ color: #333; /*background: #f4f4f4 url(uploads/ArgentumLight/body.png) repeat-x left top;*/ background-color: #00447F; } div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the */ max-width: 99em; min-width: 75em; /* now that width is set this centers wrapper */ margin: 0 auto; background-color: #afcde8; } div#pagecontent { z-index: 10; } * html * { margin: 0; padding: 0; } * html div#pagewrapper { width: 100%; /* for IE5 and IE6 in quirks mode */ margin: 0; padding: 0; } /* header, we will hide h1 a text and replace it with an image */ div#header { position: relative; height: 105px; margin: 0; padding: 5px 0px 0px 10px; background: url(uploads/ArgentumLight/fondologo.png) repeat-x left top; border-bottom: 1px solid #D9E2E6; } div#header h1 a { background: url(uploads/ArgentumLight/logo.png) no-repeat left top; /* this will make the "a" link a solid shape */ display: block; height: 105px; /* this hides the text */ text-indent: -999em; /* old firefox would have shown underline for the link, this explicitly hides it */ text-decoration: none; width: 50% } div#header h1 { /*these keep IE6 from pushing the header to more than the set size*/ line-height: 0; font-size: 0; /* this will keep IE6 from flickering on hover */ background: url(uploads/ArgentumLight/logo.png) no-repeat left top; } #language_button_menu { position: relative; display: inline; float: right; padding: 2px 20px 0 0; } #language_button_menu form { display: inline; } #language_button_menu form button { padding: 1px; font-size:10px; cursor: pointer; } #language_button_menu form button.active { color: #666; cursor: default; } #language_button_menu img.langicon { padding-right: 4px; float: left; margin-top: 2px; } li#es_ES { background: url(uploads/ArgentumLight/languages.png) no-repeat left top; } li#es_ES:hover, li#es_ES.active { background: url(uploads/ArgentumLight/languages.png) no-repeat left -25px; } li#en_US { background: url(uploads/ArgentumLight/languages.png) no-repeat -25px top; } li#en_US:hover, li#en_US.active { background: url(uploads/ArgentumLight/languages.png) no-repeat -25px -25px; } div#header h2 { position: absolute; line-height: 1.2em; /* this keeps IE6 from not showing the whole text */ font-size: 1.5em; /* keeps the size uniform */ bottom: 40px; right: 65px; color: #23385d; } div#q-search { position: absolute; bottom: 10px; right: 1em; height: 22px; width: 200px; /* enough width for the search input box */ overflow: hidden; float: right; } div#q-search .searchfield { background: none; border: none; margin: 0; padding: 0; } input.search-input { font-size: 1em; padding: 2px; } div#q-search input.search-input { position: absolute; top:2px; left: 0px; display: block; color: #000000; font-family: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif; margin: 0; padding: 0; font-size: 90%; height: 16px; width: 150px; vertical-align: middle; } div#q-search input.search-button { position: absolute; top:0px; right: 22px; display: block; border: none; height: 22px; width: 22px; margin: 0; padding: 0; cursor: pointer; /* makes the hover cursor show, you can set your own cursor here */ background: url(uploads/ArgentumLight/search.png) no-repeat 0 0; text-indent: -999em; font-size: 0px; } div#q-search input.search-button:hover { border: none; background: url(uploads/ArgentumLight/search.png) no-repeat 0 -23px; } div#q-search input.cancel-button { position: absolute; top:0px; right: 0px; display: block; border: none; height: 22px; width: 22px; margin: 0; padding: 0; background: url(uploads/ArgentumLight/cancel-button.png) no-repeat 0 0; text-indent: -999em; } div#q-search input.cancel-button:hover { border: none; background: url(uploads/ArgentumLight/cancel-button.png) no-repeat 0 -23px; } div.breadcrumbs { /* its good to set font sizes to be relative, this way viewer can change his/her font size */ font-size: 90%; padding: 0.8em 0em 0.8em 1em; } div.breadcrumbs span.lastitem { font-weight: bold; } div#content { /* some air above and under menu and content */ margin: 1.5em 0; padding: 0px; } div.holder { /* space for left and right sidebars */ margin-left: 21%; margin-right: 21%; } /* this is an IE6 hack */ * html div.holder {} div#main { /* this is the last inside div so we set the space inside it to keep all content away from the edges */ padding: 10px 15px; } div#leftsidebar { position: relative; float: left; width: 21%; /* FIX IE double margin bug */ display: inline; padding: 0; margin: 0 0 10px 0; font-size: 90%; z-index: 15; } div#rightsidebar { position: relative; float: right; width: 21%; /* FIX IE double margin bug */ display: inline; padding: 0; margin: 0 0 10px 0; font-size: 90%; z-index: 15; } /* UTIL BOX */ .utilbox { clear: both; padding: 5px 20px 5px 20px; margin: 0; } .box-top-l { clear: both; margin: 0; padding: 0; background: url(uploads/ArgentumLight/container.png) no-repeat left top; } .box-top-r { margin: 0; padding: 0; background: url(uploads/ArgentumLight/container.png) no-repeat right top; } .box-top-c { margin: 0px 10px 0px 10px; padding: 10px 0 10px 0; background: url(uploads/ArgentumLight/container-fill.png) repeat-x top; } .box-content { margin: 0; padding: 0 10px; border-right: 1px solid #bbbbbb; border-left: 1px solid #bbbbbb; background: #f0f0f0; } .box-content-nopad { padding: 0; border-right: 1px solid #bbbbbb; border-left: 1px solid #bbbbbb; background: #f0f0f0; } .box-bottom-l { clear: both; min-height: 5px; margin: 0; padding: 0; background: url(uploads/ArgentumLight/container.png) no-repeat left bottom; } .box-bottom-r { min-height: 5px; margin: 0; padding: 0; background: url(uploads/ArgentumLight/container.png) no-repeat right bottom; } .box-bottom-c { min-height: 5px; margin: 0 10px 0 10px; padding: 0 10px 0 10px; background: url(uploads/ArgentumLight/container-fill.png) repeat-x bottom; } .box-end { margin: 0; padding: 0; font-size: 0px; line-height: 0px; display: block; height: 10px; } .bluebox-top-l { clear: both; margin: 0; padding: 0; background: url(uploads/ArgentumLight/bluetab.png) no-repeat left top; } .bluebox-top-r { margin: 0; padding: 0; background: url(uploads/ArgentumLight/bluetab.png) no-repeat right top; } .bluebox-top-c { margin: 0px 10px 0px 10px; padding: 10px 0 10px 0; background: url(uploads/ArgentumLight/bluetab-fill.png) repeat-x top; } .bluebox-bottom-l { clear: both; min-height: 5px; margin: 0; padding: 0; background: url(uploads/ArgentumLight/bluetab.png) no-repeat left 100%; } .bluebox-bottom-r { min-height: 5px; margin: 0; padding: 0; background: url(uploads/ArgentumLight/bluetab.png) no-repeat right 100%; } .bluebox-bottom-c { min-height: 5px; margin: 0 6px 0 6px; padding: 0 10px 0 10px; background: url(uploads/ArgentumLight/bluetab-fill.png) repeat-x left 100%; } ul#search-engines { list-style: none; font-size: 1em; margin:0; padding:0; } ul#search-engines li a { font-size: 12px; font-weight: normal; color: #000000; text-decoration: none; display: block; padding: 5px; padding-left: 20px; background: url(uploads/ArgentumLight/page.gif) no-repeat left 3px; } ul#search-engines li a:hover { background: #c3d4e9 url(uploads/ArgentumLight/page_go.gif) no-repeat left 3px; } ul#search-engines li a.menuactive { background: url(uploads/ArgentumLight/page_go.gif) no-repeat left 3px; font-weight: bold; } ul#search-engines li a.menuactive:hover { background: #c3d4e9 url(uploads/ArgentumLight/page_go.gif) no-repeat left 3px; font-weight: bold; } /* FOOTER */ div#footerwrapper { margin: 0; padding: 0; } div#footer { margin: 0; padding: 2px 10px; } div#footer, #footer a { /* sets different font size from default */ font-size: 1em; color: #595959; } #footer a:hover { color: #000000; text-decoration: none; } /* as we hid all hr for accessibility we create new hr with div class="hr" element */ div.hr { height: 1px; padding: 1em; border-bottom: 1px solid #cccccc; margin: 1em; } div.left39 { float: left; width: 39%; } div.left49 { float: left; width: 49%; } div.left69 { float: left; width: 69%; } div.right39 { float: right; width: 39%; text-align: right; } div.right49 { float: right; width: 49%; text-align: right; } div.right29 { float: right; width: 29%; text-align: right; } div#content .right29 p{ text-align: right; } /********************CONTENT STYLING*********************/ /* HEADINGS */ div#content h1 { /* font size for h1 */ font-size: 2em; line-height: 1em; margin: 0; color: #2a2a45; } div#content h2 { /*color: #294B5F;*/ color: #2a2a45; /* font size for h2 the higher the h number the smaller the font size, most times */ font-size: 1.4em; text-align: left; /* some air around the text */ padding-left: 0.5em; padding-bottom: 1px; /* set borders around header */ border-bottom: 1px solid #2a2a45; /* a larder than h1 line height */ line-height: 1.5em; /* and some air under the border */ margin: 0 0 0.5em 0; } div#content h2.boxtitle { color: #2a2a45; line-height: 1.3em; font-size: 1.3em; padding: 0; margin: 0; border-bottom: 1px solid #2a2a45; } div#content h3 { color: #2a2a45; font-size: 1.3em; line-height: 1.3em; margin: 0 0 0.5em 0; } div#content h4 { color: #2a2a45; font-size: 1.2em; line-height: 1.3em; margin: 0 0 0.25em 0; } div#content h5 { color: #2a2a45; font-size: 1.1em; line-height: 1.3em; margin: 0 0 0.25em 0; } h6 { color: #2a2a45; font-size: 1em; line-height: 1.3em; margin: 0 0 0.25em 0; } div#content p { text-align: justify; } /* TEXT */ p { /* default p font size, this is set different in some other divs */ font-size: 1em; /* some air around p elements */ margin: 0 0 1.5em 0; line-height: 1.4em; padding: 0; } p.redbox { margin-left: 2em; margin-right: 2em; border: 1px solid red; padding: 1em; } blockquote { border-left: 10px solid #ddd; margin-left: 10px; } strong, b { font-weight: bold; } em, i { font-style: italic; } /* Wrapping text in */ code, pre { font-size: 1em; } pre { /* black border for pre blocks */ border: 1px solid #000; /* set different from surroundings to stand out */ background-color: #ddd; margin: 0 1em 1em 1em; padding: 0.5em; line-height: 1.5em; font-size: 90%; } /* Separating the divs on the template explanation page */ /* LISTS */ /* lists in content need some margins to look nice */ div#main ul, div#main ol, div#main dl { font-size: 1.0em; line-height: 1.4em; margin: 0 0 1.5em 0; } div#main ul li, div#content ol li { margin: 0 0 0.25em 3em; } /* definition lists topics on bold */ div#main dl { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #c0c0c0; } div#main dl dt { font-weight: bold; margin: 0 0 0 1em; } div#main dl dd { margin: 0 0 1em 1em; padding: 0; } /* END LISTS */ .centreddiv { margin: 0 auto; text-align: center; } /* CONTENT NAVIGATION ICON MENU */ #navigator { margin: 0 30px 0 0; padding: 0; float: right; } #navigatorlist{ margin: 0; padding: 0; width:120px; position: relative; } #navigatorlist li{ position: absolute; list-style:none; top:0; margin: 0; padding: 0; } #navigatorlist li, #navigatorlist a { margin: 0; padding: 0; height:16px; display:block; text-indent: -999em; } #home{left:0px;width:16px;} #home{background: url(uploads/ArgentumLight/navigator.png) 0 0;} #home a:hover{background: url(uploads/ArgentumLight/navigator.png) 0 -17px;} #prev{left:20px;width:16px;} #prev{background:url(uploads/ArgentumLight/navigator.png) -17px 0;} #prev a:hover{background: url(uploads/ArgentumLight/navigator.png) -17px -17px;} #next{left:40px;width:16px;} #next{background: url(uploads/ArgentumLight/navigator.png) -34px 0;} #next a:hover{background: url(uploads/ArgentumLight/navigator.png) -34px -17px;} #search-link{left:60px;width:16px;} #search-link{background: url(uploads/ArgentumLight/navigator.png) -51px 0;} #search-link a:hover{background: url(uploads/ArgentumLight/navigator.png) -51px -17px;} #print {left:80px;width:16px;} #print {background: url(uploads/ArgentumLight/navigator.png) -68px 0;} #print a:hover{background: url(uploads/ArgentumLight/navigator.png) -68px -17px;} #print-pdf {left:100px;width:16px;} #print-pdf {background: url(uploads/ArgentumLight/navigator.png) -85px 0;} #print-pdf a:hover{background: url(uploads/ArgentumLight/navigator.png) -85px -17px;} /* NEWS */ div#news { margin: 0; padding: 10px 0 0 0; border: 1px solid #909799; /* sets it off from surroundings */ background: #f5f5f5; } .NewsSummary { /* padding for the news article summary */ padding: 0.5em 0.5em 1em 0; /* margin to the bottom of the news article summary */ margin: 0 0.5em 0.5em 0.5em; border-bottom: 1px solid #ccc; } .NewsSummaryPostdate { /* smaller than default text size */ font-size: 90%; /* bold to set it off from text */ font-weight: bold; } .NewsSummaryLink { /* bold to set it off from text */ font-weight: bold; /* little more room at top */ padding-top: 0.2em; } .NewsSummaryCategory { /* italic to set it off from text */ font-style: italic; margin: 5px 0; } .NewsSummaryAuthor { /* italic to set it off from text */ font-style: italic; padding-bottom: 0.5em; } .NewsSummarySummary, .NewsSummaryContent { /* larger than default text */ line-height: 140%; } .NewsSummaryMorelink { } #NewsPostDetailDate { /* smaller text */ font-size: 90%; margin-bottom: 5px; /* bold to set it off from text */ font-weight: bold; } #NewsPostDetailSummary { /* larger than default text */ line-height: 150%; } #NewsPostDetailCategory { /* italic to set it off from text */ font-style: italic; border-top: 1px solid #ccc; margin-top: 0.5em; padding: 0.2em 0; } #NewsPostDetailContent { margin-bottom: 15px; /* larger than default text */ line-height: 150%; } #NewsPostDetailAuthor { padding-bottom: 1.5em; /* italic to set it off from text */ font-style: italic; } /* more divs, left unstyled, just so you know the IDs of them */ #NewsPostDetailTitle { } #NewsPostDetailHorizRule { } #NewsPostDetailPrintLink { } #NewsPostDetailReturnLink { } /* END NEWS */ #validation { border: 1px solid #cccccc; background: #ffffff; padding: 5px; margin: 10px 0 0 0; } #validation a { text-indent: -999em; height: 20px; width: 57px; display: inline-block; margin: 1px; } a.xhtml {background: url(uploads/ArgentumLight/valid.png) 0 0;} a.xhtml:hover {background: url(uploads/ArgentumLight/valid.png) 0 -21px;} a.css {background: url(uploads/ArgentumLight/valid.png) -58px 0;} a.css:hover {background: url(uploads/ArgentumLight/valid.png) -58px -21px;} a.mysql {background: url(uploads/ArgentumLight/powered.png) 0 0;} a.mysql:hover {background: url(uploads/ArgentumLight/powered.png) 0 -21px;} a.php {background: url(uploads/ArgentumLight/powered.png) -58px 0;} a.php:hover {background: url(uploads/ArgentumLight/powered.png) -58px -21px;} /* lets give all forms zero padding/margins */ form { padding: 0; margin: 0; } .clearboth {clear: both;} .right-text {text-align: right !important;} .box-bottom-r { background: #AFCDE8; } .box-bottom-c { background: #AFCDE8; } .box-bottom-1 { background: #AFCDE8; } .box-content { background: #AFCDE8; } /* End of 'ArgentumLight : IluminandoBlue' */