/* Colegio Mesoamericano Patzicia CSS Author: The Longbored Surfer URL: http://longboredsurfer.com Version: 2006.11 ----------------------------------------------- */ /* Page Structure - Nested like the actual divs ----------------------------------------------- */ body { font-family:"Tahoma", "Verdana", sans-serif; text-align:center; background-color:#DFEFFF; color:#FFF; margin:0 auto; } table, tr, td { vertical-align:text-top; } #main { display:block; width:734px; margin:0 auto; background-image:url(Background-shadow.jpg); background-repeat:repeat-y; text-align:left; } #main2 { display:block; width:700px; padding-left:17px; } #toolbar { display:block; position:relative; background-color:#036; height:40px; background-image:url(Logo.gif); background-repeat:no-repeat; background-position:left; } #pagePhoto { clear:both; height:220px; } #main3 { background-image:url(main3background.gif); background-repeat:repeat-y; float:left; width:100%; } #main3Inner { margin:0; } #main4Left{ margin:0; } #leftInner { float:left; width:495px; font-size:14px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } #main4Right{ margin:0px; height:1%; } #rightInner { float:right; width:165px; font-size:12px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #footer{ background-color:#002346; width:680px; padding:5px 10px; font-size:10px; color:#006BD7; text-align:center; } #footerShadow { display:block; width:734px; height:18px; margin:0 auto; background-image:url(Background-shadow-bottom.gif); background-repeat:no-repeat; } /* Menu - I'll have your finest quesadilla Cameron Moll is to thank for showing me this type of menu setup. Super handy stuff. ----------------------------------------------- */ #menulist {margin: 0; padding: 0; list-style: none; float:right; position:relative; right:50px; top:15px;} #menulist li {display: block; float: left; position: relative;} #menulist li a.on {display: block; height: 11px; padding: 0 !important;} #menulist li a.on strong {display: none;} li#menuHome {width:35px; background: transparent url(menuHome.gif) bottom left no-repeat; margin-left:0px;} li#menuAbout {width:41px; background: transparent url(menuAbout.gif) bottom left no-repeat; margin-left:40px;} li#menuVolunteer {width:74px; background: transparent url(menuVolunteer.gif) bottom left no-repeat; margin-left:40px;} li#menuSponsor {width:60px; background: transparent url(menuSponsor.gif) bottom left no-repeat; margin-left:40px;} li#menuContact {width:58px; background: transparent url(menuContact.gif) bottom left no-repeat; margin-left:40px; margin-right:10px;} li#menuHome a.on {background: transparent url(menuHome.gif) bottom left no-repeat;} li#menuHome a.on:hover {background-position: top left;} li#menuAbout a.on {background: transparent url(menuAbout.gif) bottom left no-repeat;} li#menuAbout a.on:hover {background-position: top left;} li#menuVolunteer a.on {background: transparent url(menuVolunteer.gif) bottom left no-repeat;} li#menuVolunteer a.on:hover {background-position: top left;} li#menuSponsor a.on {background: transparent url(menuSponsor.gif) bottom left no-repeat;} li#menuSponsor a.on:hover {background-position: top left;} li#menuContact a.on {background: transparent url(menuContact.gif) bottom left no-repeat;} li#menuContact a.on:hover {background-position: top left;} /* Left Side Stuff ----------------------------------------------- */ #leftInner h2 { background-image:url(Underline_border.gif); background-position:bottom; background-repeat:repeat-x; background-color:#036; font-family:Verdana, Arial, sans serif; font-size:16px; height:23px; width:65%; font-weight:bold; text-indent:10px; margin-left:10px; margin-top:10px; } #leftInner p { margin:5px 10px; line-height:19px; } #leftInner blockquote { width:80%; margin: 20px 30px 20px 40px; padding:0px 10px; background-color:#002D59; border-top: 1px solid #24507C; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #24507C; font-size:13px; } #leftInner hr { width: 55%; text-align:center; margin-top: 20px; margin-bottom: 20px; background-color:#62B0FF; } #leftInner ul li { list-style-image: url(bullet-Main.gif); margin-left:0px; } #leftInner dt { background-image: url(bullet-Main.gif); background-repeat:no-repeat; background-position:left; margin-left:10px; padding-left:10px; margin-top:0px;} #leftInner dd, #leftInner dl {margin-top:0px;} #leftInner img { border:solid #FFF 1px; margin: 6px 10px; } /* Right Side Stuff ----------------------------------------------- */ #leftInner ul, #rightInner ul {margin-top: 6px; margin-bottom: 6px;} #rightInner ul li { list-style-image: url(bullet-Side.gif); margin-left:-10px; } #rightInner h4 { font-size:13px; font-weight:bold; margin:10px; } #rightInner hr { width:70%; background-color:#036; text-align:center; margin-top:10px; margin-bottom:10px; } /* Links - breakfast style or salchicha ----------------------------------------------- */ #main a:hover, #main a:active { color:#62B0FF; text-decoration:underline; } #leftInner a:link, #leftInner a:visited { color:#0075EA; text-decoration:none; } #rightInner a:link, #rightInner a:visited { color:#97CBFF; text-decoration:none; } #footer a:link, #footer a:visited { color:#97CBFF; text-decoration:none; } /* Picture Floating ----------------------------------------------- */ .lefty { float:left; } .righty { float:right; } /* Floating Text Box Stuff Siegfried, Roy & Mr. Copperfield step aside ----------------------------------------------- */ #leftInner .textlefty, #leftInner .textrighty { display:block; width:33%; background-color:#204870; padding:5px; margin:5px; font-size:11px; border:#002346 1px solid;} #leftInner .textlefty { float:left; } #leftInner .textrighty { float:right; } #leftInner .textlefty h3, #leftInner .textrighty h3 { font-size:13px; border-bottom:1px #62B0FF solid; margin-bottom:0px; } #leftInner .textlefty ul li, #leftInner .textrighty ul li { margin-left:-10px;} #leftInner .textlefty p, #leftInner .textrighty p { margin:0px; line-height:12px;} /* Forms - fill out in triplicate, blue ink ----------------------------------------------- */ input {margin: 0; padding: 2px 2px 2px 2px; font-size: 12px;} .inputareas {border: #CCCCCC solid 1px; background: url(Input-background-short.gif) repeat-x; background-color:#FFFFFF;} textarea {margin: 0; padding: 2px 2px 2px 2px; font-size: 12px; width:200px; border: #CCCCCC solid 1px; background: url(Input-background-tall.gif) repeat-x; background-color:#FFFFFF; font-family:"Tahoma", "Verdana", sans-serif;} input:focus, textarea:focus, select:focus{padding: 2px 2px 2px 2px; border: #A3B5C7 solid 1px;} select{margin: 0; padding: 2px 2px 2px 2px; font-size: 12px; width:200px; border: #CCCCCC solid 1px; background: url(Input-background-tall.gif) repeat-x; background-color:#FFFFFF;} label{margin: 0; padding: 0px 0px 2px 0px; font-size: 13px; line-height:125%;} .labelbold{font-weight:bold;}