/* Declare Some WebSite Wide Colors */ :root { --mcmeebae-red: #FE0900; --mcmeebae-green: #00FF00; --mcmeebae-blue: #0000FF; } body { font-family: Times New Roman; background-color: #ffffff; color: #0011ff; font-size: 14px; background-image: url(../Images/CONFIG_DEFAULT/MAIN_BODY_BG_IMAGE_PIC_config_default_07Apr2023151105.jpg); background-repeat: no-repeat; background-position: center; background-size: 50%; /* contain cover */ background-attachment: fixed; /* overflow: hidden; */ /* Hide scrollbars - Design: Prevents Jumping On Cube Effects! */ overflow-x: auto; overflow-y: auto; margin-top: 0px; /* Design: There Exists A Browser Default 8px Margin - This removes It From Top - Shows BG Images */ padding: 0px; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/MAIN_BODY_FONT_NORMAL_MOUSE_ICON_PIC_config_default_12Dec2020131358.gif), auto; } .not_being_used_html_body_shadow { padding: 40px; -webkit-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; -moz-box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; box-shadow: inset #19d4ff 0 0 0 5px, inset #18cdf7 0 0 0 1px, inset #53dfff 0 0 0 10px, inset #50d8f7 0 0 0 11px, inset #8ce9ff 0 0 0 16px, inset #88e2f7 0 0 0 17px, inset #c5f4ff 0 0 0 22px, inset #bfecf7 0 0 0 23px; } /* ********************************************* */ /* Layout Divs */ /* ********************************************* */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #fff inset; } select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #fff inset; } ul li { list-style-type: circle; list-style-position: outside; list-style-image: none; } .circle-li { list-style-type: circle; list-style-position: outside; list-style-image: none; } .square-li { color: #0000FF; list-style-type: square; list-style-position: outside; list-style-image: none; } .wrapper { display: block; height: auto; /* 100%; */ width: auto; /* 100%; */ overflow: hidden; /* Hide scrollbars - Design: Prevents Jumping On Cube Effects! */ /* -webkit-transform: translate3d(0, 0, 0); */ /* Design: NO! Font Control Is Not Visible! - Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ position:relative; /* Rounded Corners */ border-radius: 15px; /* All Padding Borders Stay Within Element Dimensions */ box-sizing: border-box; /* No Hignlight - All Browsers */ user-select: none; } /* Detects Small Screen iPone, Android - max-device-width PC/Laptop Small Browser - max-width */ @media (max-device-width: 640px), (max-width: 640px) { /* Small Screen Detected: Maybe iPone, Andriod, Also Works In Small Browser Window */ .wrapper { /* Flex Container Properties */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -moz-box; display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ overflow-x: auto; overflow-y: auto; z-index: 1; /* background-color: #FF0000; */ /* Change Flex Box Direction For Main Content Container DIV */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; /* ????? vertical */ -moz-box-direction: normal; /* ????? vertical */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-wrap: wrap; flex-flow: column wrap; } } wrapper2 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .main-title { color: #0909ec; font-weight: bold; font-family: Georgia, serif; width:100%; height:auto; background:transparent; align-self: center align-items: center; justify-content:center; text-align: center; } /* --------------- SITE HEADER CSS ----------- */ .site_header { background-color: #ffffff; display: flex; /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: nowrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; margin: 0px; padding: 0px; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > lhs_header { background-color: #ffffff; display:flex; /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Child Order */ -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: column; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > center_header { background-color: #ffffff; display: flex; width: 63%; margin: 0px; padding: 0px; /* Flex Child Order */ -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: row; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > rhs_header { background-color: #ffffff; display:flex; /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* flex Child Order */ -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: column; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > center_header > lhs_center_header { background-color: #ffffff; display: flex; width: auto; /* 15%; */ /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Child Order */ -webkit-box-ordinal-group:4; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */ -ms-flex-order: 4; /* TWEENER - IE 10 */ -webkit-order: 4; /* NEW - Chrome */ order: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: row; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > center_header > center_center_header { background-color: #ffffff; display: flex; width: 70%; margin: 0px; padding: 10px; /* Item Flex Properties */ -webkit-box-flex: 1 2 auto; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1 2 auto; /* OLD - Firefox 19- */ -webkit-flex: 1 2 auto; /* Chrome */ -ms-flex: 1 2 auto; /* IE 10 */ flex: 1 2 auto; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ /* Flex Child Order */ -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */ -ms-flex-order: 5; /* TWEENER - IE 10 */ -webkit-order: 5; /* NEW - Chrome */ order: 5; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: column; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } .site_header > center_header > rhs_center_header { background-color: #ffffff; display: flex; width: auto; /* 15%; */ /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Child Order */ -webkit-box-ordinal-group: 6; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 6; /* OLD - Firefox 19- */ -ms-flex-order: 6; /* TWEENER - IE 10 */ -webkit-order: 6; /* NEW - Chrome */ order: 6; /* NEW, Spec - Opera 12.1, Firefox 20+ */ flex-direction: row; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; z-index: 1; align: center; vertical-align: middle; text-align: center; } /* --------------------------------------------------------------------------------------- */ /* Too narrow to support three columns */ /* See Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries */ @media (max-device-width: 640px), (max-width: 640px) { .site_header { /* Flex Direction */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: vertical; /* normal Or vertical???? */ -moz-box-direction: vertical; /* normal Or vertical???? */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; flex-wrap: wrap; flex-flow: column wrap; min-height: 380px; max-height: 600px; } .site_header > center_header { /* Column Position 1 */ /* Flex Positioning Order 1 : Column Mode */ -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* width: 100%; */ /* min-width:400px; */ width: 80%; min-height: 80px; max-height: 200px; background-color: red; } .site_header > lhs_header { /* Column Position 2: MediaDB & Catergories */ /* Flex Positioning Order 2 : Column Mode */ -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; /* min-height: 130px; *? /* max-height: 200px; */ background-color: pink; } .site_header > rhs_header { /* Column Position 3: Utilities */ /* Flex Positioning Order 3 : Column Mode */ -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; /* min-height: 160px; */ /* max-height: 200px; */ /* Design: Seems To Size To Max Height Always? Ipone & Small Laptop Screen */ background-color: #0000FF; } .site_header > lhs_header, .site_header > rhs_header, .site_header > center_header { } } /* --------------- CONTROLS BAR CSS ----------- */ .controls_bar { /* CONTROLS BAR CONTAINER */ background-color: #ffffff; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ flex-wrap: wrap; flex-flow: row wrap; justify-content: center; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ box-sizing: border-box; } .controls_bar > lhs_bar { background-color: #000000; border: 5px solid #000000; display: flex; flex-direction: column; flex-wrap: nowrap; align-self: center; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ align: center; text-align: center; vertical-align: middle; /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1; /* Chrome */ -ms-flex: 1 1 ; /* IE 10 */ flex: 1 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Positioning Order 1 == left (inline) */ -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ border-radius: 15px; box-sizing: border-box; } .controls_bar > center_bar { width: 63%; /* Stops Older Browsers Collapsing */ /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1 63%; /* Chrome */ -ms-flex: 1 1 63%; /* IE 10 */ flex: 1 1 63%; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ flex-wrap: wrap; flex-flow: row wrap; justify-content: center; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ /* Flex Positioning Order 2 == middle (inline) */ -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ border-radius: 15px; box-sizing: border-box; } .controls_bar > rhs_bar { background-color: #000000; border: 5px solid #000000; display: flex; width: 16%; /* Stops Older Browsers Collapsing */ flex-direction: row; flex-wrap: nowrap; align-self: center; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: space-around; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ align: center; text-align: center; vertical-align: middle; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1; /* Chrome */ -ms-flex: 1 1 ; /* IE 10 */ flex: 1 1; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ /* Flex Positioning Order 3 == right (inline) */ -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ border-radius: 15px; box-sizing: border-box; } .collumn_headings_LHS_RHS { color: #ffffff; background-color: #0a2ee6; font-family: Tahoma, Geneva, sans-serif; border: 2px solid #ffffff; display: flex; flex-direction: row; flex-wrap: nowrap; align-self: center; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ font-weight: bold; vertical-align: middle; align: center; text-align: center; margin: 3px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; } /* Too narrow to support three columns */ /* See Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries */ @media (max-device-width: 640px), (max-width: 640px) { .controls_bar { /* Flex Direction */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; /* ????? vertical? */ -moz-box-direction: normal; /* ????? vertical? */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; flex-wrap: wrap; flex-flow: column wrap; /* min-height: 220px; */ /* max-height: 420px; */ } .controls_bar > center_bar { /* Column Position 4 */ /* Flex Positioning Order 4 : Column Mode */ -webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 4; /* OLD - Firefox 19- */ -ms-flex-order: 4; /* TWEENER - IE 10 */ -webkit-order: 4; /* NEW - Chrome */ order: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; z-index: 1; /* min-height: 160px; */ /* max-height: 300px; */ background-color: pink; } .controls_bar > lhs_bar { /* Column Position 5: Num Catergories & Items */ /* Flex Positioning Order 5 : Column Mode */ -webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 5; /* OLD - Firefox 19- */ -ms-flex-order: 5; /* TWEENER - IE 10 */ -webkit-order: 5; /* NEW - Chrome */ order: 5; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; z-index: 1; /* min-height: 30px; */ /*max-height: 60px; */ background-color: yellow; } .controls_bar > rhs_bar { /* Column Position 6: User */ /* Flex Positioning Order 6 : Column Mode */ -webkit-box-ordinal-group: 6; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 6; /* OLD - Firefox 19- */ -ms-flex-order: 6; /* TWEENER - IE 10 */ -webkit-order: 6; /* NEW - Chrome */ order: 6; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; z-index: 1; /* min-height: 30px; */ /* max-height: 60px; */ /* Design: Seems To Size To Max Height Always? Ipone & Small Laptop Screen */ background-color: aqua; } .controls_bar > lhs_bar, .controls_bar > rhs_bar, .controls_bar > center_bar { /* min-height: 20px; */ /* max-height: 800px; */ } } /* -------------------------------------------------------------------------------------------- end controls bar ------ */ .dynamic_banner { display: flex; width: 100%; height: 100%; margin: auto; border: 5px solid #666666; padding: 5px; min-height: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; box-sizing: border-box; } .static_banner { display: flex; width: 100%; height: 100%; margin: none; flex-direction: column; flex-wrap: nowrap; align-self: stretch; /* Stretches The Element Vertically */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .email_address { font-family: Times Roman; font-weight: bold; color: #3700ff; /*Background Opacity */ background: rgba(255, 255, 255, 0.7 ); /* RGBa with % opacity */ background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */ display: flex; /* inline-block; */ width: auto; margin: auto; padding:5px; align: center; text-align: center; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; /* Highlight On Enabling User To Highlight & Copy Email Address */ -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; border-radius: 15px; } .header_metachars { font-family: Arial Black, Gadget, sans-serif; font-weight: normal; color: #2a0ff5; background-color: #b2cc1e; display: flex; width: auto; /* margin: auto; */ padding:5px; align: center; text-align: center; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; /* Highlight On Enabling User To Highlight & Copy Metachars */ -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; border-radius: 15px; } .header_refresh_div { display: flex; text-align:center; align-self:center; align-items:center; justify-content:center; width: auto; margin: auto; padding:5px; align: center; text-align: center; /* Highlight On Enabling User To Highlight & Copy Metachars */ -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; border-radius: 15px; } .header_useragent { /* font-size: 12px; */ font-weight: bold; background: transparent; margin: auto; display: block; width: auto; align: center; text-align: center; padding-top: 5px; padding-bottom: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; /* Highlight On Enabling User To Highlight & Copy Email Address */ -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; /* -khtml-user-select: text; */ user-select: text; } .filetypes_display { display:flex; flex-direction: column; flex-wrap: nowrap; align-self: center; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; } /* ----------------------------------------------------------------------------------- end header css */ /* RollOver Anchor Link */ .rollover_link { align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rollover_link:hover { color: #0000ff; font-weight: bold; } .red_rollover_link { color: #ffffff; background-color: #ff0000; align: center; font-weight: bold; font-family: Times New Roman; padding-left: 10px; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; border: 3px solid #ff8000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .red_rollover_link:hover { color: #ff0000; background-color: #ffffff; border: 3px solid #ff0000; } /* ------------------------ Items Main Content ---------------------------------------------- */ .main_content { margin: 0px; padding: 0px; /*width: 100%; */ /* Prevents Older Non Flex Browsers From Collapsing */ /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: center; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ /* align-items: center; */ /* Design: NO!!! Centers Headlines & navBar items */ /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_content > headlines { background-color: #ffffff; position: relative; left: 0%; z-index: 1; display: block; overflow-x: auto; overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1; /* Chrome */ -ms-flex: 1 1; /* IE 10 */ flex: 1 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Child Order */ -webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ -ms-flex-order: 1; /* TWEENER - IE 10 */ -webkit-order: 1; /* NEW - Chrome */ order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* --------------------------------------------------------------------- */ /* Sliding Panels */ .slide-up, .slide-down { max-height: 0; overflow-y: hidden; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .slide-down { max-height: 300px; } .slide-in, .slide-out { max-width: 20px; border: 10px solid #000000; overflow-x: auto; -webkit-transition: max-width 1s ease-in-out; -moz-transition: max-width 1s ease-in-out; -o-transition: max-width 1s ease-in-out; transition: max-width 1s ease-in-out; } .slide-out { max-width: 25%; border: 10px solid #000000; padding-left: 10px; padding-right: 10px; } .main_content > navBar{ background-color: #ffffff; z-index: 1; overflow-X: auto; overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ align: center; vertical-align: middle; text-align: center; display: flex; /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1; /* Chrome */ -ms-flex: 1 1; /* IE 10 */ flex: 1 1; /* flex Child Order */ -webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ -ms-flex-order: 3; /* TWEENER - IE 10 */ -webkit-order: 3; /* NEW - Chrome */ order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* Flex Direction */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: vertical; /* normal Or vertical???? */ -moz-box-direction: vertical; /* normal Or vertical???? */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-wrap: nowrap; /* flex-flow: row wrap; */ /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: flex-start; /* flex: JUSTIFY === Main Axis - Vertical Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* navBar Main Axis === column - Cross Axis - Therefore This Controls Horizontal Position - Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ /* align-content: center; */ /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_content > content { background-color: #ffffff; width: 63%; margin: 0px; padding: 0px; /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1 63%; /* Chrome */ -ms-flex: 1 1 63%; /* IE 10 */ flex: 1 1 63%; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ /* Flex Child Order */ -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-background-size: 100% 100%; /* cover, contain, 100% 100%, */ -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.5s; /* Safari 3.1 to 6.0 */ transition: width 0.5s ease-in-out; } .main_content > content_inner { /* Item Flex Properties */ -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1 1 100%; /* Chrome */ -ms-flex: 1 1 100%; /* IE 10 */ flex: 1 1 100%; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ /* Flex Child Order */ -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.5s; transition: width 0.5s ease-in-out; } /* Too narrow to support three columns - Not Working For Smart Phone Screen Size > 640px? */ /* Detects Small Screen iPone, Android - max-device-width PC/Laptop Small Browser - max-width */ @media (max-device-width: 640px), (max-width: 640px) { /* Small Screen Detected: Maybe iPone, Andriod, Also Works In Small Browser Window */ .main_content { display: flex; /* Change Flex Box Direction For Main Content Container DIV */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: vertical; /* ????? vertical */ -moz-box-direction: vertical; /* ????? vertical */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-wrap: wrap; flex-flow: column wrap; z-index: 1; /* min-height: 1350px; */ /* max-height: 1600px; */ /* min-width: 200px; */ /* max-width: 400px; */ justify-content: center; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ } .main_content > headlines { /* Column Position 7: Media */ /* flex Child Order */ -webkit-box-ordinal-group: 7; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 7; /* OLD - Firefox 19- */ -ms-flex-order: 7; /* TWEENER - IE 10 */ -webkit-order: 7; /* NEW - Chrome */ order: 7; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; height: auto; z-index: 1; /* min-height: 400px; */ /* max-height: 400px; */ /* min-width: 200px; */ /* max-width: 400px; */ background-color: green; } .main_content > content { /* Column Position 8 : Items */ /* flex Child Order */ -webkit-box-ordinal-group: 8; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 8; /* OLD - Firefox 19- */ -ms-flex-order: 8; /* TWEENER - IE 10 */ -webkit-order: 8; /* NEW - Chrome */ order: 8; /* NEW, Spec - Opera 12.1, Firefox 20+ */ display: flex; width: auto; height: auto; z-index: 1; /* min-height: 200px; */ /* max-height: 200px; */ /* min-width: 200px; */ /* max-width: 400px; */ background-color: orange; } .main_content > content > items_container { /* Column Position 9 : Items */ display: flex; /* flex Child Order */ -webkit-box-ordinal-group: 9; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 9; /* OLD - Firefox 19- */ -ms-flex-order: 9; /* TWEENER - IE 10 */ -webkit-order: 9; /* NEW - Chrome */ order: 9; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: auto; height: auto; z-index: 1; min-height: 1024px; /* max-height: 200px; */ /* min-width: 200px; */ /* max-width: 400px; */ } .main_content > navBar { /* Column Position 10 : navBar */ /* Flex Child Order */ -webkit-box-ordinal-group: 10; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 10; /* OLD - Firefox 19- */ -ms-flex-order: 10; /* TWEENER - IE 10 */ -webkit-order: 10; /* NEW - Chrome */ order: 10; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 80%; z-index: 1; display: flex; /* min-height: 150px; */ /* max-height: 200px; */ /* min-width: 200px; */ /* max-width: 400px; */ background-color: #FFFF00; } } .feature{ font-weight: bold; text-align: center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; background-origin: content-box; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ----------- Items FlexBox Container ------------------------------ */ .main_content > content > items_container { background-color: #ffffff; height: 1000px; /* Design: This Of Course Is Continually Updated Thru JS Code! */ overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* WORKING NICE IN Chrome NOT iPhone !! flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: flex-start; /* Flex: Vertical Child Alignment: Makes Items Same Size align-items: flex-start | flex-end | center | baseline | stretch */ align-content: flex-start; /* Flex: Vertical Line Placement : Always Place Lines At TOP align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_content > content > items_container_editmode { background-color: #FF0000; background-image: url(../Images/WebSite_Static/EditWatermark_Grey.jpg); background-repeat: repeat; height: 1000px; /* Design: This Of Course Is Continually Updated Thru JS Code! */ overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* WORKING NICE IN Chrome NOT iPhone !! flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: flex-start; /* Flex: Vertical Child Alignment: Makes Items Same Size align-items: flex-start | flex-end | center | baseline | stretch */ align-content: flex-start; /* Flex: Vertical Line Placement : Always Place Lines At TOP align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_content > content > peoples_container { background-color: #381d9a; height: 1000px; /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* WORKING NICE IN Chrome NOT iPhone !! flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: flex-start; /* Flex: Vertical Child Alignment: Makes Items Same Size align-items: flex-start | flex-end | center | baseline | stretch */ align-content: flex-start; /* Flex: Vertical Line Placement : Always Place Lines At TOP align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */ border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_content > content> items_container > item_flex { background-color: #ffffff; color: #0011ff; font-weight: bold; display: block; vertical-align: middle; border: 3px solid #666666; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 2 1; /* Chrome */ -ms-flex: 2 1; /* IE 10 */ flex: 2 1; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ border-radius: 15px; } .customer_form { overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ margin-bottom: 20px; background-color: #ffffff; border: 10px solid #002aff; box-sizing: border-box; /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* WORKING NICE IN Chrome NOT iPhone !! flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: flex-start; /* Flex: Vertical Child Alignment: Makes Items Same Size align-items: flex-start | flex-end | center | baseline | stretch */ align-content: flex-start; /* Flex: Vertical Line Placement : Always Place Lines At TOP align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* MEDIA - WAS HERE 2022 */ /* ************** Intra Item Font Classed ************* */ .item_default_font { color: #000000; font-weight: normal; font-family: Times Roman; } .item_title_font { color: #1e00ff; font-weight: bold; font-family: Comic Sans MS, cursive; } .item_metachars_font { color: #880707; font-weight: normal; font-family: Bookman, URW Bookman L, serif; } .item_stockqnty_font { color: #06f90e; font-weight: bold; font-family: Trebuchet MS, Helvetica, sans-serif; } .item_price_font { color: #0d0d0d; font-weight: normal; font-family: Arial Black, Gadget, sans-serif; } .item_shipping_font { color: #ff0000; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; } /* For AddToCart Font See addtocart Class */ /************* #siteInfo styles ***************/ #siteInfo{ clear: both; border: 0px solid #121212; font-size: 75%; color: #cccccc; } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /* ====================================================================== */ .items_img { border: 3px; border-style: solid; border-color: #ffffff; background-color: #000000; padding: 5px; border-radius: 15px; } .items_img_selected { border: 3px; border-style: solid; /* dotted, dashed, double, groove, inset, outset, ridge */ border-color: #00ff08; background-color: #00ff08; padding: 5px; border-radius: 15px; } /* PIC */ .pic { overflow: hidden; -webkit-box-shadow: 2px 2px 2px #111; box-shadow: 2px 2px 2px #111; border-radius: 15px; } .pic:hover { cursor: pointer; border: 2px solid black; border-radius: 15px; } /* The transition-timing-function property can have the following values: */ /* ======================================================================== */ /* ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) */ /* linear - specifies a transition effect with the same speed from start to end */ /* ease-in - specifies a transition effect with a slow start */ /* ease-out - specifies a transition effect with a slow end */ /* ease-in-out - specifies a transition effect with a slow start and end */ /* cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function */ /* Zoom MouseOver Effect */ .edit-mode-noeffects img img { width: 100%; height:100%; margin-left: 0px; margin-top: 0px; } .zoom-effect img { width: 100%; height:100%; margin-left: 0px; margin-top: 0px; -webkit-transition: all 1s ease; /* Design: ToDo - all === CPU Intensive - Investigate - Change */ -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .zoom-effect img:hover { width: 150%; height: 150%; margin-left: -25%; margin-top: -25%; /* border: 4px solid red; */ } /* Brighten MouseOver Effect */ .brighten-effect img { cursor: pointer; border: 2px solid black; border-radius: 15px; -webkit-filter: brightness(90%); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -ms-transition: all 1s ease-out; transition: all 1s ease-out; } .brighten-effect img:hover { cursor: pointer; border: 2px solid black; border-radius: 15px; -webkit-filter: brightness(100%); } /* Tilt MouseOver Effect */ .tilt-effect { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .tilt-effect:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } /* Spin To Circle MouseOver Effect */ .spin-effect { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .spin-effect:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } /* Focus MouseOver Effect */ .focus-effect { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .focus-effect:hover { border: 2px solid #FFFFFF; border-radius: 50%; } /* Blur MouseOver Effect */ .blur-effect img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .blur-effect img:hover { -webkit-filter: blur(5px); } /* Black And White MouseOver Effect */ .black-white-effect { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .black-white-effect:hover { -webkit-filter: grayscale(100%); } h1{ font-family: Verdana, Arial, sans-serif; font-size: 30px; font-weight: bold; } h2{ font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 18pt; margin: 0px; padding: 0px; background-position: center center; font-style: normal; line-height: normal; font-weight: bold; font-variant: small-caps; text-transform: none; text-decoration: underline; text-align: center; } h3{ font-family: Hobo Std, Georgia; font-size: 20px; font-weight: bold; font-variant: small-caps; text-transform: none; text-decoration: underline; } h4{ font-family: Arial; font-size: 16px; font-weight: bold; } h5{ font-family: "Courier New", Courier; font-size: 12px; font-weight: bold; font-variant: small-caps; text-transform: none; } .text-arial-12px-main-body-color { font-family: Arial; color: #0011ff; font-sise: 12px; border-radius: 15px; border: 2px solid #666666; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .image_support_heading { font-family: Arial; font-size: 42px; font-weight: bold; color:#FFFFFF; } .alt_color { font-family: Arial; font-size: 14px; font-weight: bold; color: #FF0000; border:5px solid #FFFFFF; padding: 5px; border-radius: 15px; border: 2px solid; } table{ font-weight: bold; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .no-rounded-table { border-radius: 0px; moz-border-radius: 0px; webkit-border-radius: 0px; } table td { font-family: "Times New Roman", Times, serif; font-weight: bold; vertical-align: middle; text-align: center; border-radius: 15px; } select { background-color: #ffffff; color: #0011ff; font-family: Times Roman; font-weight: bold; border-radius: 15px; border: 2px solid; } optgroup { font-size: 30px; } option { font-size: 30px; } textarea { border-radius: 15px; border: 2px solid; } #web-buttons-form a{ color:transparent; background: transparent; background-repeat: no-repeat; } #web-buttons-form a:hover{ background-position:left bottom; } #web-buttons-form2 a{ /* display:block; */ color:transparent; background-color: #00FF00; background-repeat: no-repeat; } #web-buttons-form2 a:hover{ background-position:left bottom; } a#web-buttons-form2 { display:none; } .web-buttons-class a{ color:transparent; background: transparent; background-repeat: no-repeat; } .web-buttons-class a:hover{ background-position:left bottom; } .img_upload_info { position:absolute; display:none; width: auto; height: auto; background-color: #FFFFFF; color: #000000; padding-left: 10px; padding-right: 10px; text-align: center; overflow: auto; overflow-wrap: break-word; word-break: break-all; } .error_table { background-color: #FF0000; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: bold; color: #FFFFFF; border: 5px solid #000000; } .errormsg { color: #000000; background-color: #FF0000; border: 5px solid #FFFFFF; text-align: center; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-style: normal; line-height: normal; font-weight: bold; padding:5px; display: inline-block; align: center; width: 70%; border-radius: 15px; } .search_datalist { position: absolute; height: auto; max-height: 600px; /* OverWritten In JS */ color: #000000; /*Background Opacity */ background: rgba(0, 0, 0, 0.3 ); /* RGBa with % opacity */ background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */ border: 3px solid #ffffff; overflow-x: auto; overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; box-sizing: border-box; border-radius: 15px; } .background_opaque { background-color: #000000; opacity:0.8; color: #FFFFFF; padding-left: 15px; padding-right: 15px; border-radius: 15px; } .group_outer_management { /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* WORKING NICE IN Chrome NOT iPhone !! flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: flex-start; /* Flex: Vertical Child Alignment: Makes Items Same Size align-items: flex-start | flex-end | center | baseline | stretch */ align-content: flex-start; /* Flex: Vertical Line Placement : Always Place Lines At TOP align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */ box-sizing: border-box; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .group_inner_management { /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: center; vertical-align: middle; align: center; align-self:center; align-items:center; justify-content:center; position: relative; width:auto; background: transparent; box-sizing: border-box; border-radius: 15px; } .group_table { display: inline-block; width: 100%; height: auto; overflow-y: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ margin-bottom: 20px; align-self: center; align: center; text-align: center; vertical-align: middle; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; color: #008000; background-color: #ffffff; border: 10px solid #002aff; box-sizing: border-box; border-radius: 15px; } .blackbox { background-color: #000000; text-align: center; vertical-align: middle; height: auto; border: thick none #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; line-height: normal; font-weight: bold; color: #FFFFFF; background-attachment: fixed; background-position: center center; cursor: Investigate These Orders And Delete Duplicates!; cursor: text; } /* ------------------- Cart Totals - Items Price ------------------------- */ .totals_label { color: #2f3232; font-family: Arial Black, Gadget, sans-serif; background: transparent; font-weight: bold; text-align: center; } .total_items_price { color: #2f3232; font-family: Arial Black, Gadget, sans-serif; background-color: #fffafa; width: auto; text-align: center; font-weight: bold; } /* Customer Form -------------------------------------------------- */ .people_form_heading { color: #0400ff; font-weight: bold; } f .people-savechanges-stmt { color: #f5ed00; padding-left:10px; padding-right:10px; font-weight: bold; } .people-presstobuy-stmt { color: #f31233; padding-left:10px; padding-right:10px; font-weight: bold; } .customer_position { color: #000000; border-color: #a9a9b1; font-weight: bold; z-index: 1; } .customer_position span{ background-color: #000000; opacity:0.7; color: #FFFFFF; padding-left: 0px; padding-right: 0px; font-weight: bold; border-radius: 15px; } .members_select { background-color: #002aff; color: #ffffff; height: 100%; float: left; /* To Align With Elements Label */ vertical-align: bottom; display: inline-block; font-weight: bold; } .people_mandatory_input { background-color: #00fa32; color: #000000; height: 100%; float: left; /* To Align With Elements Label */ vertical-align: bottom; display: inline-block; font-weight: bold; } .people_optional_input { background-color: #fff700; color: #145204; height: 100%; float: left; /* To Align With Elements Label */ vertical-align: bottom; display: inline-block; font-weight: bold; } .people_choosefile { background-color: #0000FF; color: #FFFFFF; border: 3px solid #FFFFFF; font-family: Times Roman; font-weight: bold; padding: 5px; overflow: hidden; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; } .group_input { background-color: #ffffff; color: #008000; font-weight: bold; } .ship_heading { color: #4b1aff; padding-left:10px; padding-right:10px; margin-bottom:20px; font-weight: bold; } /*----------------- Category Names --------------------------------*/ .category_link { /*Design: Note - 'category_link' Class Used To Identify Drop Sources */ cursor: url(../Images/CONFIG_DEFAULT/CATEGORIES_MOUSE_ICON_PIC_config_default_12Dec2020125152.gif), auto; border-radius: 15px; display: inline-block; } .normal_category { color: #3c602e; font-weight: bold; font-family: Times Roman; text-decoration: none; border-radius: 15px; display: inline-block; } .normal_category:hover { color: #04f64c; } .normal_category:active { color: #666666; } .selected_category { color: #04f64c; font-weight: bold; font-family: Times Roman; text-decoration: none; border-radius: 15px; display: inline-block; } .selected_category:hover { text-decoration: italics; } .selected_category:active { color: #666666; } .private_category { color: #ff0000; font-weight: bold; font-family: Times Roman; text-decoration: none; border-radius: 15px; display: inline-block; } .private_category:hover { color: #04f64c; } .private_category:active { color: #666666; } .category_digits { color: #080808; font-weight: bold; font-family: Times Roman; text-decoration: none; display: inline-block; } .category_digits:hover { font-weight: bold; } .category_digits:active { color: #666666; } /* ------------------------------------------------------------------------------ */ .normal_category_fullscreen { color: #022af2; font-weight: bold; font-family: Serif; text-decoration: none; display: inline-block; } .normal_category_fullscreen:hover { color: #02f232; } .normal_category_fullscreen:active { color: #666666; } .selected_category_fullscreen { color: #02f232; font-weight: bold; font-family: Serif; text-decoration: none; display: inline-block; } .selected_category_fullscreen:hover { text-decoration: italics; } .selected_category_fullscreen:active { color: #666666; } .private_category_fullscreen { color: #f6ee09; font-weight: bold; font-family: Serif; text-decoration: none; display: inline-block; } .private_category_fullscreen:hover { color: #02f232; } .private_category_fullscreen:active { color: #666666; } .category_digits_fullscreen { color: #f2f2f2; font-weight: bold; font-family: Times Roman; text-decoration: none; display: inline-block; } .category_digits_fullscreen:hover { font-weight: bold; } .category_digits_fullscreen:active { color: #666666; } /* ------------------------------------------------------------------------------ */ .contextmenu_link { color: #000000; background-color: #FFFFFF; line-height: 20px; font-weight: bold; font-size: 12px; cursor: url(../Images/CONFIG_DEFAULT/CATEGORIES_MOUSE_ICON_PIC_config_default_12Dec2020125152.gif), auto; } .contextmenu_link:hover { color: #FFFFFF; background-color: #ABABAB; text-decoration: underline; font-weight: bold; /* opacity: 2.0; */ cursor: url(../Images/CONFIG_DEFAULT/CATEGORIES_MOUSE_ICON_PIC_config_default_12Dec2020125152.gif), auto; } .contextmenu_link:active { opacity: 0.4; color: #000000; background: transparent; cursor: wait; } /* --------------------------------------------------------------------------------- */ .slideshow_ctrls { color: #ffffff; background-color: #121212; border: 1px solid #ffffff; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border-radius: 15px; /* No Hignlight - All Browsers */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slideshow_ctrls:hover { color: #FF8000; border: 1px solid #FF8000; } .slideshow_ctrls:active { color: #000000; border: 1px solid #000000; } /* ------------- Main Buttons Classes --------------- */ .text-buttons-right { color: #571edc; background-color: #fcfdfd; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border: 2px solid #0f0f0f; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons-right:hover { color: #12f202; border: 2px solid #092fec; background-color: #fcfcfc; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons-right:active { color: #000000; border: 2px solid #00ff00; background-color: #10cb48; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons { position: relative; color: #571edc; background-color: #fcfdfd; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border: 2px solid #0f0f0f; border-radius: 15px; box-shadow: 10px 10px 10px #111000; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons:hover { color: #12f202; border: 2px solid #092fec; background-color: #fcfcfc; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons:active { color: #000000; border: 2px solid #00ff00; background-color: #10cb48; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } /* -------------- Main Item People Groups Tab ---------------------- */ .main-tabs { position: relative; color: #410ac2; background-color: #ffffff; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; width: 20%; border-top: 2px solid #0f0f0f; border-left: 2px solid #0f0f0f; border-right: 2px solid #0f0f0f; border-bottom: 5px solid #0f0f0f; border-radius: 10px 10px 0px 0px; /* LHTop RHTop RHBottom LHBottom */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .main-tabs:hover { color: #ff0000; border-color: #092fec; background-color: #fcfcfc; } .main-tabs:active { color: #f5f5f5; background-color: #4000d6; border-color: #fafafa; } .main-tabs-active { position: relative; color: #f5f5f5; background-color: #4000d6; width: 20%; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border-top: 2px solid #fafafa; border-left: 2px solid #fafafa; border-right: 2px solid #fafafa; border-bottom: 5px solid #fafafa; border-radius: 10px 10px 0px 0px; /* LHTop RHTop RHBottom LHBottom */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .main-tabs-active:hover { color: #ff0000; border-color: #092fec; background-color: #fcfcfc; } /* ---------------------------------------------------------------------------------- */ .addtocart { display: block; position: relative; color: #ffc800; font-family: Optima, sans-serif; font-weight: bold; background: transparent; text-decoration: underline; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .addtocart:hover { color: #666666; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .green-text-buttons { color: #000000; background-color: #00FF00; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border: 2px solid #000000; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .green-text-buttons:hover { color: #FFFFFF; border: 2px solid #FFFFFF; background-color: #00FF00; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .green-text-buttons:active { color: #666666; border: 2px solid #666666; background-color: #FFFFFF; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .red-text-buttons { color: #FFFFFF; background-color: #FF0000; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; margin: 1px; border: 2px solid #FFFFFF; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .red-text-buttons:hover { color: #000000; border: 2px solid #000000; background-color: #FFFFFF; /* darker red */ cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .red-text-buttons:active { color: #000000; border: 2px solid #000000; background-color: #FFFFFF; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .white-text-buttons { color: #0000FF; background-color: #FFFFFF; font-weight: bold; font-family: arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; margin: 1px; border: 2px solid #0000FF; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .white-text-buttons:hover { color: #FFFFFF; border: 2px solid #FFFFFF; background-color: #666666; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .white-text-buttons:active { color: #FFFFFF; border: 2px solid #FFFFFF; background-color: #666666; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .text-buttons-disabled { color: #000000; opacity: 0.3; background-color: #666666; font-weight: bold; font-family: Arial; vertical-align: middle; text-align: center; padding-left: 10px; padding-right: 10px; border: 2px solid #000000; border-radius: 15px; cursor: url(../Images/CONFIG_DEFAULT/BUTTONS_MOUSE_ICON_PIC_config_default_12Dec2020130610.gif), auto; } .cart_item_row { align:center; text-align:center; vertical-align:middle; } /* ----------------- Sizable Fonts ----------------------------------------- */ .half-font { /* Dummy Class - 0.5 Smaller */ } .pointsixtwo-font { /* Dummy Class - 0.62 Smaller */ } .smaller-font { /* Dummy Class - 0.75 Smaller */ } .slightlyLarger-font { /* Dummy Class - 1.2 Times larger */ } .largerFont-font{ /* Dummy Class - 1.5 Times larger */ } .double-font { /* Dummy Class - 2 Times Larger */ } .double-font-transparent { /* Dummy Class */ } .triple-font { /* Dummy Class - 3 Times Larger */ } .quad-font { /* Dummy Class - 4 Times Larger */ } .sizable-text { --sizable-text: 18px; font-size: var(--sizable-text); } .item_details_title_bar { display: inline-block; color: #FFFFFF; background-color: #000000; font-family: Times Roman; font-weight: bold; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin: 1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #666666; border-radius: 15px; } /* ------------------------------------------------------------- */ .cart_title { color: #d411b1; font-family: Tahoma, Geneva, sans-serif; text-decoration: none; text-decoration-color: #c0c0c0; font-weight: bold; } .cart_metachars { color: #5c634b; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; } .cart_price { color: #363032; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; } .quantity { color: #c0c0c0; font-weight:bold; text-align:center; } .cart_sub_totals { color: #252224; font-weight:bold; text-align:center; } .cart-additional-video { background-color: transparent; border: 5px solid #000000; max-width: 90%; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Display Classes */ .display_items_table { background-color: transparent; background-attachment: scroll; align: center; vertical-align: top; text-align: center; border-radius: 15px; } .display_items_table a{ color: #FFFFFF; text-decoration: none; background-attachment: scroll; } /* LOGIN FORM */ .display_items_table2 { width: 25%; } .login_form { letter-spacing:0px; font-family: Arial; font-weight:bold; width: 200px; align: center; vertical-align: middle; text-align: center; border-radius: 15px; } .input1 { color: #ffffff; border: 3px solid #ffffff; background-color: #000000; align-self: center; align: center; vertical-align: middle; text-align: center; z-index:1; font-family: Arial; font-weight:bold; background-repeat: no-repeat; display: inline-block; margin: 10px; padding: 10px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; text-align: center; letter-spacing:0px; border-radius: 5px; } /* Configuration Form */ .config_select { background-color: #ffffff; color: #0011ff; font-family: Times Roman; border: 2px solid #0011ff; font-weight: bold; text-align: center; padding-left: 40px; } .outer_config_form { color: #0011ff; /*Background Opacity */ background: rgba(255, 255, 255, 0.8 ); /* RGBa with % opacity */ background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */ width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 17; /* Highest So Far - Error Divs Will Have To Go Above This - Spinners Too! - Check LocalCast (CSS) IT Has Infinity Heighest!! */ position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .config_heading { color: #0c1be9; background: rgb(255, 255, 255); display: block; /* position:relative; */ align:center; text-align:center; vertical-align:top; width:auto; height:auto; /* margin:10px; */ padding: 10px; font-weight:bold; border-radius: 15px; border: 3px solid #0c1be9; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_subgroup_fieldsets { color: #0011ff; /*Background Opacity */ background: rgba(255, 255, 255, 0.8 ); /* RGBa with % opacity */ background: rgb(255, 255, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */ display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_subgroup_legends { color: #ffffff; /* Swap Colors */ background-color: #0011ff; padding:5px; vertical-align:middle; text-align:center; font-weight:bold; border: 2px inset #ffffff; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_normal_fieldsets { color: #0011ff; background-color: #ffffff; display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_normal_legends { color: #0011ff; background-color: #ffffff; padding:5px; vertical-align:middle; text-align:center; font-weight:bold; border: 2px inset #0011ff; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_color_fieldset { display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_sizablefont_fieldset { background: rgb(179, 77, 77); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_fontweight_fieldset { background: rgb(0, 128, 255); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_fontfamily_fieldset { background: rgb(255, 128, 0); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_displayhide_fieldset { background: rgb(255, 0, 0); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_redcomponent_fieldset { background: rgb(255, 0, 0); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_greencomponent_fieldset { background: rgb(0, 255, 0); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_bluecomponent_fieldset { background: rgb(0, 0, 255); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_transparency_fieldset { background: transparent; display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_widthheight_fieldset { background: rgb(0, 0, 0); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_use_images_fieldset { background: rgb(0, 250, 233); display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:auto; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_fileupload_image_fieldset { background: rgba(0, 0, 0, 0.8); background: rgb(0, 0, 0) transparent; display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:80%; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_fileupload_audio_fieldset { background: rgba(255, 0, 0, 0.8); background: rgb(255, 0, 0) transparent; display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:80%; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .config_fileupload_video_fieldset { background: rgba(0, 0, 255, 0.8); background: rgb(0, 0, 255) transparent; display:inline-block; position: relative; align:center; text-align:center; vertical-align:top; width:80%; height:auto; margin:10px; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ---------------------------------------------------------------------------------------------- */ .outer_cart_div { /*Background Opacity */ background: rgba(0, 224, 255, 0.8 ); /* RGBa with % opacity */ background: rgb(0, 224, 255) transparent; /* Fallback for web browsers that doesn't support RGBa */ color: #050505; border: 10px solid #e71313; width: 70%; align: center; vertical-align: top; text-align: center; overflow:auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ text-align: center; font-family: Tahoma, Geneva, sans-serif; font-weight:bold; z-index: 17; position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .cart_table { color: #050505; border: 3px solid #2c2b2b; text-align: center; font-family: Tahoma, Geneva, sans-serif; font-weight:bold; background:transparent; width:100%; align:center; } .buttons_controls { border-top: 2px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; border-left: 2px solid #c0c0c0; border-right: 2px solid #c0c0c0; background-color: #011da7; text-align: center; vertical-align: middle; min-height: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ flex-wrap: wrap; flex-flow: row wrap; justify-content: space-evenly; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .buttons_controls:hover { border-top: 2px solid #ffffff; border-bottom: 1px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; background-color: #0000ff; } .multi_edit_controls { border-top: 1px solid #c0c0c0; border-bottom: 0px solid #c0c0c0; border-left: 2px solid #c0c0c0; border-right: 2px solid #c0c0c0; background-color: #1a6100; font-family: Arial; font-weight:bold; text-align: center; vertical-align: middle; /* HEADER CONTAINER */ min-height: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ flex-wrap: wrap; flex-flow: row wrap; justify-content: space-evenly; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .multi_edit_controls:hover { border-top: 1px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; background-color: #168500; } @media (max-device-width: 640px), (max-width: 640px) { .multi_edit_controls { /* Flex Direction */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; /* ????? vertical? */ -moz-box-direction: normal; /* ????? vertical? */ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; flex-wrap: wrap; flex-flow: column wrap; } } /* ----------------- config css -------------------------------------------- */ .config_form { color: #0011ff; background-color: #ffffff; font-family: Arial; font-weight:bold; text-align: center; vertical-align: middle; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 2 1; /* Chrome */ -ms-flex: 2 1; /* IE 10 */ flex: 2 1; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ border: 3px solid #0011ff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .config_form:hover { color: #12f202; background-color: #fcfcfc; } .config_form_element { color: #ffffff; background-color: #0011ff; display: inline-block; font-family: Arial; font-weight:bold; text-align: center; vertical-align: middle; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 2 1; /* Chrome */ -ms-flex: 2 1; /* IE 10 */ flex: 2 1; /* flex: flex-rel-growth flex-rel-shrink basis % px em auto inherit */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .config_form_element:hover { color: #12f202; background-color: #fcfcfc; } /* Config Button Classes */ .config_form_buttons { color: #0011ff; background-color: #ffffff; border: 2px solid #0011ff; font-weight:bold; text-align: center; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin: 1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .config_form_buttons:hover { color: #12f202; background-color: #fcfcfc; border: 2px solid #092fec; } .config_form_buttons_reverse { color: #ffffff; background-color: #0011ff; border: 2px solid #ffffff; font-weight:bold; text-align: center; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin: 1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .config_form_buttons_reverse:hover { color: #fcfcfc; background-color: #12f202; border: 3px solid #fcfcfc; } /* Local Cast Link OR Word Button - - Transparent GB - on === green text off === red text */ .local_cast_on { color: #00FF00; background: transparent; } .local_cast_on:hover { color:#00FF00; } /* selected link */ local_cast_on:active { color: #FF0000; } .local_cast_off { color: #FF0000; background: transparent; } .local_cast_off:hover { color: #FF0000; } .local_cast_off:active { color: #00FF00; } /* General Link OR Word Button - Transparent GB - on === green text off === red text */ .link_button_on { color: #00FF00; opacity: 1; background: transparent; display:flex; vertical-align:middle; text-align:center; font-weight:bold; margin-left:10px; margin-right:10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .link_button_on:hover { color:#00FF00; } /* selected link */ link_button_on:active { color: #FF0000; } .link_button_off { color: #FF0000; opacity: 1; background: transparent; display:flex; vertical-align:middle; text-align:center; font-weight:bold; margin-left:10px; margin-right:10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .link_button_off:hover { color: #FF0000; } .link_button_off:active { color: #00FF00; } .link_button_highlight { color: #FF8000; opacity: 1; background: transparent; display:flex; vertical-align:middle; text-align:center; font-weight:bold; margin-left:10px; margin-right:10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .link_button_disabled { color: #666666; opacity: 0.5; background: transparent; display:flex; vertical-align:middle; text-align:center; font-weight:bold; margin-left:10px; margin-right:10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ************* CSS Rounded DIVs ********************************** */ .rounded { border: 3px solid #FFFFFF; padding: 2px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-largeradius { border: 3px solid #FFFFFF; padding: 5px; margin: 5px; border-radius: 30px; moz-border-radius: 90px; webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-working { border: 2px solid #FFFF00; padding: 2px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-div { background-color: #0a2ee6; color: #ffffff; font-weight: bold; /* vertical-align: middle; */ margin: auto; border: 2px solid; border-radius: 15px; } .rounded-div-itemdisplay { background: #000000; color: #000000; font-weight: bold; /* vertical-align: middle; */ margin: auto; border-radius: 15px; } .rounded-div-itemdisplay-rollover { background-color: #FFFFFF; /* ; */ color: #000000; font-weight: bold; position:absolute; /* vertical-align: middle; */ margin: auto; border-radius: 15px; } .rounded-div-sized { font-weight: bold; vertical-align: middle; border: 2px solid; /* padding: 5px; */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .rounded-corners { border-radius: 15px; background: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-only { border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-div-border-shadow { border-radius: 15px; border: 2px solid #666666; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .font-base { background: transparent; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .localcast-prices { color: #0717f2; background-color: #f1f1f4; border: 3px solid #0717f2; font-family: American Typewriter, serif; font-weight: bold; text-align: center; vertical-align: middle; padding: 5px; margin: 5px; border-radius: 30px; moz-border-radius: 90px; webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .localcast-descriptions { color: #2aac69; /*Background Opacity */ background: rgba(0, 0, 0, 0.5 ); /* RGBa with % opacity */ background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */ border: 2px solid #2aac69; font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: bold; border-radius: 15px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .rounded-div-db { color: #8000ff; background-color: #c0c0c0; border: 3px solid #000000; font-family: Times Roman; font-weight: bold; width: 90%; margin-left: 5px; margin-right: 5px; padding: 2px; align: center; text-align:center; vertical-align: middle; display: block; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; border-radius: 15px; } .databases-word-banner { color: #000000; font-family: Impact, fantasy; font-weight: lighter; border: 5px solid #000000; padding: 5px; max-width: 90%; margin-left: 5px; margin-right: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .cart_heading { color: #050505; background-color: #878089; font-family: Tahoma, Geneva, sans-serif; border-radius: 15px; box-sizing: border-box; } .databases-img-banner { border: 5px solid #c0c0c0; padding: 5px; max-width: 90%; margin-left: 5px; margin-right: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .databases-video-banner { border: 5px solid #808080; padding: 5px; max-width: 90%; margin-left: 5px; margin-right: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .multi-edit-rounded { background-color: #ffffff; color: #0011ff; font-weight: bold; align: center; text-align:center; border-radius: 15px; border: 2px solid; } .intropage-div { background-color: #ffffff; color: #000000; /* ; */ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-evenly; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ z-index: 1; width: 90%; height: 90%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); vertical-align: middle; align: center; text-align: center; font-size: 12px; font-weight: bold; text-align:center; padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border: 3px solid #000000; border-radius: 15px; border: 2px solid; user-select:none; /* Default Chrome Safari Mozilla Opera */ -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; } .custom-error-div { background-color: #FF0000; color: #FFFFFF; z-index: 19; /* Highest In WebSite Z Order */ min-width: 600px; height: auto; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -40%); font-weight: bold; text-align:center; padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border: 2px solid #FFFFFF; border-radius: 15px; user-select:none; /* Default Chrome Safari Mozilla Opera */ -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; } .custom-warning-div { background-color: #FF8800; color: #FFFFFF; z-index: 19; /* Highest In WebSite Z Order */ min-width: 600px; height: auto; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -40%); font-weight: bold; text-align:center; padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border: 2px solid #FFFFFF; border-radius: 15px; user-select:none; /* Default Chrome Safari Mozilla Opera */ -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; } .custom-success-div { background-color: #00FF00; color: #FFFFFF; z-index: 18; /* Highest In WebSite Z Order */ min-width: 600px; height: auto; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); font-weight: bold; text-align:center; padding: 20px; display:flex; flex-direction: column; flex-wrap: nowrap; align-self: center; /* Stretches The Element Vertically - align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border: 10px solid #FFFFFF; border-radius: 15px; user-select:none; /* Default Chrome Safari Mozilla Opera */ -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; } .user-alert-div { background-color: #FFFFFF; color: #000000; z-index: 10; width: auto; height: auto; /* Center Horizontally - Vertically Aligned To MainStatus In JS */ position: fixed; left: 50%; transform: translate(-50%, 0); font-weight: bold; text-align:center; padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border: 10px solid #000000; border-radius: 15px; } .create_uppercrust { color: #0011ff; background-color: #ffffff; width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 18; /* Highest So Far - Error Divs Will Have To Go Above This - Spinners Too! - Check LocalCast (CSS) IT Has Infinity Heighest!! */ position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .utility_reset { color: #0011ff; background-color: #ffffff; width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 17; /* Highest So Far - Error Divs Will Have To Go Above This - Spinners Too! - Check LocalCast (CSS) IT Has Infinity Heighest!! */ position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .category_settings { color: #0011ff; background-color: #ffffff; width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 17; /* Highest So Far - Error Divs Will Have To Go Above This - Spinners Too! - Check LocalCast (CSS) IT Has Infinity Heighest!! */ position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .custom-popup-div { color: #0011ff; background-color: #ffffff; width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 4; position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } /* Setting IMG Button */ .settings-on { background: #00FF00; border-radius: 15px; } .settings-on:hover { background: #FFFFFF; } .settings-off { background: transparent; border-radius: 15px; } .settings-off:hover { background: #FFFFFF; } /* Cart FullScreen IMG Button */ .cart-fullscreen-on { background: transparent; border: 5px solid #00FF00; border-radius: 15px; } .cart-fullscreen-on:hover { border: 5px solid #FFFFFF; } .cart-fullscreen-off { background: transparent; border: 5px solid transparent; border-radius: 15px; } .cart-fullscreen-off:hover { border: 5px solid #FFFFFF; } /* Trash Can */ .trash-can { background: #FF0000; border: 5px solid transparent; border-radius: 15px; } .trash-can:hover { border: 5px solid #FF0000; background: #00FF00; } /* ------------------------------------- */ .support_images_outercontainer { background-color: #ffffff; color: #0011ff; width: auto; height: auto; min-width:30%; max-width:100%; max-height:90%; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; overflow: auto; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 4; /* Desing: ToDo - Z Index Check Required Here!! */ position: fixed; left: 50%; top: 0%; transform: translate(-50%, 0%); padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .support_images_outercontainer_usermode { background-color: #ffffff; color: #0011ff; height: auto; max-height:90%; overflow-y: auto; text-align: center; font-family: Arial; font-weight:bold; align: center; vertical-align: top; text-align: center; -webkit-transform: translate3d(0, 0, 0); /* Design: Chrome Problem: ScrollBar z-index Problem! - Lower z-index ScrollBars Appear In PlayLists On SmartTVs */ z-index: 4; /* Desing: ToDo - Z Index Check Required Here!! */ position: fixed; left: 0px; top: 0px; padding: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 10px solid #0011ff; border-radius: 15px; } .local_cast_container_colors { color: #0919f6; background-color: #ffffff; } .local_cast_container { color: #0919f6; background-color: #ffffff; position: absolute; display: flex; /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: nowrap; /* flex-flow: row wrap; */ /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: center; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: center; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ font-weight: bold; text-align: center; align: center; vertical-align: middle; font-weight: bold; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 3px solid #000000; border-radius: 15px; z-index: 2147483647; /* Max Level */ } .loading_local_gif { background-color: transparent; /* Transparent BG of Loading Gif. User Select ? */ /* filter:alpha(opacity=100); */ -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; border-radius: 15px; z-index: 10; } .transparent_bg { background-color: transparent; /* Transparent BG of Loading Gif. User Select ? */ /* filter:alpha(opacity=100); */ -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; border-radius: 15px; z-index: 10; } /* Search WebSite Classes ------------------------------------------------------------------------------- */ .search_pos { width: 100%; z-index: 3; align: center; text-align:center; vertical-align: middle; word-wrap:break-word; /*Background Opacity */ background: rgba(0, 0, 0, 0.3 ); /* RGBa with % opacity */ background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */ -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; border: 2px solid; cursor: url(../Images/CONFIG_DEFAULT/CATEGORIES_MOUSE_ICON_PIC_config_default_12Dec2020125152.gif), auto; } .search_class { color: #000000; background-color: #d4ff00; font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: bold; border: 5px solid #ffffff; background-image: url(../Images/WebSite_Static/search.png); background-repeat: no-repeat; background-position: left; text-align: center; width: 95%; margin: 10px; padding:3px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .search_highlight { color: #00ff00; font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif; text-decoration: underline; } .search_normal_txt { color: #000000; font-family: Arial Black, Gadget, sans-serif; } .search_row_highlight { color: #00ff00; font-family: Arial Black, Gadget, sans-serif; } .search_row_bg_highlight { color: #000000; font-family: Arial Black, Gadget, sans-serif; background-color: #c0c0c0; } .search_row_bg_select { color: #000000; font-family: Arial Black, Gadget, sans-serif; background-color: #00ff00; } .search_heading_txt { color: #ffffff; font-family: Trebuchet MS, Helvetica, sans-serif; font-variant: normal; font-weight: bold; /*Background Opacity */ background: rgba(0, 0, 0, 0.3 ); /* RGBa with % opacity */ background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */ } .search_major_heading { color: #ffffff; font-family: Trebuchet MS, Helvetica, sans-serif; font-variant: normal; text-decoration: underline; font-weight: bold; background-color: #000000; padding-left: 20px; padding-right: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 15px; } .search_db_heading { color: #ffffff; font-family: Serif; font-variant: normal; text-decoration: none; font-weight: bold; background-color: #0000ff; padding-left: 20px; padding-right: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 15px; } .search_column_headings { color: #000000; font-family: OCR A Std, monospace; font-variant: normal; text-decoration: none; font-weight: bold; background-color: #ffffff; padding-left: 20px; padding-right: 20px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #000000; border-radius: 15px; } .search_img { border: 5px solid #000000; background-color: #ff0000; padding: 3px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 15px; } .search_id_color { color: #ff0000; } .search_itemcode_color { color: #FFFFFF; } .search_title_color { color: #ffffff; word-wrap:break-word; } .search_metachars_color { color: #ffffff; word-wrap:break-word; } .search_filename_color { color: #FFFFFF; word-wrap:break-word; } .search_price_color { color: #ffffff; } .search_quantity_color { color: #474700; } .search_dimensions_color { color: #FFFFFF; } .search_db_color { color: #f1f4f4; } .search_category_color { color: #f6d604; } .search_protected_color { color: #ff00d0; } .search_catid_color { color: #EEFF00; } .search-options-normal { font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: bold; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .search-options-highlighted { font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: bold; border-radius: 15px; border: 2px solid #666666; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 3px 10px #111000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .transparentbg_IMG { background-color:#4a6c9b; -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; /* Position In The Centre Of Page */ position: absolute; left: 0%; top: 0%; visibility: hidden; /* Initially Hide The Loading Icon */ } /* Cursor Classes */ .playlist-nocursor { cursor:none; } .playlist-showcursor { cursor: url(../Images/CONFIG_DEFAULT/MAIN_BODY_FONT_NORMAL_MOUSE_ICON_PIC_config_default_12Dec2020131358.gif), auto; } .playlists { background-color: #000000; } .form-cell { text-align:right; vertical-align:middle; padding-right:5px; } /* --------------- PlayList Bottom Controls ----------- */ .playlist_control_bar { /* PlayList Bottom Controls Container Div */ width:100%; height:auto; min-height: 20px; background-color:#000000; /* padding-top: 10px; */ padding-bottom: 50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; overflow: hidden; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ flex-wrap: wrap; flex-flow: wrap; justify-content: space-between; /* flex: Horizontal child positioning: justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: Vertical Child Alignment: align-items: flex-start | flex-end | center | baseline | stretch */ box-sizing: border-box; } .playlist_smaller_font { /* display: flex; */ } /* ---------- Video Controls Custom OverLay And Preview Video Implementation --------------------- */ .playlist-controls-container { display: flex; width: 100%; height: auto; position: absolute; left: 0px; bottom: 0px; z-index:4; background: transparent; flex-direction: column; justify-content: center; } .custom-video-controls { display: flex; width:80%; height:auto; margin-bottom:100px; align-self:center; flex-direction: column; justify-content: center; } .video-controls { width:100%; height:auto; border-radius: 12px; transition: linear; background: transparent; } /* PlayList Video Progress Bar And Seek INPUT */ .video-progress { position: relative; width:100%; height: 24px; background: transparent; border-radius: 12px; border: 4px solid #ffffff; } .video-progress:hover { background: #00aaff; } /* Progress Bar */ .playlist-progress-bar { display: inline-block; position: absolute; left:0px; top: 0px; width: 100%; height: 24px; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 12px; box-sizing: border-box; pointer-events: none; transition: linear; } div#video_progress_container progress::-webkit-progress-bar { background: transparent; border-radius: 12px; box-sizing: border-box; transition: linear; } div#video_progress_container progress::-webkit-progress-value { background: #000000; border-radius: 12px; box-sizing: border-box; border: 2px solid #ffffff; transition: linear; } /* Mozilla */ div#video_progress_container progress::-moz-progress-bar { background: #000000; border-radius: 12px; box-sizing: border-box; border: 2px solid #ffffff; transition: linear; } /* --------------------- Seek Input Range Slider - INPUT Element Slider Track & Thumb Styling Below --------------------- */ .seek { display: inline-block; position: absolute; left:0px; top: 0px; width: 100%; cursor: pointer; box-sizing: border-box; } .seek-tooltip { display: none; position: absolute; padding: 3px; content: attr(data-title); font-weight: bold; color: #FFFFFF; /* background-color: rgba(255, 255, 255, 1); */ background: transparent; } .seek:hover + .seek-tooltip { display: block; } div#video_progress_container input[type=range] { height: 24px; -webkit-appearance: none; -moz-appearance: none; background: transparent; cursor: pointer; box-sizing: border-box; } div#video_progress_container input[type=range]:focus { outline: none; } div#video_progress_container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 24px; -webkit-appearance: none; cursor: pointer; transition: linear; box-sizing: border-box; } div#video_progress_container input[type=range]::-webkit-slider-thumb { visibility: hidden; width: 24px; height: 24px; border-radius: 12px; background: #000000; -webkit-appearance: none; box-sizing: border-box; cursor: pointer; } div#video_progress_container input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; } div#video_progress_container input[type=range]::-moz-range-track { width: 100%; height: 24px; border-radius: 12px; -moz-appearance: none; cursor: pointer; transition: linear; box-sizing: border-box; } div#video_progress_container input[type=range]::-moz-range-thumb { visibility: hidden; width: 24px; height: 24px; border-radius: 12px; background: #000000; -moz-appearance: none; box-sizing: border-box; cursor: pointer; } div#video_progress_container input[type=range]:focus::-moz-range-track { outline: none; } .custom-video-undertimeline-controls { display: flex; color: #FFFFFF; flex-direction: row; justify-content: space-between; /* No HighLighting Text */ user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ } .font-seek { -webkit-appearance: slider-vertical; /* WebKit */ } .font-tooltip { display: none; position: absolute; content: attr(data-title); font-weight: bold; color: #FFFFFF; padding-left: 3px; background: transparent; } .font-seek:hover + .font-tooltip { display: block; } /* ---------------------------- Audio Progress Bar ------------------------------------------------ */ .audio-controls { width:100%; height:auto; border-radius: 7px; transition: linear; background: transparent; } .audio-progress { position: relative; width:100%; height: 14px; background: transparent; border-radius: 7px; border: 4px solid #ffffff; } .audio-progress:hover { background: #878782; } .playlist-audio-progress-bar { display: inline-block; position: absolute; left:0px; top: 0px; width: 100%; height: 14px; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 7px; box-sizing: border-box; pointer-events: none; transition: linear; } div#audio_progress_container progress::-webkit-progress-bar { background: transparent; border-radius: 7px; box-sizing: border-box; transition: linear; } div#audio_progress_container progress::-webkit-progress-value { background: #6600ff; border-radius: 7px; box-sizing: border-box; border: 2px solid #ffffff; transition: linear; } /* Mozilla */ div#audio_progress_container progress::-moz-progress-bar { background: #6600ff; border-radius: 7px; box-sizing: border-box; border: 2px solid #ffffff; transition: linear; } div#audio_progress_container input[type=range] { height: 14px; -webkit-appearance: none; -moz-appearance: none; background: transparent; cursor: pointer; box-sizing: border-box; } div#audio_progress_container input[type=range]:focus { outline: none; } div#audio_progress_container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 14px; -webkit-appearance: none; cursor: pointer; transition: linear; box-sizing: border-box; } div#audio_progress_container input[type=range]::-webkit-slider-thumb { visibility: hidden; width: 14px; height: 14px; border-radius: 7px; background: #6600ff; -webkit-appearance: none; box-sizing: border-box; cursor: pointer; } div#audio_progress_container input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; } div#audio_progress_container input[type=range]::-moz-range-track { width: 100%; height: 14px; border-radius: 7px; -moz-appearance: none; cursor: pointer; transition: linear; box-sizing: border-box; } div#audio_progress_container input[type=range]::-moz-range-thumb { visibility: hidden; width: 14px; height: 14px; border-radius: 7px; background: #6600ff; -moz-appearance: none; box-sizing: border-box; cursor: pointer; } div#audio_progress_container input[type=range]:focus::-moz-range-track { outline: none; } .play-pause-time-button { width: auto; height: auto; display: flex; align-self: flex-start; padding-left: 10px; padding-right:10px; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; background: transparent; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } button { cursor: pointer; position: relative; margin-right: 7px; padding: 3px; border: none; outline: none; background-color: transparent; } button * { pointer-events: none; } button::before { position: absolute; display: none; right: 0; top: -50px; background-color: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-weight: bold; padding: 4px 6px; word-break: keep-all; white-space: pre; } button:hover::before { display: inline-block; } svg { width: 28px; height: 28px; fill: #FFFFFF; stroke: #FFFFFF; cursor: pointer; } .hidden { display: none; } /* ---------------------------- Custom Video Volume Control ------------------------------------ */ .volume-controls { display: flex; align-items: center; margin-right: 10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .volume-controls input { width: 200px; height: 20px; opacity: 1; transition: all 0.4s ease; } .volume-controls:hover input, .volume-controls input:focus { width: 200px; height: 20px; opacity: 1; } div#volume_controls input[type=range].volume { -webkit-appearance: none; -moz-appearance: none; height: 20px; /* 5px; */ background: #FFFF00; } div#volume_controls input[type=range].volume::-webkit-slider-runnable-track { width: 100%; height: 20px; -webkit-appearance: none; background: #FF8000; cursor: pointer; transition: linear; box-sizing: border-box; } div#volume_controls input[type=range].volume::-webkit-slider-thumb { height: 20px; width: 40px; -webkit-appearance: none; background: #FFFFFF; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* Mozilla Fire Fox */ div#volume_controls input[type=range]::-moz-range-track { width: 100%; height: 20px; -moz-appearance: none; background: #FF8000; cursor: pointer; transition: linear; box-sizing: border-box; } /* Design: .volume::moz-range-track ????? Investigate */ div#volume_controls input[type=range].volume::-moz-range-thumb { height: 20px; width: 40px; -moz-appearance: none; background: #FFFFFF; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* -------------------------- Audio Volume Controls -------------------------------------------- */ .audio-volume-controls { display: flex; align-items: center; margin-right: 10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .audio-volume-controls input { width: 200px; height: 20px; opacity: 1; transition: all 0.4s ease; } .audio-volume-controls:hover input, .audio-volume-controls input:focus { width: 200px; height: 20px; opacity: 1; } div#audio_volume_controls input[type=range].volume { -webkit-appearance: none; -moz-appearance: none; height: 20px; /* 5px; */ background: #FFFF00; } div#audio_volume_controls input[type=range].volume::-webkit-slider-runnable-track { width: 100%; height: 20px; -webkit-appearance: none; background: #0000FF; cursor: pointer; transition: linear; box-sizing: border-box; } div#audio_volume_controls input[type=range].volume::-webkit-slider-thumb { height: 20px; width: 40px; -webkit-appearance: none; background: #FFFFFF; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* Mozilla Fire Fox */ div#audio_volume_controls input[type=range]::-moz-range-track { width: 100%; height: 20px; -moz-appearance: none; background: #0000FF; cursor: pointer; transition: linear; box-sizing: border-box; } div#audio_volume_controls input[type=range].volume::-moz-range-thumb { height: 20px; width: 40px; -moz-appearance: none; background: #FFFFFF; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* -------------------------- Custom Brightness Control ------------------------------ */ .brightness-controls { display: flex; align-items: center; margin-right: 10px; padding-left: 10px; padding-right:10px; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .brightness-controls input { width: 300px; height: 20px; opacity: 1; transition: all 0.4s ease; } .brightness-controls:hover input, .brightness-controls input:focus { width: 300px; height: 20px; background: #00FF00; opacity: 1; } div#brightness_controls input[type=range].brightness { -webkit-appearance: none; -moz-appearance: none; height: 20px; background: #FFFFFF; } div#brightness_controls input[type=range].brightness::-webkit-slider-runnable-track { width: 100%; height: 20px; -webkit-appearance: none; background: #FFFFFF; cursor: pointer; transition: linear; box-sizing: border-box; } div#brightness_controls input[type=range].brightness::-webkit-slider-thumb { height: 20px; width: 40px; -webkit-appearance: none; background: #000000; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* Mozilla Fire Fox */ div#brightness_controls input[type=range]::-moz-range-track { width: 100%; height: 20px; -moz-appearance: none; background: #00FFFF; cursor: pointer; transition: linear; box-sizing: border-box; } div#brightness_controls input[type=range].brightness::-moz-range-thumb { height: 20px; width: 40px; -moz-appearance: none; background: #000000; border-radius: 10px 10px 10px 10px; /* LHTop RHTop RHBottom LHBottom */ box-sizing: border-box; cursor: pointer; } /* ---------------------- Seek -------------------------------------------------------- */ .seek-playbackrate { display: inline-block; position: relative; left:0px; top: 0px; width: 100%; cursor: pointer; box-sizing: border-box; } .seek-playbackrate:hover + .seek-playbackrate-tooltip { display: block; } .seek-playbackrate-tooltip { display: none; position: absolute; content: attr(data-title); font-weight: bold; color: #FFFFFF; background: transparent; } /* ====================== Administration Page ================================ */ .admin_fns_heading { text-align: center; color: #00FF00; font-weight: bold; font-variant: small-caps; text-decoration: underline; font-family: Hobo Std; font-size: 22px; } .admin_functions { max-width: 250px; /* float: top; */ display: block; text-align: center; background: transparent; color: #00FF00; font-family: Hobo Std; font-size: 12px; border: 2px solid #000000; /* padding: 5px; */ margin: 2px; border-radius: 15px; } .admin_functions a{ display:block; text-align: center; color: #FFFFFF; font-family: arial; font-size: 12px; } .admin_functions a:hover{ display:block; text-align: center; color: #000000; font-family: arial; font-size: 12px; } .admin_functions a:active{ display:block; text-align: center; color: #FFFFFF; font-family: arial; font-size: 12px; } /* -------------- Customer DnD ------------ */ legend { font-weight: bold; color: #333; } #filedrag { display: block; font-weight: bold; text-align: center; border: 2px solid #555; border-radius: 15px; cursor: default; } #filedrag.hover { color: #f00; border-color: #f00; border-style: solid; box-shadow: inset 0 3px 4px #888; } #messages { border: 1px solid #999; } .smallprint { color: #00FF00; background-color: #000000; font-weight: bold; text-align: center; vertical-align: middle; } .smallprint:hover { color: #000000; background-color: #FFFFFF; font-weight: bold; text-align: center; vertical-align: middle; } /* --------- end customer DnD ------ */ .noselect { /* No Hignlight - All Browsers */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* ----------- Next Previous Controls Effect --------- */ .nextprev-controls-effect{ position: relative; margin: 0 auto; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .nextprev-controls-effect img{ top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; } /* -------------------------- CSS3 SlideShow --------------------------------------- */ .thumbs_rollover { position: relative; margin: 0 auto; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .thumbs_rollover img { top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; } /* --------------------------------------------------------- */ .thumbs2_rollover{ position: relative; margin: 0 auto; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .thumbs2_rollover img{ top: 0px; left: 0px; position: absolute; width: 100%; height: 100%; -webkit-animation: showMe 6s ease infinite 0s forwards; -moz-animation: showMe 6s ease infinite 0s forwards; -o-animation: showMe 6s ease infinite 0s forwards; -ms-animation: showMe 6s ease infinite 0s forwards; animation: showMe 6s ease infinite 0s forwards; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; border-radius: 15px; } .thumbs2_rollover img:nth-child(1){ z-index: 7; } .thumbs2_rollover img:nth-child(2){ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; z-index: 6; } .thumbs2_rollover img:nth-child(3){ -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; z-index: 5; } .thumbs2_rollover img:nth-child(4){ -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; z-index: 4; } .thumbs2_rollover img:nth-child(5){ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; z-index: 3; } .thumbs2_rollover img:nth-child(6){ -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; -ms-animation-delay: 5s; animation-delay: 5s; z-index: 2; } .thumbs2_rollover:hover img{ -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } .thumbs2_rollover_overlay { position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 500; background: rgba(0,0,0,0); /* shadows The entire IMG */ box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset; pointer-events: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .thumbs2_rollover_overlay span{ display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); text-align: center; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .thumbs2_rollover:hover .thumbs_rollover_overlay { opacity: 1; box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset; } @-webkit-keyframes showMe { 0% { visibility: visible; z-index: 8; } 16.5% { visibility: visible; z-index: 8; } 33% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } @-moz-keyframes showMe { 0% { visibility: visible; z-index: 8; } 16.5% { visibility: visible; z-index: 8; } 33% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } @-o-keyframes showMe { 0% { visibility: visible; z-index: 8; } 16.5% { visibility: visible; z-index: 8; } 33% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } @-ms-keyframes showMe { 0% { visibility: visible; z-index: 8; } 16.5% { visibility: visible; z-index: 8; } 33% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } @keyframes showMe { 0% { visibility: visible; z-index: 8; } 16.5% { visibility: visible; z-index: 8; } 33% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } /* ---------------------- Cube MouseOver Effect ----------------------- */ .cube-effect-outer { --cube-dimension: 200px; --cube-negdimension: -200px; --cube-halfdimension: 100px; --cube-neghalfdimension: -100px; margin: auto; /* Design: Added 19July2016 */ /*perspective: 1000px; */ /* Design: MUCHOS TROUBLE HERE!!! IMG GO OUTSIDE DIVS AND FLOAT TO TOP !!!! DONT USE!) */ /* -webkit-perspective: 1000px; */ /* perspective-origin: 50% 50%; */ /* background-color: #00FFFF; */ width : var(--cube-dimension); height: var(--cube-dimension); z-index: 5; } .cube-effect-outer > .cube-effect { margin: auto; position: relative; height: var(--cube-dimension); width: var(--cube-dimension); transform-style: preserve-3d; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } .cube-effect-outer > .cube-effect div { position: absolute; width : var(--cube-dimension); height: var(--cube-dimension); opacity: 1; background-color: transparent; border: solid 1px #eee; transition: transform 1.3s ease-in; /* Design: Eases The Panels Open & Closed */ } .cube-effect-outer > .cube-effect > .front { transform: translateZ(var(--cube-halfdimension)); } .cube-effect-outer > .cube-effect > .back { transform: translateZ(var(--cube-neghalfdimension)) rotateY(180deg); } .cube-effect-outer > .cube-effect > .right { transform: rotateY(-270deg) translateX(var(--cube-halfdimension)); transform-origin: top right; } .cube-effect-outer > .cube-effect > .left { transform: rotateY(270deg) translateX(var(--cube-neghalfdimension)); transform-origin: center left; } .cube-effect-outer > .cube-effect > .top { transform: rotateX(-270deg) translateY(var(--cube-neghalfdimension)); transform-origin: top center; } .cube-effect-outer > .cube-effect > .bottom { transform: rotateX(270deg) translateY(var(--cube-halfdimension)); transform-origin: bottom center; } @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube-effect:hover { animation: rotate 12s infinite linear; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } .cube-effect-outer:hover .front { transform: translateZ(var(--cube-dimension)); } .cube-effect-outer:hover .back { transform: translateZ(var(--cube-negdimension)) rotateY(180deg); } .cube-effect-outer:hover .right { transform: rotateY(-270deg) translateZ(var(--cube-halfdimension)) translateX(var(--cube-halfdimension)); } .cube-effect-outer:hover .left { transform: rotateY(270deg) translateZ(var(--cube-halfdimension)) translateX(var(--cube-neghalfdimension)); } .cube-effect-outer:hover .top { transform: rotateX(-270deg) translateZ(var(--cube-halfdimension)) translateY(var(--cube-neghalfdimension)); } .cube-effect-outer:hover .bottom { transform: rotateX(270deg) translateZ(var(--cube-halfdimension)) translateY(var(--cube-halfdimension)); } /* ---------------------- Cube MouseOver Horizintal Rotate Effect ----------------------- */ .cubex-effect-outer { --cube-dimension: 200px; --cube-negdimension: -200px; --cube-halfdimension: 100px; --cube-neghalfdimension: -100px; margin: auto; /* Design: Added 19July2016 */ /*perspective: 1000px; */ /* Design: MUCHOS TROUBLE HERE!!! IMG GO OUTSIDE DIVS AND FLOAT TO TOP !!!! DONT USE!) */ /* -webkit-perspective: 1000px; */ /* perspective-origin: 50% 50%; */ /* background-color: #00FFFF; */ width : var(--cube-dimension); height: var(--cube-dimension); z-index: 5; } .cubex-effect-outer > .cubex-effect { margin: auto; position: relative; height: var(--cube-dimension); width: var(--cube-dimension); transform-style: preserve-3d; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } .cubex-effect-outer > .cubex-effect div { position: absolute; width : var(--cube-dimension); height: var(--cube-dimension); opacity: 1; background-color: transparent; border: solid 1px #eee; transition: transform 1.3s ease-in; /* Design: Eases The Panels Open & Closed */ } .cubex-effect-outer > .cubex-effect > .front { transform: translateZ(var(--cube-halfdimension)); } .cubex-effect-outer > .cubex-effect > .back { transform: translateZ(var(--cube-neghalfdimension)) rotateY(180deg); } .cubex-effect-outer > .cubex-effect > .right { transform: rotateY(-270deg) translateX(var(--cube-halfdimension)); transform-origin: top right; } .cubex-effect-outer > .cubex-effect > .left { transform: rotateY(270deg) translateX(var(--cube-neghalfdimension)); transform-origin: center left; } .cubex-effect-outer > .cubex-effect > .top { /* transform: rotateX(-270deg) translateY(var(--cube-neghalfdimension)); */ /* transform-origin: top center; */ transform: rotateY(270deg) translateX(var(--cube-neghalfdimension)); /* same as left */ transform-origin: center left; } .cubex-effect-outer > .cubex-effect > .bottom { /* transform: rotateX(270deg) translateY(var(--cube-halfdimension)); */ /* transform-origin: bottom center; */ transform: rotateY(-270deg) translateX(var(--cube-halfdimension)); /* same as right */ transform-origin: top right; } @keyframes x_rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(0deg) rotateY(360deg); } } .cubex-effect:hover { animation: x_rotate 12s infinite linear; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } .cubex-effect-outer:hover .front { transform: translateZ(var(--cube-dimension)); } .cubex-effect-outer:hover .back { transform: translateZ(var(--cube-negdimension)) rotateY(180deg); } .cubex-effect-outer:hover .right { transform: rotateY(-270deg) translateZ(var(--cube-halfdimension)) translateX(var(--cube-halfdimension)); } .cubex-effect-outer:hover .left { transform: rotateY(270deg) translateZ(var(--cube-halfdimension)) translateX(var(--cube-neghalfdimension)); } .cubex-effect-outer:hover .top { /* transform: rotateX(-270deg) translateZ(var(--cube-halfdimension)) translateY(var(--cube-neghalfdimension)); */ transform: rotateY(315deg) translateX(var(--cube-neghalfdimension)); /* same as left translateZ(var(--cube-halfdimension)) */ } .cubex-effect-outer:hover .bottom { /* transform: rotateX(270deg) translateZ(var(--cube-halfdimension)) translateY(var(--cube-halfdimension)); */ transform: rotateY(-315deg) translateX(var(--cube-halfdimension)); /* same as right translateZ(var(--cube-halfdimension)) */ } /* ---------------------------------------------------------------------- */ .actualsized-div { background-color: rgba(0,0,0,0.8); color: #FFFFFF; z-index: 9; width: 1000px; height: 1000px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; text-align:center; padding: 20px; border: 5px solid #FFFFFF; box-sizing: border-box; border-radius: 15px; } .centered-rounded { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: transparent; border: 5px solid #FFFFFF; box-sizing: border-box; border-radius: 15px; } .application-div { background-color: #FFFFFF; color: #000000; z-index: 10; width: 1000px; height: 1000px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: bold; text-align:center; padding: 0px; border: 5px solid #FFFFFF; box-sizing: border-box; border-radius: 15px; } .application-heading { color: #0000FF; margin-left: 50px; font-weight: bold; font-family: Times New Roman; text-align: left; } .application-heading-large { color: #FFFF00; font-weight: bold; font-family: sans serif; } .application-txt { color: #ffffff; background: #002aff; font-weight: bold; font-family: Bradley Hand, cursive; padding-left: 50px; overflow-y: auto; } .application-txt-pre { color: #ffffff; background: #002aff; font-weight: bold; font-family: Bradley Hand, cursive; } .dimension-fieldset { border: 1px solid #FFFFFF; padding: 5px; /* Flex Container Properties */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Flex Direction */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; flex-wrap: nowrap; /* flex-flow: row; same as direction flex-flow: direction flex-wrap */ justify-content: space-around; /* flex: JUSTIFY === Horizontal Child Alignment - Applied to Container - Effects Items in Container : justify-content: flex-start | flex-end | center | space-between | space-around */ align-items: center; /* flex: ALIGN === Vertical Child Alignment: Applied to Container - Effects Items in Container: align-items: flex-start | flex-end | center | baseline | stretch */ align-content: space-around; /* flex: Position All Items Vertically: Applied to Container - Effects Items in Container align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; */ box-sizing: border-box; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .dimension-labels { color: #FFFFFF; font-weight: bold; font-family: Times New Roman; text-align: center; } /* File Upload Progress Bar */ .progress_container { position: absolute; background: transparent; border-radius: 8px; moz-border-radius: 16px; webkit-border-radius: 8px; } .progress_outer { border: 1px solid #00FF00; width: 100%; margin: 0 auto; background: transparent; border-radius: 4px; moz-border-radius: 12px; webkit-border-radius: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .progress { width: 0%; background: #00FF00; border-radius: 4px; moz-border-radius: 4px; webkit-border-radius: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .progress_percentage { position: absolute; background: transparent; font-size: 18px; font-weight: bold; color: #000000; border-radius: 8px; moz-border-radius: 16px; webkit-border-radius: 8px; } .favourites-img-banner1 { background-color: #ffffff; border: 5px solid #0000ff; max-width: 90%; height: auto; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-video-banner1 { background-color: #5cb28d; border: 5px solid #d02525; max-width: 90%; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-img-banner2 { background-color: #000000; border: 5px solid #666666; max-width: 90%; height: auto; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-video-banner2 { background-color: #ffffff; border: 5px solid #666666; max-width: 90%; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-img-banner3 { background-color: #000000; border: 5px solid #666666; max-width: 90%; height: auto; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-video-banner3 { background-color: #ffffff; border: 5px solid #666666; max-width: 90%; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-img-banner4 { background-color: #1f1e1e; border: 5px solid #666666; max-width: 90%; height: auto; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .favourites-video-banner4 { background-color: #f9f5f5; border: 5px solid #1acb70; max-width: 90%; margin:10px; padding: 5px; -webkit-box-shadow: 10px 10px 10px #111000; box-shadow: 10px 10px 10px #111000; border-radius: 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .highlight-on ( -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .highlight-off ( -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* ----------------- CSS3 - Pattern Gallery --------------------------------- */ .bricks { background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; } .honeycone { background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; background-size: 40px 60px; }