/* ================================================================================================== Copyright: Zocoloco Studios 2010, http://www.zocoloco.com | All Rights Reserved | zocoSites v3.0 ================================================================================================== theme name: atfunion theme URI: http://www.zocoloco.com/ description: custom theme created for the ABQ Teachers Federations version: 3.0 author: elaine montoya author URI: http://www.zocoloco.com/ style sheet: style.css style sheet description: primary style sheet for atfunion website ATF COLOR CHART color hex --------------------------------- atf red #ff0000 atf dark red #930b29 atf yellow #ebb700 atf orange #ff8311 atf bright green #33ff00 atf dark green #727717 atf dark gray #7c7c8a atf black #000000 atf white #ffffff */ /* global styles ---------------------------------------------------------- */ html, body {} html {background: #ffffff url("images/backgroundImage.png") no-repeat center center;} a,a:link,a:link,a:link,a:hover {cursor:pointer} a:link img {border: 0;} a:active {outline: none;} /*get rid of borders in Firefox*/ a:focus {-moz-outline-style: none;} /*get rid of borders in Firefox*/ sup,sub {height: 0;line-height: 1;vertical-align: baseline;_vertical-align: bottom;position: relative; color:} sup {bottom: 1ex;} sub {top: .5ex;} img {border: 0;} hr {margin:1em 0;background:#ffffff;height:1px;color:#000;border:none;clear:both;} :focus {outline: 0;} /* layout ------------------------------------------------------------------------------------------------ */ /* general ------------------------------------------------ */ .clear {clear: both;font-size: 0px;line-height: 0px;visibility: hidden;margin: 0;} .container {display: block;width: 100%;margin: auto;} .wrapper {position:relative;margin:0 auto;text-align:left;width:1200px;} .left {display: inline; float: left;} .right {display: inline; float: right;} .column {display: inline;} .hidden{display:none;} img.floatLeft { float: left;margin: 4px; } .date {font-size:9px; font-weight:normal;} /* page sizes - based on pixel width */ .page750 {width: 750px;} .page950 {width: 950px;} .page974 {width: 974px;} .page100p {margin: auto 10px;width: auto;} /* column widths - based on pixel width */ .col250 {width:250px;} .col700 {width:700px;} /* column heights - based on pixel width */ .col400h {height:400px;} /* design */ .indent-left2 {padding-left:5px;} .opacity70 {opacity:0.7;filter:alpha(opacity=70);} /* spacing */ .mb0 {margin-bottom: 0 !important;} .pb5 {padding-bottom: 5px !important;} .pb10 {padding-bottom: 10px !important;} .pb20 {padding-bottom: 20px !important;} /* wrapper ------------------------------------------------ */ #main-body {padding-top:20px;} /* fixed page elements - appear on every page ------------------------------------------------ */ #fixed-elements-wrapper {vertical-align:middle;} #window-background {width:1200px;height:720px;;background: url("images/background.png") no-repeat center center;z-index:2;text-align: center;margin-left:auto;margin-right:auto;} #logo {position:absolute;top:0px;left:0px;width:454px;height:240px;z-index:30;} #logo img {border:none;} /* main navigation ------------------------------------- */ #nav-holder {position:absolute;top:-15px;left:30px;z-index:35;width:200px;} #nav-holder #primary-nav {position:absolute;top:205px;left:60px;font: bold 12px Helvetica, Arial, sans-serif;color:#ffffff;margin: 0;padding: 0;list-style:none; text-transform:lowercase;} #nav-holder #primary-nav ul {padding: 0;margin: 0;list-style: none;} #primary-nav li {position:relative;background: url("images/navBackground.png") no-repeat bottom left;float: left;width: 200px;opacity:0.8;filter:alpha(opacity=80);display:block;margin:10px;} #primary-nav a, #primary-nav a:link, #primary-nav a:visited, #primary-nav a:hover, #primary-nav a:active {text-decoration:none;text-align:center;cursor:pointer;color:#ffffff;display: block;line-height:33px;height:30px;} #primary-nav a:hover {color:#33ff00} #primary-nav li:hover ul, #primary-nav li.sfhover ul {z-index:99999} #primary-nav li.active {background: url("images/navBackground.png") no-repeat bottom left;} #primary-nav li.active a:link, #primary-nav li.active a:visited, #primary-nav li.active a:hover, #primary-nav li.active a:active {color:#ff0000} #primary-nav li.active a:hover {color:#33ff00} /* breadcrumb ------------------------------------- */ #breadcrumb {position:absolute;top:15px;left:265px;margin:0;padding 0;z-index:35;font: bold 12px Verdana, Arial, Helvetica, sans-serif; color:#fff;text-transform:lowercase;} #breadcrumb a, #breadcrumb a:link{font: bold 12px Verdana, Arial, Helvetica, sans-serif;text-transform:lowercase;lowercase;text-decoration:underline;color:#ff8311; cursor:pointer;} #breadcrumb a:hover {cursor:pointer;color:#ffffff;} a.crumb, a.morelink:hover {color:#ffffff; text-decoration:none;} /* secondary navigation ------------------------------------- */ #secondary-nav {position:absolute;top:98px;right:60px;z-index:35;} /* 1st tier */ #nav-secondary, #nav-secondary ul {position:static;} #nav-secondary, #nav-secondary li {list-style:none;margin:0;padding: 0;float:left;font:bold 12px Verdana, Arial, Helvetica, sans-serif;} #nav-secondary a {line-height:1.8;padding: 4px 0 4px 60px;font:bold 106% arial;display:block} #nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} #nav-secondary a:link {color:#ffffff} #nav-secondary a:visited {color:#ffffff} #nav-secondary a:hover {opacity:1.0;filter:alpha(opacity=100); color:#33ff00;} #nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {opacity:1.0;filter:alpha(opacity=100);} #nav-secondary li {margin:6px 0;} /* social media icons (and rss icon) ---------------------------------------------------------- */ #social-media {position:absolute;bottom:70px;left:50px;z-index:50; width:200px; z-index:20;} #social-media img {border:none;} /* main content ---------------------------------------------------------- */ #column-single {position:absolute;top:0px;left:0px;z-index:50;} #content-background {position:absolute;top:150px;left:355px;margin: 0;padding: 0;height:346px;width:787px;} #content-background #news-one {position:absolute;top:60px;left:60px;height:200px;width:220px;z-index:0;color:#000000;text-align:left;font-size:12} #content-background #news-two {position:absolute;top:60px;left:340px;height:200px;width:390px;z-index:0;color:#000000;text-align:left;} #content-text {position:relative;top:0px;left:0px;margin: 0;width:767px;} .homeBackground {background: url("images/contentBackground.png") no-repeat center center;} .mainBackground {position:absolute;top:150px;border: 1px solid #000000; background:#fff;padding:10 0 0 15;} .newsBackground {border: 4px solid #fff;height:284px; background: #ced64b;-moz-border-radius:10px;-webkit-border-radius:10px;} .libraryBackground {border: 4px solid #fff;height:284px; background: #ebb700;-moz-border-radius:10px;-webkit-border-radius:10px;} .eventsBackground {border: 4px solid #fff;height:284px; background: #ff6000;-moz-border-radius:10px;-webkit-border-radius:10px;} .formBackground {border: 4px solid #fff;height:284px; background: #fff;-moz-border-radius:10px;-webkit-border-radius:10px;} /* more link -------------------- */ a.morelink:link, a.morelink:visited, a.morelink:hover, a.morelink:active {color:#FF0000; font-weight:normal;background: transparent url("images/sprites.gif") no-repeat 5px -500px;padding-left:21px;text-align:right;text-decoration:none;} a.morelink:hover {background: transparent url("images/sprites.gif") 5px -400px;} .morelink span {position:absolute;left:-9999px;width:900px;} /* news teasers -------------------- */ .news-teaser-header {color:#1e1e1e;font: bold 14px Helvetica, Arial, sans-serif;} #newsIssue .news-teaser-text {font: normal 11px Helvetica, Arial, sans-serif;color:#333333;line-height:20px;} #newsIssue .morelink {font-size:9px} /* service links -------------------- */ #service-links-top {position:absolute;top:150px;right:60px;margin:0;padding 0;z-index:35;font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#fff;text-transform:lowercase;} #service-links-top ul.service-links {overflow:hidden;padding:0;text-align:center;padding:0.541em 0;margin:1em 0 !important;} #service-links-top ul.service-links li {display:inline;list-style:none;padding:0 7px;} #service-links-top ul.service-links li img {vertical-align:middle;} #service-links-top ul.service-links li a:link, #service-links-top ul.service-links li a:visited, #service-links-top ul.service-links li a:active {color:#fff; text-decoration:none;} #service-links-top ul.service-links li a:hover {color:#33ff00;} /* zocoItems ---------------------------------------------------------- */ #zocoItems {position:absolute;top:506px;left:350px;z-index:5;width:810px;} #zocoItems #item-one {position:absolute;top:0px;left:0px;padding:5px 15px 10px 15px;background: url("images/itemBackgroundOne.png") no-repeat top left;height:177px;width:252px;text-align:left;z-index:20;} #zocoItems #item-two {position:absolute;top:0px;left:266px;padding:5px 15px 10px 15px;background: url("images/itemBackgroundTwo.png") no-repeat top left;height:144px;width:252px;text-align:left;z-index:20;} #zocoItems #item-three {position:absolute;top:0px;left:535px;padding:5px 15px 10px 15px;background: url("images/itemBackgroundThree.png") no-repeat top left;height:144px;width:252px;text-align:left;z-index:20;} .zocoItemHeader{padding-left: 12px;font-size:24px;color:#000;} .stripeMe{width:220px;} .stripeDownload{width:723px;margin:20px;} .stripeNews{width:723px;margin:20px;} .stripeEvents{width:723px;margin:20px;} .stripeEventPage{width:503px;margin:20px;} #item-one table, #item-one table {border-collapse: collapse;background:none; font-size:11px; font-weight:bold;color: #fff;} #item-one th {background: #8ea707;color: #fff;padding: 2px 8px;text-align: left;border-right: 1px solid #fff;line-height: 1.2;} #item-one td {padding:2px 0px 2px 6px;border-bottom: 1px solid #ffffff;vertical-align: top;background: #8ea707;} #item-one tr.alt td {background: #8ea707;} #item-one tr.over td {background: #768331;} #item-one a, #item-one a:link, #item-one a:active {color: #FFFFFF; text-decoration:none; font-size:10px;} #item-one a:hover {color:#fff} #item-two table {border-collapse: collapse;background:none; font-size:11px; font-weight:bold;color: #fff;} #item-two th {background: #8ea707;color: #fff;padding: 2px 8px;text-align: left;border-right: 1px solid #fff;line-height: 1.2;} #item-two td {padding:2px 0px 2px 6px;border-bottom: 1px solid #ffffff;vertical-align: top;background: #a77f07;} #item-two tr.alt td {background: #a77f07;} #item-two tr.over td {background: #8a6905;} #item-two a, #item-two a:link, #item-two a:active {color: #FFFFFF; text-decoration:none; font-size:10px;} #item-two a:hover {color:#fff} #item-three table {border-collapse: collapse;background:none; font-size:11px; font-weight:bold;color: #fff;} #item-three th {background: #8ea707;color: #fff;padding: 2px 8px;text-align: left;border-right: 1px solid #fff;line-height: 1.2;} #item-three td {padding:2px 0px 2px 6px;border-bottom: 1px solid #ffffff;vertical-align: top;background: #d55609;} #item-three tr.alt td {background: #d55609;} #item-three tr.over td {background: #ab521c;} #item-three a, #item-two a:link, #item-two a:active {color: #FFFFFF; text-decoration:none; font-size:10px;} #item-three a:hover {color:#fff} #viewAll {position:absolute;left:180px;top:115px;z-index:50;} #viewAll a:link, #viewAll a:visited, #viewAllOne a:link, #viewAllOne a:visited {font: bold 11px Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;} #viewAll a:hover, #viewAllOne a:hover {color:#1c1c1c;} /* pagination ------------------------------------- */ #paginator-wrap {position:absolute;top:250px;right:24px;text-align:center; z-index:15; color:#000;font-size:11px;} #paginator-wrap .paginator a {padding:0px 8px;} #paginator-wrap .paginator span {padding:4px 8px;} #paginator-wrap .paginator span.p-page {color:#ff0000;} #paginator-wrap .paginator span.p-previous {} #paginator-wrap .paginator span.p-next {} #paginator-wrap .paginator a.p-page {color:#fff;} #paginator-wrap .paginator a.p-page:hover {color:#ff0000;} #paginator-wrap .paginator a.p-previous:hover {color:#ff0000;} #paginator-wrap .paginator a.p-next:hover {color:#ff0000;} /* events details ------------------------------------- */ #event-item table {border-collapse: collapse;background:none; font-size:11px; font-weight:normal;color: #7c7c8a;} #event-item th {background: #fff;color: #7c7c8a;padding: 2px 8px;text-align: left;border-right: 1px solid #7c7c8a;line-height: 1.2;} #event-item td {padding:2px 10px 2px 10px;border-bottom: 1px solid #7c7c8a;vertical-align: top;background: #fff;} #event-item tr.alt td {background: #fff;} #event-item tr.over td {background: #fff;} #event-item a, #item-two a:link, #item-two a:active {color: #FFFFFF; text-decoration:none} #event-item a:hover {color:#fff} /* events calendar ------------------------------------- */ #eventCalendar {position:absolute;top:20px;right:15px;width:200px;border: 4px solid #fff;background: #ced64b;-moz-border-radius:10px;-webkit-border-radius:10px;} .event-details {font-size:11px;line-height:16px;} .calendar {width:200px;font-size:11px; line-height:14px;} .calendar td {text-align:center;border: 1px solid #fff; color:#FFFFFF; font-weight:bold; background:#8ea707;padding: 4px 2px;} .calendar th {text-align:center} .calendar thead th {padding: 3px 2px;font-size:11px; font-weight:bold;} .calendar tbody th {padding: 2px} .calendar tbody th.sub {padding: 2px} /* days with events */ td.calevent a {color:#000000;} td.caltoday a {color:#ebb700;} td.caltoday {color:#930b29;} /* ticker ---------------------------------------------------------- */ #ticker-background {position:absolute;top:40px;right:20px;margin: 0;padding: 10px;background: url("images/tickerBackground.png") no-repeat center center;width: 512px;height:37px;z-index:20;} .tickerbox {position:absolute;top:42px;right:150px;z-index:5;width:450px;margin:0;padding:0;height:37px;z-index:20;} .tickerbox ul {width:100%; position:relative; text-align:center;} .tickerbox ul li {width:100%;list-style:none;list-postion:inside;position:absolute;padding:5px;overflow:hidden;color:#ffffff;font-weight:bold;font-size:12px;text-decoration:none;list-style: none;} .tickerbox ul li a:link, .tickerbox ul li a:visited, .tickerbox ul li a:active {color:#FFF;} .tickerbox ul li a.hasLink:link, .tickerbox ul li a.hasLink:visited, .tickerbox ul li a.hasLink:active {text-decoration:underline;} .tickerbox ul li a.hasLink:hover {color:#ff8311;text-decoration:underline;} /* main footer ---------------------------------------------------------- */ #main-footer {position:absolute;top:700px;z-index:30;width:1200px;height: 70px;text-align:center; text-transform:uppercase;font-size:9px;color:#ffffff; } #main-footer a, #main-foote a:link {color:#ffffff; text-decoration:none;} /* jcarousel ---------------------------------------------------------- */ .jcarousel-container {position:relative;} .jcarousel-skin-gallery .jcarousel-container-horizontal {width:757px;} .jcarousel-list { z-index:1; overflow:hidden; position:relative; top:0; left:0; margin:0; padding:0; } .jcarousel-list li, .jcarousel-item { float:left; list-style:none; width:75px; height:75px; } .jcarousel-clip { z-index:2; padding:0; margin:0; overflow:hidden; position:relative; } .jcarousel-list { z-index:1; overflow:hidden; position:relative; top:0; left:0; margin:0; padding:0; } .jcarousel-list li, .jcarousel-item { float:left; list-style:none; width:75px; height:75px; } .jcarousel-next { z-index:3; display:none; } .jcarousel-prev { z-index:3; display:none; } .jcarousel-skin-gallery .jcarousel-container {background:#FFFFFF;} .jcarousel-skin-gallery .jcarousel-container-horizontal {margin-left:-6px;width:767px;padding:0px;} .jcarousel-skin-gallery .jcarousel-container-vertical { width:75px; height:245px; padding:40px 20px; } .jcarousel-skin-gallery .jcarousel-clip-horizontal {width:767px;height:282px;} .jcarousel-skin-gallery .jcarousel-clip-vertical { width:767px; height:245px; } .jcarousel-skin-gallery .jcarousel-item {border-top:1px solid #acacac;width:767px;height:282px;} .jcarousel-skin-gallery .jcarousel-item-horizontal { margin-right:0; } .jcarousel-skin-gallery .jcarousel-item-vertical { margin-bottom:10px; } .jcarousel-skin-gallery .jcarousel-item-placeholder { background:#fff; color:#000; } .jcarousel-skin-gallery .jcarousel-next-horizontal { position:absolute; top:43px; right:5px; width:32px; height:32px; cursor:pointer; background:transparent url(/sites/all/themes/tbm/js/jcarousel/skins/tango/next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-gallery .jcarousel-next-horizontal:hover { background-position:-32px 0; } .jcarousel-skin-gallery .jcarousel-next-horizontal:active { background-position:-64px 0; } .jcarousel-skin-gallery .jcarousel-next-disabled-horizontal, .jcarousel-skin-gallery .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-gallery .jcarousel-next-disabled-horizontal:active { cursor:default; background-position:-96px 0; } .jcarousel-skin-gallery .jcarousel-prev-horizontal { position:absolute; top:43px; left:5px; width:32px; height:32px; cursor:pointer; background:transparent url(/sites/all/themes/tbm/js/jcarousel/skins/tango/prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-gallery .jcarousel-prev-horizontal:hover { background-position:-32px 0; } .jcarousel-skin-gallery .jcarousel-prev-horizontal:active { background-position:-64px 0; } .jcarousel-skin-gallery .jcarousel-prev-disabled-horizontal, .jcarousel-skin-gallery .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-gallery .jcarousel-prev-disabled-horizontal:active { cursor:default; background-position:-96px 0; } .jcarousel-skin-gallery .jcarousel-next-vertical { position:absolute; bottom:5px; left:43px; width:32px; height:32px; cursor:pointer; background:transparent url(/sites/all/themes/tbm/js/jcarousel/skins/tango/next-vertical.png) no-repeat 0 0; } .jcarousel-skin-gallery .jcarousel-next-vertical:hover { background-position:0 -32px; } .jcarousel-skin-gallery .jcarousel-next-vertical:active { background-position:0 -64px; } .jcarousel-skin-gallery .jcarousel-next-disabled-vertical, .jcarousel-skin-gallery .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-gallery .jcarousel-next-disabled-vertical:active { cursor:default; background-position:0 -96px; } .jcarousel-skin-gallery .jcarousel-prev-vertical { position:absolute; top:5px; left:43px; width:32px; height:32px; cursor:pointer; background:transparent url(/sites/all/themes/tbm/js/jcarousel/skins/tango/prev-vertical.png) no-repeat 0 0; } .jcarousel-skin-gallery .jcarousel-prev-vertical:hover { background-position:0 -32px; } .jcarousel-skin-gallery .jcarousel-prev-vertical:active { background-position:0 -64px; } .jcarousel-skin-gallery .jcarousel-prev-disabled-vertical, .jcarousel-skin-gallery .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-gallery .jcarousel-prev-disabled-vertical:active { cursor:default; background-position:0 -96px; } .jcarousel-control { margin-bottom:10px; text-align:center; } .jcarousel-control a { font-size:1.2em; text-decoration:none; padding:0 5px; margin:0 0 5px 0; border:1px solid #fff; color:#ffffff; background-color:#67712A; font-weight:bold; } .jcarousel-control a:focus, .jcarousel-control a:active { outline:none; } .photo-gallery-item .photo {border:1px solid #acacac;border-top:none;float:left;width:270px;height:270px;text-align:center;} .photo-gallery-item .photo-blurb {margin-left:315px;font-family:Arial;color:#444444;} .node-type-photogallery h1#gallery-title { color:#5C5F32; font-family:Times New Roman, serif; font-size:2.9em; font-weight:bold; padding-bottom:3px; } .node-type-photogallery #mycarousel { visibility:hidden; } .continued {font-size:10px; font-weight:normal;} .photo-gallery-item .photo-title { font-size:1.5em; font-weight:bold; margin-bottom:-10px; } .photo-gallery-item .photo-blurb p { } .photo-gallery-item .mycarousel-prev, .photo-gallery-item .mycarousel-next { } .node-type-slideshow .gallery-pager { background-color:#FFFFFF; border-bottom:1px solid #acacac; border-top:none; text-align:center; color:black; width:175px; } .node-type-slideshow .page { color:#666666; position:relative; top:-5px; } .node-type-slideshow .gallery-pager { margin-bottom:10px; } .node-type-slideshow #arrow-left { margin-right:10px; padding-top:3px; } .node-type-slideshow #arrow-right { margin-left:10px; padding-top:3px; } .node-type-slideshow .photo-credit { clear:both; float:left; color:#444444; } .node-type-slideshow h2#sub-title { color:#666666; margin:0; font-size:1.5em; } .node-type-slideshow .credit { } .node-type-slideshow #gallery-tools .img-bar { background:transparent url(/sites/all/themes/wpni/images/divider-full-length.jpg) no-repeat scroll left center; height:8px; margin:5px 0; width:767px; } .node-type-slideshow #gallery-tools { margin-bottom:10px; } .node-type-slideshow .related-galleries .headline { font-size:1.2em; color:#67712a; text-transform:uppercase; margin-bottom:7px; } .node-type-slideshow .related-galleries .item a { font-size:1.2em; color:#d29046; padding-top:5px; } .node-type-slideshow .gallery-spacer { color:#DEDEDE; border-top:2px solid #DEDEDE; margin-bottom:15px; margin-top:15px; } .node-type-slideshow #gallery-sponsor { margin-bottom:5px; } .node-type-slideshow .sponsored-by { } .jcarousel-control { visibility:hidden; } #slideshow-attribution { margin-left:-6px; clear:both; color:#666666; padding-top:1em; }