/* Site: openmyvideo.com Author: Caleb Wright of FabrikAgency.com */ /*------ CORE -------*/ * { margin:0; padding:0; border:0; } html, body { height:100%; } body { text-align:center; font: 62.5% Arial, Verdana, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-family: Arial, sans-serif; margin-bottom:0.5em; } h1 { font-size:1.6em; font-weight:bold; } h2 { font-size:1.4em; } h3 { font-size:1.1em; } h4 { font-size:0.95em; } h5 { font-size:0.9em; } h6 { font-size:1em; } p, select, li { line-height:1.3em; } p { margin-bottom:1em; } input, textarea, select { font-size:1em; outline:none; } textarea { font-family:Arial, Verdana, Helvetica, sans-serif; } ul li { list-style: none; } ol li { font-size:1.2em; margin:1em 0 1em 1.6em; } a:link, a:visited { text-decoration:underline; } a:hover, a:active { text-decoration:none; } a:active { outline: none; } /*------------- CLEARFIX -------------*/ .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; zoom: 1; } /*------------ ALIGNMENT -------------*/ .center { text-align:center; } .center-inner { margin-left:auto; margin-right:auto; text-align:left; } .left { text-align:left; } .right { text-align:right; } .float-right { float: right; } .float-left { float: left; } .border { border: 1px dotted red; } .invisible{ visibility: hidden; } .image-inline{ vertical-align: middle; } table.center td { text-align:center; } table tr.center td { text-align:center; } /*---------------- MISCELLANEOUS ----------------*/ .clear { clear: both; display: block; height: 0; overflow: hidden; } .alt { display: none; height:1%; overflow:hidden; } .clear-after:after { content:'.'; display:block; visibility:hidden; height:0; clear:both; } .no-cursor { cursor:default !important; } .hidden { display:none; } /* Buttons */ .button-green, .button-orange { color: white !important; font-size: 12px; text-transform: uppercase; font-weight: bold; text-shadow: 1px 1px 1px #666; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 0px 6px; white-space: nowrap; text-decoration: none !important; } .button-green { background-color: #526d30; border: 2px solid #395024; background: url(../images/button-green-bg.gif) 0 -2px repeat-x; } .button-orange { background-color: #e68800; border: 2px solid #999; text-shadow: 1px 1px 1px #666; background: url(../images/button-orange-bg.gif) 0 -2px repeat-x; } .button-green-small{ font-size: 11px; color: white !important; background: url(../images/button-green-bg.gif) 0 -2px repeat-x; padding: 2px 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-decoration: none !important; } /*-------------- SITE COLORS --------------*/ body { background:#dce4cc url("../images/content/primary/background.gif") left top repeat; color:#666; } h1, h2, h3, h4, h5, h6 { color:#333; } a:link, a:visited { color:#954010; text-decoration:none; } a:hover, a:active { color:#954010; text-decoration:underline; } input:focus, textarea:focus, select:focus { } /*-------- LAYOUT ---------*/ #wrapper { margin:0 auto; width:972px; min-height:768px; background:#fff; text-align:left; } #wrapperInner { margin:0 6px 0 6px; padding:0 0 10px 0; } #innerContent { margin:0 2.6em 0 2.6em; } #header { height:137px; margin-bottom:3px; text-align:center; position:relative; } #header #headerLogo { display:block; width:221px; height:99px; overflow:hidden; text-indent:-800px; background:transparent url("../images/logos/header.gif") left top no-repeat; float: left; margin-top:22px; margin-left:22px; } #header #newFace { display:block; width:287px; height:22px; text-indent:-800px; overflow:hidden; background:transparent url("../images/the-new-face-of-communication.gif") left top no-repeat; position:absolute; top:97px; right:18px; } #header #headerLogoBranded { margin-top: 22px; margin-left: 22px; float: left; display: block; } #header #headerLogoBranded img { margin-top:5px; } #header #navigationContainer { position:absolute; top:0; left:0; width:960px; height:25px; background:transparent url("../images/navigation-primary.gif") left top repeat-x; } .logged-in #header #navigationContainer { background-position:0 -25px; } #header #navigation { float:right; } #header #navigation li { float:left; } #header #navigation li a { display:block; width:20px; height:25px; overflow:hidden; text-indent:-600px; background:transparent url("../images/navigation-primary.gif") left top repeat-x; } #navigation li#navigationRecordBlank { width:60px; height:25px; background-color:#d9d9d9; } #navigation li#navigationRecord a { width:60px; } #navigation li#navigationRecord a:link, #navigation li#navigationRecord a:visited { background-position:-630px 0; } #navigation li#navigationRecord a:hover, #navigation li#navigationRecord a:active { background-position:-630px -25px; } #navigation li#navigationMyHome a { width:66px; } #navigation li#navigationMyHome a:link, #navigation li#navigationMyHome a:visited { background-position:-653px 0; } #navigation li#navigationMyHome a:hover, #navigation li#navigationMyHome a:active { background-position:-653px -25px; } #navigation li#navigationBlog a { width:83px; } #navigation li#navigationBlog a:link, #navigation li#navigationBlog a:visited { background-position:-719px 0; } #navigation li#navigationBlog a:hover, #navigation li#navigationBlog a:active { background-position:-719px -25px; } #navigation li#navigationAbout a { width:83px; } #navigation li#navigationAbout a:link, #navigation li#navigationAbout a:visited { background-position:-802px 0; } #navigation li#navigationAbout a:hover, #navigation li#navigationAbout a:active { background-position:-802px -25px; } #navigation li#navigationContact a { width:70px; } #navigation li#navigationContact a:link, #navigation li#navigationContact a:visited { background-position:-885px 0; } #navigation li#navigationContact a:hover, #navigation li#navigationContact a:active { background-position:-885px -25px; } #navigation li#navigationHome a { width:49px; margin-right:4px; } #navigation li#navigationHome a:link, #navigation li#navigationHome a:visited { background-position:-606px 0; } #navigation li#navigationHome a:hover, #navigation li#navigationHome a:active { background-position:-606px -25px; } #tagline{ color: #CCC; font-size: 24px; position: absolute; bottom: 0px; right: 20px; padding: 0; margin: 0; font-family: "Myriad Pro", "Helvetica neue", "Helvetica", "Arial", sans-serif; font-weight: normal; } #footer { margin:0.3em auto; width:972px; font-size:1.2em; text-align:left; color:#999; padding:0.6em 0; clear:both; } #footer a { color:#666; } #footer a:link, #footer a:visited { text-decoration:none; } #footer a:hover, #footer a:active { text-decoration:underline; } #webcamRecorder { height:400px; } #promoButtons { height:91px; } #promoButtons a { display:block; width:250px; height:91px; float:left; } /*----------------- EXPRESS INSTALL ------------------*/ #installOMVExpress { width:215px; height:180px; margin:20em 0 0 3.5em; } /*---- MY -----*/ body.my { background:#fecd66 url("../images/content/my/background.gif") left top repeat; } body.my #content { width:680px; position:relative; top:-82px; overflow:hidden; } body.my #contentLeft { width:280px; float:left; } body.my #header #newFace { display:none; } /*--------------- MY NAVIGATION ----------------*/ #myNavigation { height:25px; border-bottom:8px solid #fdb824; } #myNavigation li { float:left; height:25px; } #myNavigation li a { display:block; width:100px; height:25px; background:transparent url("/images/navigation-my.gif") left top no-repeat; text-indent:-900px; overflow:hidden; } #myNavigation li#myNavigationHome a { width:108px; } #myNavigation li#myNavigationHome a:link, #myNavigation li#myNavigationHome a:visited {} #myNavigation li#myNavigationHome.active a:link, #myNavigation li#myNavigationHome.active a:visited, #myNavigation li#myNavigationHome a:hover, #myNavigation li#myNavigationHome a:active { background-position:left -25px; } #myNavigation li#myNavigationAccount a { width:114px; } #myNavigation li#myNavigationAccount a:link, #myNavigation li#myNavigationAccount a:visited { background-position:-108px 0; } #myNavigation li#myNavigationAccount.active a:link, #myNavigation li#myNavigationAccount.active a:visited, #myNavigation li#myNavigationAccount a:hover, #myNavigation li#myNavigationAccount a:active { background-position:-108px -25px; } #myNavigation li#myNavigationProfile a { width:114px; } #myNavigation li#myNavigationProfile a:link, #myNavigation li#myNavigationProfile a:visited { background-position:-222px 0; } #myNavigation li#myNavigationProfile.active a:link, #myNavigation li#myNavigationProfile.active a:visited, #myNavigation li#myNavigationProfile a:hover, #myNavigation li#myNavigationProfile a:active { background-position:-222px -25px; } #myNavigation li#myNavigationUserGuide a { width:113px; } #myNavigation li#myNavigationUserGuide a:link, #myNavigation li#myNavigationUserGuide a:visited { background-position:-336px 0; } #myNavigation li#myNavigationUserGuide.active a:link, #myNavigation li#myNavigationUserGuide.active a:visited, #myNavigation li#myNavigationUserGuide a:hover, #myNavigation li#myNavigationUserGuide a:active { background-position:-336px -25px; } #myNavigationAdmin a{ width: 113px;} #myNavigationAdmin a:link, #myNavigationAdmin a:visited {background-position:-448px 0;} #myNavigation li#myNavigationAdmin.active a:link, #myNavigation li#myNavigationAdmin.active a:visited, #myNavigation li#myNavigationAdmin a:hover, #myNavigation li#myNavigationAdmin a:active { background-position:-448px -25px; } /*------------------ MY SUBNAVIGATION -------------------*/ .my-subnavigation { height:20px; margin-bottom:2em; } .my-subnavigation li { float:left; height:20px; } .my-subnavigation li a { display:block; width:100px; height:20px; text-indent:-900px; overflow:hidden; } /* myHome */ #myHomeNavigation.my-subnavigation li a { background:transparent url("/images/navigation-myhome.gif") left top no-repeat; } .my-subnavigation li#myHomeNavigationAddressBook a { width:107px; } .my-subnavigation li#myHomeNavigationAddressBook a:link, .my-subnavigation li#myHomeNavigationAddressBook a:visited {} .my-subnavigation li#myHomeNavigationAddressBook.active a:link, .my-subnavigation li#myHomeNavigationAddressBook.active a:visited, .my-subnavigation li#myHomeNavigationAddressBook a:hover, .my-subnavigation li#myHomeNavigationAddressBook a:active { background-position:left -20px; } .my-subnavigation li#myHomeNavigationGroups a { width:82px; } .my-subnavigation li#myHomeNavigationGroups a:link, .my-subnavigation li#myHomeNavigationGroups a:visited { background-position:-107px 0; } .my-subnavigation li#myHomeNavigationGroups.active a:link, .my-subnavigation li#myHomeNavigationGroups.active a:visited, .my-subnavigation li#myHomeNavigationGroups a:hover, .my-subnavigation li#myHomeNavigationGroups a:active { background-position:-107px -20px; } .my-subnavigation li#myHomeNavigationReceivedVideos a { width:112px; } .my-subnavigation li#myHomeNavigationReceivedVideos a:link, .my-subnavigation li#myHomeNavigationReceivedVideos a:visited { background-position:-189px 0; } .my-subnavigation li#myHomeNavigationReceivedVideos.active a:link, .my-subnavigation li#myHomeNavigationReceivedVideos.active a:visited, .my-subnavigation li#myHomeNavigationReceivedVideos a:hover, .my-subnavigation li#myHomeNavigationReceivedVideos a:active { background-position:-189px -20px; } .my-subnavigation li#myHomeNavigationSentVideos a { width:86px; } .my-subnavigation li#myHomeNavigationSentVideos a:link, .my-subnavigation li#myHomeNavigationSentVideos a:visited { background-position:-301px 0; } .my-subnavigation li#myHomeNavigationSentVideos.active a:link, .my-subnavigation li#myHomeNavigationSentVideos.active a:visited, .my-subnavigation li#myHomeNavigationSentVideos a:hover, .my-subnavigation li#myHomeNavigationSentVideos a:active { background-position:-301px -20px; } .my-subnavigation li#myHomeNavigationSavedVideos a { width:92px; } .my-subnavigation li#myHomeNavigationSavedVideos a:link, .my-subnavigation li#myHomeNavigationSavedVideos a:visited { background-position:-387px 0; } .my-subnavigation li#myHomeNavigationSavedVideos.active a:link, .my-subnavigation li#myHomeNavigationSavedVideos.active a:visited, .my-subnavigation li#myHomeNavigationSavedVideos a:hover, .my-subnavigation li#myHomeNavigationSavedVideos a:active { background-position:-387px -20px; } .my-subnavigation li#myHomeNavigationFavoriteVideos a { width:79px; } .my-subnavigation li#myHomeNavigationFavoriteVideos a:link, .my-subnavigation li#myHomeNavigationFavoriteVideos a:visited { background-position:-546px 0; } .my-subnavigation li#myHomeNavigationFavoriteVideos.active a:link, .my-subnavigation li#myHomeNavigationFavoriteVideos.active a:visited, .my-subnavigation li#myHomeNavigationFavoriteVideos a:hover, .my-subnavigation li#myHomeNavigationSavedVideos a:active { background-position:-546px -20px; } .my-subnavigation li#myHomeNavigationThemes a { width:68px; } .my-subnavigation li#myHomeNavigationThemes a:link, .my-subnavigation li#myHomeNavigationThemes a:visited { background-position:-479px 0; } .my-subnavigation li#myHomeNavigationThemes.active a:link, .my-subnavigation li#myHomeNavigationThemes.active a:visited, .my-subnavigation li#myHomeNavigationThemes a:hover, .my-subnavigation li#myHomeNavigationThemes a:active { background-position:-479px -20px; } /* myAccount */ #myAccountNavigation.my-subnavigation li a { background:transparent url("/images/navigation-myaccount.gif") left top no-repeat; } .my-subnavigation li#myAccountNavigationSummary a { width:84px; } .my-subnavigation li#myAccountNavigationSummary a:link, .my-subnavigation li#myAccountNavigationSummary a:visited {} .my-subnavigation li#myAccountNavigationSummary.active a:link, .my-subnavigation li#myAccountNavigationSummary.active a:visited, .my-subnavigation li#myAccountNavigationSummary a:hover, .my-subnavigation li#myAccountNavigationSummary a:active { background-position:left -20px; } .my-subnavigation li#myAccountNavigationBilling a { width:139px; } .my-subnavigation li#myAccountNavigationBilling a:link, .my-subnavigation li#myAccountNavigationBilling a:visited { background-position:-84px 0; } .my-subnavigation li#myAccountNavigationBilling.active a:link, .my-subnavigation li#myAccountNavigationBilling.active a:visited, .my-subnavigation li#myAccountNavigationBilling a:hover, .my-subnavigation li#myAccountNavigationBilling a:active { background-position:-84px -20px; } .my-subnavigation li#myAccountNavigationBillingHistory a { width:115px; } .my-subnavigation li#myAccountNavigationBillingHistory a:link, .my-subnavigation li#myAccountNavigationBillingHistory a:visited { background-position:-223px 0; } .my-subnavigation li#myAccountNavigationBillingHistory.active a:link, .my-subnavigation li#myAccountNavigationBillingHistory.active a:visited, .my-subnavigation li#myAccountNavigationBillingHistory a:hover, .my-subnavigation li#myAccountNavigationBillingHistory a:active { background-position:-223px -20px; } .my-subnavigation li#myAccountNavigationChangePlan a { width:102px; } .my-subnavigation li#myAccountNavigationChangePlan a:link, .my-subnavigation li#myAccountNavigationChangePlan a:visited { background-position:-338px 0; } .my-subnavigation li#myAccountNavigationChangePlan.active a:link, .my-subnavigation li#myAccountNavigationChangePlan.active a:visited, .my-subnavigation li#myAccountNavigationChangePlan a:hover, .my-subnavigation li#myAccountNavigationChangePlan a:active { background-position:-338px -20px; } .my-subnavigation li#myAccountNavigationMembershipTerms a { width:66px; } .my-subnavigation li#myAccountNavigationMembershipTerms a:link, .my-subnavigation li#myAccountNavigationMembershipTerms a:visited { background-position:-440px 0; } .my-subnavigation li#myAccountNavigationMembershipTerms.active a:link, .my-subnavigation li#myAccountNavigationMembershipTerms.active a:visited, .my-subnavigation li#myAccountNavigationMembershipTerms a:hover, .my-subnavigation li#myAccountNavigationMembershipTerms a:active { background-position:-440px -20px; } /* myProfile */ #myProfileNavigation.my-subnavigation li a { background:transparent url("/images/navigation-myprofile.gif") left top no-repeat; } .my-subnavigation li#myProfileNavigationUsers a { width:64px; } .my-subnavigation li#myProfileNavigationUsers a:link, .my-subnavigation li#myProfileNavigationUsers a:visited {} .my-subnavigation li#myProfileNavigationUsers.active a:link, .my-subnavigation li#myProfileNavigationUsers.active a:visited, .my-subnavigation li#myProfileNavigationUsers a:hover, .my-subnavigation li#myProfileNavigationUsers a:active { background-position:left -20px; } .my-subnavigation li#myProfileNavigationSignatures a { width:92px; } .my-subnavigation li#myProfileNavigationSignatures a:link, .my-subnavigation li#myProfileNavigationSignatures a:visited { background-position:-84px 0; } .my-subnavigation li#myProfileNavigationSignatures.active a:link, .my-subnavigation li#myProfileNavigationSignatures.active a:visited, .my-subnavigation li#myProfileNavigationSignatures a:hover, .my-subnavigation li#myProfileNavigationSignatures a:active { background-position:-64px -20px; } .my-subnavigation li#myProfileNavigationChangePassword a { width:115px; } .my-subnavigation li#myProfileNavigationChangePassword a:link, .my-subnavigation li#myProfileNavigationChangePassword a:visited { background-position:-156px 0; } .my-subnavigation li#myProfileNavigationChangePassword.active a:link, .my-subnavigation li#myProfileNavigationChangePassword.active a:visited, .my-subnavigation li#myProfileNavigationChangePassword a:hover, .my-subnavigation li#myProfileNavigationChangePassword a:active { background-position:-156px -20px; } .my-subnavigation li#myProfileNavigationProfile a { width:59px; } .my-subnavigation li#myProfileNavigationProfile a:link, .my-subnavigation li#myProfileNavigationProfile a:visited { background-position:-271px 0; } .my-subnavigation li#myProfileNavigationProfile.active a:link, .my-subnavigation li#myProfileNavigationProfile.active a:visited, .my-subnavigation li#myProfileNavigationProfile a:hover, .my-subnavigation li#myProfileNavigationProfile a:active { background-position:-271px -20px; } /* admin */ #myAdminNavigationReports a{background: transparent url("/images/navigation-admin.gif") left top no-repeat;} .my-subnavigation li#myAdminNavigationReports a { width:77px;margin-right: 2px; } .my-subnavigation li#myAdminNavigationReports a:link, .my-subnavigation li#myAdminNavigationReports a:visited { background-position:-0 0; } .my-subnavigation li#myAdminNavigationReports.active a:link, .my-subnavigation li#myAdminNavigationReports.active a:visited, .my-subnavigation li#myAdminNavigationReports a:hover, .my-subnavigation li#myAdminNavigationReports a:active { background-position:-0px -20px; } #myAdminNavigationUsers a{background: transparent url("/images/navigation-admin.gif") left top no-repeat;} .my-subnavigation li#myAdminNavigationUsers a { width:77px; } .my-subnavigation li#myAdminNavigationUsers a:link, .my-subnavigation li#myAdminNavigationUsers a:visited { background-position:-77px 0; } .my-subnavigation li#myAdminNavigationUsers.active a:link, .my-subnavigation li#myAdminNavigationUsers.active a:visited, .my-subnavigation li#myAdminNavigationUsers a:hover, .my-subnavigation li#myAdminNavigationUsers a:active { background-position:-77px -20px; } /*------------ SKELETONS ------------*/ .two-columns {} .two-columns .left-column { float:left; width:305px; } .two-columns .right-column { margin-left:310px; } .two-columns-full-width {} .two-columns-full-width .left-column{ float: left; width: ; } /*-------- LOGIN --------*/ #header #loginForm { float:left; position:relative; left:331px; } #header #loginForm li { float:left; } #header #loginForm #loginFormRememberMe { position:absolute; font-size:0.9em; top:25px; left:85px; width:100px; text-transform:uppercase; } #header #loginForm #loginFormRememberMe input { position:relative; top:2px; width:auto; border:none; } #header #loginForm input { background:transparent; border:none; width:85px; height:14px; font-size:1em; padding:0; } #header #loginFormUsername, #header #loginFormPassword { margin-top:0.7em;} #header #loginFormUsername { margin-right:1em; } #header #loginFormPassword { margin-right:0.9em; } #header label { color:#999; } #header #loginFormGo { } #header #loginForm #loginFormGo { position:relative; top:6px; } #header #loginForm #loginFormGo input { border:none; padding:0; width:auto; font-size:1em; height:auto; } /*------------ LOGIN FORM ------------*/ #loginStandaloneFormWrapper { text-align:center; } #loginStandaloneForm { margin:5em auto; text-align:left; background:#78af27 url("/images/sign-in-background.gif") left top no-repeat; display:block; width:350px; height:113px; } #loginStandaloneForm #loginButton { float:right; position:relative; top:35px; right:14px;} #loginStandaloneForm input { border:none; font-size:1.2em; } #loginStandaloneForm li { color:#fff; font-size:1.2em; position:relative; left:24px; width:190px; } #loginStandaloneForm li#usernameField { top:18px; } #loginStandaloneForm li#passwordField { top:24px; } #loginStandaloneForm li#rememberMeField { top:33px; } #loginStandaloneForm li#usernameField input, #loginStandaloneForm li#passwordField input { color:#73ae1e; width:190px; background:transparent url("/images/input-background.gif") left top no-repeat; } #loginStandaloneForm li#rememberMeField label { position:relative; top:-2px; } #loggedIn { float:left; position:relative; left:280px; width:352px; } #loggedIn li { float:left; position:relative; top:5px; font-size:1.2em; margin-left:1em;} #loggedIn li#loggedInUsername { font-weight:bold; } #loggedIn li#loggedInUsername a:link, #loggedIn li#loggedInUsername a:visited { color:#7d7d7d; } #loggedIn li#loggedInUsername a:hover, #loggedIn li#loggedInUsername a:active { color:#e77f05; text-decoration:none; } #loggedIn #logoutButton { margin-left:0.5em; } #loggedIn #logoutButton a { display:block; width:49px; height:15px; overflow:hidden; text-indent:-500px; background:transparent url("/images/button-logout.gif") left top no-repeat; } #loggedIn li#accountNotifications { float:right; width:110px; height:25px; top:0; margin-right: 25px;} #loggedIn #accountNotifications a.flag { display:block; background:transparent url("/images/icons/flag.png") 2px top no-repeat; padding:0 4px 0 20px; text-decoration:none; position:relative; top:5px; } #loggedIn li#accountNotifications:hover { background-color:#fff; } #loggedIn li#accountNotifications div#notificationMessage { display:none; border:1px solid #ddd; border-top:0; background:#fff; width:200px; position:absolute; top:25px; left:-1px; z-index:201; text-align:left; } #loggedIn li#accountNotifications div#notificationMessage p { margin:0.8em 0.5em; font-size:1.0em; } #loggedIn li#accountNotifications.active div#notificationMessage, #loggedIn li#accountNotifications:hover div#notificationMessage { display:block; } #pageSession .buttons { text-align:center; padding-left:2em; margin:1em auto 5em auto; width:350px; font-size:1.1em; } #pageSession .buttons a { text-decoration:underline; } /*----------- GREY TABS -----------*/ .grey-tabs { height:33px; border-bottom:1px solid #e8e8e8; display:block; } .grey-tabs li { height:34px; float:left; background:transparent url("/images/grey-tabs.gif") left top no-repeat; } .grey-tabs li a { display:block; height:20px; margin-left:22px; padding-top:14px; background:transparent url("/images/grey-tabs.gif") top right no-repeat; } .grey-tabs li a span { font:bold 1.2em Helvetica, Arial, sans-serif; padding:0 22px 0 0; color:#787876;} /* HOVER STATE */ .grey-tabs li:hover { background:transparent url("/images/grey-tabs.gif") left -39px no-repeat; } .grey-tabs li:hover a { background:transparent url("/images/grey-tabs.gif") right -39px no-repeat; } /* ACTIVE STATE */ .grey-tabs li.active { background:transparent url("/images/grey-tabs.gif") left -78px no-repeat; } .grey-tabs li.active a { background:transparent url("/images/grey-tabs.gif") right -78px no-repeat; } .grey-tabs li.active a span { color:#e77f05; } .grey-tabs-header { margin:0 20px 0 2px; position:relative; top:4px;} /*------------ SMALL TABS ------------*/ .small-tabs { height:17px; display:block; } .small-tabs li { height:17px; float:left; margin-right:2px; } .small-tabs li a { font-family:Helvetica, sans-serif; font-weight:bold; padding-left:8px; display:block; text-transform:uppercase; height:17px; background:transparent url("/images/navigation-small-tabs.gif") left top no-repeat; color:#acc4c5; } .small-tabs li a span { display:block; height:17px; padding-right:8px; position:relative; line-height:1.7em; background:transparent url("/images/navigation-small-tabs.gif") right top no-repeat; } /* HOVER STATE */ .small-tabs li a:hover, .small-tabs li a:active { background:transparent url("/images/navigation-small-tabs.gif") left -17px no-repeat; text-decoration:none; color:#fff; } .small-tabs li a:hover span, .small-tabs li a:active span { background:transparent url("/images/navigation-small-tabs.gif") right -17px no-repeat; } /* ACTIVE STATE */ .small-tabs li.active a { background:transparent url("/images/navigation-small-tabs.gif") left -17px no-repeat; } .small-tabs li.active a span { color:#fff; background:transparent url("/images/navigation-small-tabs.gif") right -17px no-repeat; } /*--------- TABLES ---------*/ table { border-collapse:collapse; width:100%; } table thead th { color:#666; font-size:1.4em; font-weight:bold; padding:0.5em; } table tr.odd { background:transparent url("/images/table-stripe.gif") left top repeat; } table tbody tr td { padding:0.5em; font-size:1.2em; } /*------------ ARROW LIST ------------*/ ul.arrow-list { margin-left:4em; } .arrow-list li { font-size:1.2em; color:#4c4c4c; list-style-image:url("../images/bullet-arrow.gif"); list-style-type:circle; margin-bottom:0.5em; } /*----------- ELEMENTS -----------*/ p { font-size:1.2em; } input, select, textarea, .input-wrapper { border:1px solid #adadad; color:#555; padding:0.2em; } input:focus { border:1px solid #666; } input.checkbox, input.radio { width:auto; border:none; } input.submit { border:none; } .input-wrapper input{ border: none !important; } .pagination { font-size:1.2em; text-align:center; margin-top:1em; } .stripe { background:transparent url("/images/table-stripe.gif") left top repeat; } /*-------- FLASH --------*/ /* .flash { width:960px; height:42px; background:transparent url("/images/flash-background.png") left -1px no-repeat; margin-top:1em; } .flash div { margin-left:16px; padding-top:16px; color:#fff; font-weight:bold; font-size:1.1em; } .flash.flash-notice { background:none; padding-top:0; margin-top:0; width:auto; position:absolute; top:-45px; left:8px; } .flash.flash-notice div { color:#73AE1E; font-weight:normal; } .flash.flash-error { background-position:0 -41px; } .flash.flash-warning { background-position:0 -81px; } */ .flash { margin: 0 0 1em 0; border: 1px solid #eee; padding: 15px 15px 15px 60px; font: italic 12px Arial; text-align: left;} .flash .error_list li {} /*if style is needed, assign it */ .flash { color: #3c5c2a; border-color: #8ea980; background: #ceeebc url("/images/flash-ok.jpg") 14px center no-repeat; } .flash.flash-notice { color: #37535e; border-color: #8cb3c4; background: #d3eaf2 url("/images/flash-notice.jpg") 14px center no-repeat; } .flash.flash-warning { color: #66572c; border-color: #ccbc8b; background: #fff0c5 url("/images/flash-warning.jpg") 14px center no-repeat; } .flash.flash-error, .flash.flash-errors { color: #4b3333; border-color: #cdb9ba; background: #f4dfde url("/images/flash-error.jpg") 14px center no-repeat; } /*--------- ERRORS ---------*/ .errorExplanation { margin-bottom:2em; } .errorExplanation p { margin-bottom:0.5em; font-weight:bold; } .errorExplanation ul li { font-size:1.2em; margin:0.2em 0; } div.fieldWithErrors { display:inline; } /*-------- ICONS --------*/ .icon { display:block; width:16px; height:16px; cursor:pointer; } .icon.address-book-icon { background:transparent url("/images/icons/address-book.png") left top no-repeat; } .icon.address-book-add-icon { background:transparent url("/images/icons/address-book-add.png") left top no-repeat; } .is-favorite-true .favorite-icon, .icon.favorite-icon { background:transparent url("/images/icons/star.png") left top no-repeat; } .is-favorite-false .favorite-icon, .icon.non-favorite-icon { background:transparent url("/images/icons/star-disabled.png") left top no-repeat; } .icon.edit-icon { background:transparent url("/images/icons/pencil.png") left top no-repeat; } .icon.save-icon { background:transparent url("/images/icons/accept.png") left top no-repeat; } .icon.cancel-icon { background:transparent url("/images/icons/cancel.png") left top no-repeat; } .icon.delete-icon { background:transparent url("/images/icons/delete.png") left top no-repeat; } /*------------- THEME BLOCK --------------*/ /*
*/ .theme-block {} .theme-block .primary-color { width:26px; height:13px; background-color:#333; } .theme-block .secondary-color { width:12px; height:11px; background-color:#999; float:right; margin:1px 1px 0 0; } /*------------- ROUNDED BOX --------------*/ .cbb { margin:1em 0; padding:0 10px; border:1px solid #666; background:#fff; position:relative; } .cb { margin:0.5em 0; position:relative; } .bt { height:51px; margin:0 0 0 18px; background:url("/images/box-grey.gif") no-repeat 100% 0;} .bt div { position:relative; left:-18px; width:18px; height:51px; background:url("/images/box-grey.gif") no-repeat 0 0; font-size:0; line-height:0; } .bb { height:20px; margin:0 0 0 17px; background:url("/images/box-grey.gif") no-repeat 100% 100%; } .bb div { position:relative; left:-17px; width:17px; height:20px; background:url("/images/box-grey.gif") no-repeat 0 100%; font-size:0; line-height:0; } .i1 { padding:0 0 0 10px; background:url("/images/box-grey-ends.gif") repeat-y 0 0; } .i2 { padding:0 10px 0 0; background:url("/images/box-grey-ends.gif") repeat-y 100% 0; } .i3 { display:block; margin:0; padding:1px 10px; background:#fff; overflow:hidden; } .i3:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .i3 { display:inline-block; } .i3 { display:block; } .cbb h2, .cb h2 { position:absolute; top:13px; color:#e77f05; padding:0.3em 0 0 40px; height:32px; } /*----- BOX ------*/ .box { background:transparent url("../images/box/left.gif") left top repeat-y; } .box .box-header { height:40px; overflow:hidden; background:transparent url("../images/box/header.gif") left top repeat; } .box .box-header .box-header-right { width:6px; height:40px; float:right; background:transparent url("../images/box/header.gif") right top no-repeat; } .box .box-header h2 { font-size:1.3em; font-weight:bold; position:relative; top:14px; left:14px; text-transform:uppercase; } .box .box-inner { background:transparent url("../images/box/right.gif") right top repeat-y; } .box .box-inner .box-content { margin:2px 6px 0 6px; padding-top: 7px; } .box .box-footer { height:14px; background:transparent url("../images/box/footer.gif") left bottom no-repeat; } .box .box-footer .box-footer-right { width:6px; height:14px; float:right; background:transparent url("../images/box/footer.gif") right bottom no-repeat; } /*------------- OUTLINE BOX --------------*/ .outline-box { width:500px; background:transparent url("/images/box-outline-border.gif") left top repeat-y; } .outline-box .top { height:16px; background:transparent url("/images/box-outline.gif") left top no-repeat; } .outline-box .body { margin:0 1.5em; } .outline-box .bottom { height:16px; background:transparent url("/images/box-outline.gif") bottom left no-repeat; } /*------------------ OUTLINE BOX WIDE -------------------*/ .outline-box-wide { width:865px; background:transparent url("/images/box-outline-border-wide.gif") left top repeat-y; } .outline-box-wide .top { height:16px; background:transparent url("/images/box-outline-wide.gif") left top no-repeat; } .outline-box-wide .body { margin:0 1.5em; } .outline-box-wide .bottom { height:16px; background:transparent url("/images/box-outline-wide.gif") bottom left no-repeat; } /*-------------- SLANTED BOX ---------------*/ .slanted-box { width:449px; background:transparent url("/images/table-stripe.gif") left top repeat; } .slanted-box .box-tab-header { background:transparent url("/images/slanted-box-tab.gif") left top no-repeat; } .slanted-box .box-tab-header .box-tab { float:left; background:transparent url("/images/slanted-box-tab-right.gif") right top no-repeat; font:bold 1.2em Helvetica, Arial, sans-serif; color:#787876; } .slanted-box .box-tab-header .box-tab span { position:relative; top:1em; margin:0 2em;} .slanted-box .box-tab-header .box-tab-subheader { float:right; position:relative; left:-1px; z-index:100; background:#fff; height:32px; background:transparent url("/images/slanted-box-right.gif") top right no-repeat; } .slanted-box .box-tab-header .box-tab-subheader span.subheader { position:relative; top:1em; margin:0 0.5em; font-weight:bold; } .slanted-box .box-tab-header, .slanted-box .box-tab-header div { height:32px; } .slanted-box .box-content { background:transparent url("/images/slanted-box.gif") left top no-repeat; } .slanted-box .box-content-inner {background:transparent url("/images/slanted-box-footer.gif") bottom left no-repeat; padding:1em 1.5em 1em 2em; } /*------------ VIDEO LIST -------------*/ .video-list {} .video-list li { height:98px; border-top:1px solid #666; padding-top:11px; position:relative; } .video-list li.even { background:transparent url("/images/table-stripe.gif") left top repeat; } .video-list li .icon-frame { display:block; width:122px; height:92px; background:transparent url("/images/video-icon-placeholder.png") left top no-repeat; position:absolute; top:8px; left:16px; z-index:100; } .video-list li .icon, .video-list li .icon-placeholder { position:absolute; top:23px; left:37px; z-index:1; width:80px; height:60px; overflow:hidden; } .video-list li .icon {background: black;} .vide-list li .icon-placeholder {background: url(../images/video-icon-sending.png);} .video-list li .icon a { position:relative; top:-10px; } .video-list li .checkbox { float: left; margin: 37px 0 0 7px;} .video-list li .info { width:125px; height:90px; float:right; padding-left:8px; border-left:1px solid #bbb;} .video-list li .body { margin:5px 0 0 138px; width:215px; height:90px; overflow:hidden; } .video-list li .body h3 { color:#80b431; font:1.4em Verdana, sans-serif; margin-bottom: 2px;} .video-list .tag-list{ margin-bottom: 4px;} .video-list li .body p { color:#010101; font:1.2em Verdana, sans-serif; } /*------------ PHAT INPUT -------------*/ input.phat-input, textarea.phat-input, .phat-input select, select.phat-input { font:bold 1.8em Helvetica, sans-serif; color:#4a4a4a; padding:0.5em 0.3em; border:none; overflow:hidden; } textarea.phat-input { overflow:auto; } input.phat-input, .phat-input select, select.phat-input { background:transparent url("/images/input-background-2.gif") left top no-repeat; } .phat-input select, select.phat-input { font-weight:normal; } textarea.phat-input { background:transparent url("/images/textarea-background.gif") left top no-repeat; } /*------------- LIGHTBOX -------------*/ #lightbox { width:100%; height:100%; position:fixed; z-index:999; background:transparent url("../images/black-28.png") left top repeat; } #lightboxInside { width:509px; height:432px; position:absolute; top:150px; left:50%; text-align:left; } #lightboxContent { background:transparent url("/images/table-stripe.gif") repeat scroll left top; position:absolute; left:-255px; } #lightboxContentInside { margin:10px; margin-top:10px; background:#fff; height:412px; width:489px; overflow:hidden; position:relative; } #lightboxClose { display:block; position:absolute; width:24px; height:24px; right:-12px; top:-12px; background:transparent url("/images/close-button.png") left top no-repeat; } a#lightboxClose:hover, a#lightboxClose:active { background:transparent url("/images/close-button-over.png") left top no-repeat; } #lightbox iframe { width:100%; height:100%; } /*------------- PAGE STYLES --------------*/ #myAddressBook { } #myAddressBook h2 { background:transparent url("/images/icon-addresses.png") left top no-repeat; } #myAddressBook .grey-tabs, #myAddressBook table { margin-top:1em; } /*-------------- COLORPICKER --------------*/ .colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url("../images/colorpicker/colorpicker_background.png"); font-family: Arial, Helvetica, sans-serif; display: none; } .colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } .colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url("../images/colorpicker/colorpicker_overlay.png"); } .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url("../images/colorpicker/colorpicker_select.gif"); margin: -5px 0 0 -5px; } .colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; } .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url("../images/colorpicker/colorpicker_indic.gif") left top; margin: -4px 0 0 0; left: 0px; } .colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; } .colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; } .colorpicker input { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0; height: 11px; } .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url("../images/colorpicker/colorpicker_hex.png") top; left: 212px; top: 142px; } .colorpicker_hex input { right: 6px; } .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } /* RGB */ .colorpicker_rgb_r { background-image: url("../images/colorpicker/colorpicker_rgb_r.png"); top: 52px; left: 212px; } .colorpicker_rgb_g { background-image: url("../images/colorpicker/colorpicker_rgb_g.png"); top: 82px; left: 212px; } .colorpicker_rgb_b { background-image: url("../images/colorpicker/colorpicker_rgb_b.png"); top: 112px; left: 212px; } /* HSB */ .colorpicker_hsb_h { background-image: url("../images/colorpicker/colorpicker_hsb_h.png"); top: 52px; left: 282px; } .colorpicker_hsb_s { background-image: url("../images/colorpicker/colorpicker_hsb_s.png"); top: 82px; left: 282px; } .colorpicker_hsb_b { background-image: url("../images/colorpicker/colorpicker_hsb_b.png"); top:112px; left: 282px; } .colorpicker_submit { position: absolute; width: 22px; height: 22px; background: url("../images/colorpicker/colorpicker_submit.png") top; left: 322px; top: 142px; overflow: hidden; } /* Focus */ .colorpicker_focus { background-position: center; } .colorpicker_hex.colorpicker_focus { background-position: bottom; } .colorpicker_submit.colorpicker_focus { background-position: bottom; } .colorpicker_slider { background-position: bottom; } .color-selector { position:relative; width: 36px; height: 36px; background: url("../images/colorpicker/select2.png"); } .color-selector div { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; background: url("../images/colorpicker/select2.png") center; } /* Forms */ form.standard, .form-standard-wrapper { padding: 15px; } form.standard .layout-block label, .form-standard-wrapper .layout-block label { display: block; } form.standard li.field, .form-standard-wrapper li.field { font-size: 120%; margin-bottom: 0.7em; } form.standard li.full-width textarea, .form-standard-wrapper li.full-width textarea{ height: 100px; width: 99%; } .group-actions { width: 100%; line-height: 22px; padding: 3px 0; } #resend-message { width: 97%; height: 80px; max-height: 300px; } .tag-cloud a{ padding: 3px 10px; font-size: 12px; background: #e1eaea; color: #8ca2a4; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-decoration: none; } .tag-cloud a:hover, .tag-cloud a.active{ background-color: #fdb824; color: white; } ul.help{ padding-top: 85px !important; padding-right: 30px; background: url(../images/icon-alert.png) 160px 10px no-repeat; font-size: 12px; } ul.help li{ padding-left: 21px; background: url(../images/icon-check.png) left 1px no-repeat; line-height: 140%; padding-bottom: 0.75em; color: #333; }