Choose "Advance Button" from Ultimate Add-ons Elements General Button Alignment: Center Button Size: Large Button Button Title Color: #ffffff Background Color: rgba(0,52,166,0.6)

Background Button Hover Background Effect: No Effect Button Hover Animation Effect: No Effect Hover Background Color: #ffffff Hover Text Color: #0034a6

Styling Button Border Style: Solid Border Color: #0034a6 Border Color on Hover: #0034a6 Border Width: 1 Border Radius: 0

Typography Font Family: Lato Font Style: 300 Font Size: 16 Line Height: 23

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tabs Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position:  Top Alignment: Center Autoplay: none Active Section: 1 Extra class name: horizontal-tabs

In order to make Tabs for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Tabs on Mobile" is active and set to the Footer.

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tour Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position: Right Alignment: Left Navigation Width: Medium Autoplay: none Active Section: 1 Extra class name: vertical-tabs-right

Use tabs to alternate between views within the same context, not to navigate to different areas. Use tabs only when users don't need to see content from multiple tabs simultaneously.

Choose the Tour Element and set the following; Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Position:  Left Alignment: Left Navigation Width: Medium Autoplay: none Active Section: 1 Extra class name: vertical-tabs-left

In order to make Tabs for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Tabs on Mobile" is active and set to the Footer.

Use Accordions for lists of content that have more information, or answers for each point of information. FAQs should use the GSU Accordion. 

Style: modern Shape: square Color: white Do not fill content area?: Checked Spacing: None Gap: None Alignment: Left Autoplay: none Allow collapse_all: Checked Icon: Plus Position: Left Active Section: 1 Extra class name: accordion

In order to make Accordions for mobile, simply make sure that the CSS & JS Toolbox codeblock for "Close Accordions on Mobile" is active and set to the Footer.

Use FAQ Toggles in place of Accordions ONLY WHEN the information being displayed is within a tabbed element. Tabbed elements cannot display Accordions, but they can show the much simpler GSU FAQ Toggles.

Choose FAQ Element Style: Simple Icon Color:  Blue Size: Large Default State: Closed Extra class name: faq-toggle

Use Creative Link Blue on your page when you have a link that you need to stand apart from normal links, and you want more attention drawn to it due to its importance.

General Link Style: Style 3 Link Color: #0034a6 Link Hover Color: #0034a6 Border Style: Solid Link Border Color: #cc0000
Link Border Width: 2px
Link Assignment: Center

Creative Link White

Use Creative Link White on your page when you have a dark background and a link that you need to stand apart from normal links, and you want more attention drawn to it due to its importance.

General Link Style: Style 3 Link Color: #ffffff Link Hover Color: #ffffff Border Style: Solid Link Border Color: #cc0000
Link Border Width: 2px
Link Assignment: Center

THESTATEWAY (with underline) in Marquee Headlines

Use the official THESTATEWAY font and underline (complete with (R)) in the Marquee Headline on your page.  Add the following text block in your Marquee where the Headline usually goes:

<h2><span style="font-family: 'Oswald'; font-weight: 500; font-size: 7.0rem; color: #0033ad; line-height: 1em; margin: auto; padding-bottom: 10px;">THE<span class="underline_big">STATE</span>WAY<sup class="thestateway-regmark">®</sup></span></h2>

And then add the following in your CSS & JS Toolbox code block for Site-wide CSS:

/* THESTATEWAY Headline and regular text-block */
.thestateway {
    font-family: 'Oswald';
    font-weight: 500;
    color: #0039a6;
    margin: auto;
    display: inline-block !important;
}
.thestateway-regmark{
    bottom:0em;
    font-size:25%;
    top: 0em !important;
}
.underline_big {
border-bottom: 0.108em solid #cc0000 !important;
display: inline-block !important;
line-height: 1.2 !important;
-moz-appearance: underline_big;
-webkit-appearance: underline_big;
}

THESTATEWAY (with underline) in regular text fields

Use the official THESTATEWAY font and underline (complete with (R)) for use in regular text fields on your page. Add the following text block in your Marquee where you want THESTATEWAY to go:

<span class="thestateway">THE<span class="underline" style="border-bottom-style: solid; border-bottom-width: 5px; border-bottom-color: #cc0000;">STATE</span>WAY<sup class="thestateway-regmark">®</sup></span>

And if you don't already have the following code added to your CSS & JS Toolbox under the code block for Site-Wide CSS, add the following:

/* THESTATEWAY Headline and regular text-block */
.thestateway {
    font-family: 'Oswald';
    font-weight: 500;
    color: #0039a6;
    margin: auto;
    display: inline-block !important;
}
.thestateway-regmark{
    bottom:0em;
    font-size:25%;
    top: 0em !important;
}
.underline_big {
border-bottom: 0.108em solid #cc0000 !important;
display: inline-block !important;
line-height: 1.2 !important;
-moz-appearance: underline_big;
-webkit-appearance: underline_big;
}