4
's
v>
Use of a Statin to decrease cholesterol after PCI/angioplasty.
Number of PCI/angioplasty procedures performed during the calendar year.
5
's
v>
Use of a P2Y12 inhibitor medication to reduce the chance of blood clots after PCI/angioplasty.
Use of a P2Y12 inhibitor medication to reduce the chance of blood clots after PCI/angioplasty.
Weight: 1
Styleguide RecipesFYHAH.Profile.Metrics
*/
/*
CHD
A search systems for clinics that meet the standard.
Weight: 6000
Styleguide RecipesCHD
*/
/*
Search Result
The returned result of a FYHAH search.
Markup:
Ahmanson – UCLA Adult Congenital Heart Disease Center
Adult CHD Services
- Cardiac CT
- Cardiac Diagnostic Catheterization
- Cardiac Interventional Catheterization
- Cardiac MR
- Cardiothoracic Surgery
- Echocardiography
- Electrophysiology
- General Adult Congenital Cardiology
- Other
- Pulmonary Hypertension
Pediatric Services
- Cardiac CT
- Cardiac Diagnostic Catheterization
- Cardiac Interventional Catheterization
- Cardiac MR
- Cardiothoracic Surgery
- Echocardiography
- Electrophysiology
- General Adult Congenital Cardiology
- Other
- Pulmonary Hypertension
Primary Contacts
Satellite Office
The information available in this directory is self-reported by individual centers and has not been independently confirmed by the American College of Cardiology. Please call the center or clinic’s main number to verify services, location and details regarding available cardiologists and surgeons. Thank you.
Weight: -1
Styleguide RecipesCHD.Result
*/
body {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_copy);
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-weight: var(--font_regular);
font-family: var(--font-family_display);
}
h6, .h6 {
font-weight: var(--font_bold);
}
p {
line-height: 1.35;
}
ul,
ol {
line-height: 1.6;
}
kbd,
code,
samp,
var {
font-family: var(--font-family_mono);
}
form {
border-color: rgba(19, 18, 18, 0.38);
}
label {
font-weight: var(--font_bold);
}
label,input,
select,
textarea,
legend,
fieldset,
button {
color: currentColor;
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
min-height: 1.5em;
padding: 4px 8px;
padding: 0.25rem 0.5rem;
border-width: thin;
border-radius: 8px;
border-color: rgba(19, 18, 18, 0.25);
line-height: 1.6;
}
input:focus,
select:focus,
textarea:focus {
outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
width: 100%;
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
[type=color] {
width: 24px;
width: 1.5rem;
height: 24px;
height: 1.5rem;
padding: 0;
border-color: rgba(19, 18, 18, 0.25);
}
[type=radio],
[type=checkbox] {
padding-left: 8px;
padding-left: 0.5rem;
}
button,
[type=button],
[type=submit],
[type=reset] {
width: auto;
border-radius: 8px;
}
fieldset {
margin: 8px 0;
margin: 0.5rem 0;
padding: 8px 16px;
padding: 0.5rem 1rem;
border-color: rgba(19, 18, 18, 0.1);
}
/*
Basic Inputs
Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only. To get full brand styling use a framework based version of arches.
Styleguide HTML.Inputs
*/
/*
Text Inputs
Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.
Markup:
Styleguide HTML.Inputs.Text
*/
/*
Inputs UC
Utility Class only build inputs
Markup:
Weight:100
Styleguide HTML.Inputs.All
*/
/*
Table
Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.
Tables can have captions now.| Person | Number | Third Column |
|---|
| Someone Lastname | 900 | Nullam quis risus eget urna mollis ornare vel eu leo. |
| Person Name | 1200 | Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. |
| Another Person | 1500 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. |
| Last One | 2800 | Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. |
Styleguide HTML.BasicTable
*/
table {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
table caption {
padding: 8px;
padding: 0.5rem;
}
th,
td {
padding: 4px 8px;
padding: 0.25rem 0.5rem;
text-align: start;
}
thead {
padding: 4px 8px 0;
padding: 0.25rem 0.5rem 0;
font-weight: var(--font_bold);
}
tbody {
padding: 0 8px;
padding: 0 0.5rem;
}
tfoot,
caption {
padding: 0 8px 4px;
padding: 0 0.5rem 0.25rem;
font-size: 14.222px;
font-size: 0.8888888889rem;
}
/*
Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high.
Weight: -1000
Styleguide DesignBase
*/
/*
Fonts
The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.
Styleguide DesignBase.Fonts
*/
/*
Accent Roboto Slab
A beautiful Accent font that shows a complexity and texture to the fonts used in the design.
Roboto Slab
font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -10
Styleguide DesignBase.Fonts.Accent
*/
/*
Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro
font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif
MP
Display Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -5
Styleguide DesignBase.Fonts.Display
*/
/*
Copy: Open Sans
A clean font for content and text of none UI elements.
"Open Sans"
font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"
OS
Content Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: 0
Styleguide DesignBase.Fonts.Copy
*/
/*
UI: Open Sans
A clean font for content and text of none UI elements.
"Open Sans"
font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"
OS
Content Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: 1
Styleguide DesignBase.Fonts.UI
*/
/*
Icons: Font Awesome
The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.
The organization uses version 6 of Font Awesome's icon sets.
The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.
Styleguide DesignBase.IconsTrue
*/
/*
ACC's Blue
$acc-blue - #004176; acc
Styleguide DesignBase.Colors.ACC
*/
/*
Theme Colors
Colors are based off of the ACC Scrub Colors.
map-get($theme-palette, primary) - #015697; primary
map-get($theme-palette, secondary) - #009db1; secondary
map-get($theme-palette, shade) - #878585; shade
map-get($theme-palette, accent) - #e17009; accent
map-get($theme-palette, info) - #a3988c; info
map-get($theme-palette, highlight) - #f5ca4f; highlight
Weight:-1000
Styleguide DesignBase.Colors
*/
/*
Action Colors
Actionable colors used to respond to user inputs and messaging.
map-get($theme-palette, alert) - #953b39; alert
map-get($theme-palette, warning) - #c67605; warning
map-get($theme-palette, success) - #468847; success
map-get($theme-palette, navigation) - #2b58c0; navigation
Styleguide DesignBase.Colors.Actions
*/
/*
Color Coding
Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.
Styleguide DesignBase.Colors.ColorCoding
*/
/*
COR Colors
(COR) Class of Recommendation is a color collect used in Guideline recommendations.
$cor-green - #6fc284; I
$cor-yellow - #ffd44f; IIA
$cor-yellow-orange - #faa74b; IIA
$cor-orange - #f15d4c;III and III-NoHarm
$cor-red - #ed1c00; III-harm
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.COR
*/
/*
LOE Colors
(LOE) level of Evidence is a color collect used in Guideline recommendations.
$loe-dark-blue - rgb(62, 111, 183);LOE A
$loe-mid-blue - rgb(101, 156, 211);LOE B-R
$loe-light-blue - rgb(161, 193, 230);LOE B-NR
$loe-pale-blue - rgb(181, 213, 229); LOE C
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.LOE
*/
/*
Credit Type Color Coding
Credit Types in the ACC have a specific color coding.
$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit
$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics
$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2
$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4
$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit
$credit-CE - #a8a8a8; CE: Continuing CCA\Tech Education
$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s)
$credit-CNE - #198dae; CNE: Continuing Nurse Education
$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical
$credit-COP - #775891; COP: Certificate of Participation
$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education
$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II
$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV
Weight: 0
Styleguide DesignBase.Colors.ColorCoding.Credits
*/
/*
Clinical Pathway Colors
Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.
$pathway-acute-coronary-syndromes - #009974; Acute Coronary Syndromes
$pathway-arrhythmias-EP - #005b37; arrhythmias and Clinical EP
$pathway-congenital-heart-disease - #fdb918; Congenital Heart Disease
$pathway-ecg-stress-test - #d9691f; Standard ECG, Stress Test
$pathway-heart-failure - #410d49; Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology - #c8b02f; Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology - #947b33; Noninvasive Cardiology
$pathway-pandemic - #8e2582; Pandemic "Covid"
$pathway-pericardial - #0079ad; pericardial Disease
$pathway-prevention - #a01d51; Prevention
$pathway-pulmonary-hypertension - #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special - #00b6f1; Special
$pathway-stable-ischemic-heart-disease - #0f3e65; Stable ischemic Heart Disease
$pathway-valvular-heart-disease - #4f4190; Valvular Heart Disease
$pathway-vascular-medicine - #ae171c; Vascular Medicine
Weight: -1
Styleguide DesignBase.Colors.ColorCoding.Pathways
*/
/*
Registry CC
Credit Type Color codes in the ACC have a specific color coding.
$registry-cpmi - #f22418; Chest Pain MI Registry
$registry-afib - #ffb300; AFib Ablation Registry
$registry-cathpci - #0086d5; CathPCI Registry
$registry-icd - #80b800; ICD Registry
$registry-impact - #4e1f73; IMPACT Registry
$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)
$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)
$registry-focus - #d6560d; Patient Navigator Focus MI
$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding
$registry-laao - #00667a; LAAO Registry
$registry-pvi - #00947f; PVI Registry
$registry-auxdata - #04adad; Auxiliar Data Collection
$registry-ststvt - #a20062; STS ACC TVT Registry
$registry-diabetes - #7893b8; Diabetes Collaborative
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Registry
*/
/*
Journal
Journals of JACC have specific branding colors.
$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)
$journal-adv - #0000FF; JACC: Advances: (JC-ADV)
$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)
$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)
$journal-case - #f37321; JACC: Case Reports: (JC-CASE)
$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf - #991326; JACC: Heart Failure: (JC-HF)
$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Journals
*/
/*
Social Network Colors
Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.
$twitter - #000; twitter
$facebook - #3b5998; facebook
$linkedin - #007bb6; linkedin
$apple-store - #ea4cc0; apple-store
$google-play - #689f38; google-play
$youtube - #bb0000; youtube
Weight: 100
Styleguide DesignBase.Colors.ColorCoding.Social Networks
*/
/*
Textures
All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.
.texture_light - Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.
.texture_medium - medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.
.texture_dust - Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.
.texture_dark - This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.
.texture_cross - A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
.texture_disabled - This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.
Markup:
{{modifier_class}} with a light primary color background
Styleguide DesignBase.Textures
*/
/*
primary: Color Variations
The Modified versions of the primary color from this theme
Markup:
primary-n5
- HEX: #000d17
- RGB: 0, 13, 23
- HSL: 206deg ,98.7960526316%, 4.4705882353%
primary-n4
- HEX: #001a2d
- RGB: 0, 26, 45
- HSL: 206deg ,98.7763157895%, 8.9411764706%
primary-n3
- HEX: #012b4c
- RGB: 1, 43, 76
- HSL: 206deg ,98.75%, 14.9019607843%
primary-n2
- HEX: #013c6a
- RGB: 1, 60, 106
- HSL: 206deg ,98.7236842105%, 20.862745098%
primary-n1
- HEX: #014980
- RGB: 1, 73, 128
- HSL: 206deg ,98.7039473684%, 25.3333333333%
primary-0
- HEX: #015697
- RGB: 1, 86, 151
- HSL: 206deg, 98.6842105263%, 29.8039215686%
primary-1
- HEX: #016abb
- RGB: 1, 106, 187
- HSL: 206deg ,93.75%, 36.8235294118%
primary-2
- HEX: #0289f0
- RGB: 2, 137, 240
- HSL: 206deg ,86.3486842105%, 47.3529411765%
primary-3
- HEX: #4db1fe
- RGB: 77, 177, 254
- HSL: 206deg ,74.0131578947%, 64.9019607843%
primary-4
- HEX: #a6d8fe
- RGB: 166, 216, 254
- HSL: 206deg ,61.6776315789%, 82.4509803922%
primary-5
- HEX: #dbefff
- RGB: 219, 239, 255
- HSL: 206deg ,54.2763157895%, 92.9803921569%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.primary
*/
/*
secondary: Color Variations
The Modified versions of the secondary color from this theme
Markup:
secondary-n5
- HEX: #00181b
- RGB: 0, 24, 27
- HSL: 186.7796610169deg ,100%, 5.2058823529%
secondary-n4
- HEX: #002f35
- RGB: 0, 47, 53
- HSL: 186.7796610169deg ,100%, 10.4117647059%
secondary-n3
- HEX: #004f59
- RGB: 0, 79, 89
- HSL: 186.7796610169deg ,100%, 17.3529411765%
secondary-n2
- HEX: #006e7c
- RGB: 0, 110, 124
- HSL: 186.7796610169deg ,100%, 24.2941176471%
secondary-n1
- HEX: #008596
- RGB: 0, 133, 150
- HSL: 186.7796610169deg ,100%, 29.5%
secondary-0
- HEX: #009db1
- RGB: 0, 157, 177
- HSL: 186.7796610169deg, 100%, 34.7058823529%
secondary-1
- HEX: #00bbd2
- RGB: 0, 187, 210
- HSL: 186.7796610169deg ,95%, 41.2352941176%
secondary-2
- HEX: #05e3ff
- RGB: 5, 227, 255
- HSL: 186.7796610169deg ,87.5%, 51.0294117647%
secondary-3
- HEX: #59ecff
- RGB: 89, 236, 255
- HSL: 186.7796610169deg ,75%, 67.3529411765%
secondary-4
- HEX: #acf6ff
- RGB: 172, 246, 255
- HSL: 186.7796610169deg ,62.5%, 83.6764705882%
secondary-5
- HEX: #defbff
- RGB: 222, 251, 255
- HSL: 186.7796610169deg ,55%, 93.4705882353%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.secondary
*/
/*
success: Color Variations
The Modified versions of the success color from this theme
Markup:
success-n5
- HEX: #0b140b
- RGB: 11, 20, 11
- HSL: 120.9090909091deg ,37.8155339806%, 6.0588235294%
success-n4
- HEX: #152915
- RGB: 21, 41, 21
- HSL: 120.9090909091deg ,36.7961165049%, 12.1176470588%
success-n3
- HEX: #234424
- RGB: 35, 68, 36
- HSL: 120.9090909091deg ,35.4368932039%, 20.1960784314%
success-n2
- HEX: #315f32
- RGB: 49, 95, 50
- HSL: 120.9090909091deg ,34.0776699029%, 28.2745098039%
success-n1
- HEX: #3c743c
- RGB: 60, 116, 60
- HSL: 120.9090909091deg ,33.0582524272%, 34.3333333333%
success-0
- HEX: #468847
- RGB: 70, 136, 71
- HSL: 120.9090909091deg, 32.0388349515%, 40.3921568627%
success-1
- HEX: #509c51
- RGB: 80, 156, 81
- HSL: 120.9090909091deg ,30.4368932039%, 46.3529411765%
success-2
- HEX: #68b26a
- RGB: 104, 178, 106
- HSL: 120.9090909091deg ,28.0339805825%, 55.2941176471%
success-3
- HEX: #9bcb9b
- RGB: 155, 203, 155
- HSL: 120.9090909091deg ,24.0291262136%, 70.1960784314%
success-4
- HEX: #cde5cd
- RGB: 205, 229, 205
- HSL: 120.9090909091deg ,20.0242718447%, 85.0980392157%
success-5
- HEX: #ebf5eb
- RGB: 235, 245, 235
- HSL: 120.9090909091deg ,17.6213592233%, 94.0392156863%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.success
*/
/*
shade: Color Variations
The Modified versions of the shade color from this theme
Markup:
shade-n5
- HEX: #141414
- RGB: 20, 20, 20
- HSL: 0deg ,9.2561983471%, 7.8823529412%
shade-n4
- HEX: #292828
- RGB: 41, 40, 40
- HSL: 0deg ,7.7685950413%, 15.7647058824%
shade-n3
- HEX: #444242
- RGB: 68, 66, 66
- HSL: 0deg ,5.7851239669%, 26.2745098039%
shade-n2
- HEX: #5f5d5d
- RGB: 95, 93, 93
- HSL: 0deg ,3.8016528926%, 36.7843137255%
shade-n1
- HEX: #737171
- RGB: 115, 113, 113
- HSL: 0deg ,2.3140495868%, 44.6666666667%
shade-0
- HEX: #878585
- RGB: 135, 133, 133
- HSL: 0deg, 0.826446281%, 52.5490196078%
shade-1
- HEX: #939191
- RGB: 147, 145, 145
- HSL: 0deg ,0.7851239669%, 57.2941176471%
shade-2
- HEX: #a5a4a4
- RGB: 165, 164, 164
- HSL: 0deg ,0.7231404959%, 64.4117647059%
shade-3
- HEX: #c3c2c2
- RGB: 195, 194, 194
- HSL: 0deg ,0.6198347107%, 76.2745098039%
shade-4
- HEX: #e1e1e1
- RGB: 225, 225, 225
- HSL: 0deg ,0.5165289256%, 88.137254902%
shade-5
- HEX: #f3f3f3
- RGB: 243, 243, 243
- HSL: 0deg ,0.4545454545%, 95.2549019608%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.shade
*/
/*
warning: Color Variations
The Modified versions of the warning color from this theme
Markup:
warning-n5
- HEX: #1e1201
- RGB: 30, 18, 1
- HSL: 35.1295336788deg ,95.4926108374%, 5.9705882353%
warning-n4
- HEX: #3b2302
- RGB: 59, 35, 2
- HSL: 35.1295336788deg ,95.4187192118%, 11.9411764706%
warning-n3
- HEX: #633b03
- RGB: 99, 59, 3
- HSL: 35.1295336788deg ,95.3201970443%, 19.9019607843%
warning-n2
- HEX: #8b5304
- RGB: 139, 83, 4
- HSL: 35.1295336788deg ,95.2216748768%, 27.862745098%
warning-n1
- HEX: #a86404
- RGB: 168, 100, 4
- HSL: 35.1295336788deg ,95.1477832512%, 33.8333333333%
warning-0
- HEX: #c67605
- RGB: 198, 118, 5
- HSL: 35.1295336788deg, 95.0738916256%, 39.8039215686%
warning-1
- HEX: #e48806
- RGB: 228, 136, 6
- HSL: 35.1295336788deg ,90.3201970443%, 45.8235294118%
warning-2
- HEX: #f99f1e
- RGB: 249, 159, 30
- HSL: 35.1295336788deg ,83.1896551724%, 54.8529411765%
warning-3
- HEX: #fbbf69
- RGB: 251, 191, 105
- HSL: 35.1295336788deg ,71.3054187192%, 69.9019607843%
warning-4
- HEX: #fddfb4
- RGB: 253, 223, 180
- HSL: 35.1295336788deg ,59.421182266%, 84.9509803922%
warning-5
- HEX: #fef2e1
- RGB: 254, 242, 225
- HSL: 35.1295336788deg ,52.2906403941%, 93.9803921569%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.warning
*/
/*
alert: Color Variations
The Modified versions of the alert color from this theme
Markup:
alert-n5
- HEX: #160909
- RGB: 22, 9, 9
- HSL: 1.3043478261deg ,49.3640776699%, 6.0588235294%
alert-n4
- HEX: #2d1211
- RGB: 45, 18, 17
- HSL: 1.3043478261deg ,48.5339805825%, 12.1176470588%
alert-n3
- HEX: #4b1e1d
- RGB: 75, 30, 29
- HSL: 1.3043478261deg ,47.427184466%, 20.1960784314%
alert-n2
- HEX: #682928
- RGB: 104, 41, 40
- HSL: 1.3043478261deg ,46.3203883495%, 28.2745098039%
alert-n1
- HEX: #7f3230
- RGB: 127, 50, 48
- HSL: 1.3043478261deg ,45.4902912621%, 34.3333333333%
alert-0
- HEX: #953b39
- RGB: 149, 59, 57
- HSL: 1.3043478261deg, 44.6601941748%, 40.3921568627%
alert-1
- HEX: #ab4441
- RGB: 171, 68, 65
- HSL: 1.3043478261deg ,42.427184466%, 46.3529411765%
alert-2
- HEX: #c05c5a
- RGB: 192, 92, 90
- HSL: 1.3043478261deg ,39.0776699029%, 55.2941176471%
alert-3
- HEX: #d59391
- RGB: 213, 147, 145
- HSL: 1.3043478261deg ,33.4951456311%, 70.1960784314%
alert-4
- HEX: #eac9c8
- RGB: 234, 201, 200
- HSL: 1.3043478261deg ,27.9126213592%, 85.0980392157%
alert-5
- HEX: #f7e9e9
- RGB: 247, 233, 233
- HSL: 1.3043478261deg ,24.5631067961%, 94.0392156863%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.alert
*/
/*
navigation: Color Variations
The Modified versions of the navigation color from this theme
Markup:
navigation-n5
- HEX: #060d1d
- RGB: 6, 13, 29
- HSL: 221.8791946309deg ,66.514893617%, 6.9117647059%
navigation-n4
- HEX: #0d1a3a
- RGB: 13, 26, 58
- HSL: 221.8791946309deg ,65.9659574468%, 13.8235294118%
navigation-n3
- HEX: #162c60
- RGB: 22, 44, 96
- HSL: 221.8791946309deg ,65.2340425532%, 23.0392156863%
navigation-n2
- HEX: #1e3e86
- RGB: 30, 62, 134
- HSL: 221.8791946309deg ,64.5021276596%, 32.2549019608%
navigation-n1
- HEX: #254ba3
- RGB: 37, 75, 163
- HSL: 221.8791946309deg ,63.9531914894%, 39.1666666667%
navigation-0
- HEX: #2b58c0
- RGB: 43, 88, 192
- HSL: 221.8791946309deg, 63.4042553191%, 46.0784313725%
navigation-1
- HEX: #3564d2
- RGB: 53, 100, 210
- HSL: 221.8791946309deg ,60.2340425532%, 51.4705882353%
navigation-2
- HEX: #567ed9
- RGB: 86, 126, 217
- HSL: 221.8791946309deg ,55.4787234043%, 59.5588235294%
navigation-3
- HEX: #8fa9e6
- RGB: 143, 169, 230
- HSL: 221.8791946309deg ,47.5531914894%, 73.0392156863%
navigation-4
- HEX: #c7d4f2
- RGB: 199, 212, 242
- HSL: 221.8791946309deg ,39.6276595745%, 86.5196078431%
navigation-5
- HEX: #e9eefa
- RGB: 233, 238, 250
- HSL: 221.8791946309deg ,34.8723404255%, 94.6078431373%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.navigation
*/
/*
accent: Color Variations
The Modified versions of the accent color from this theme
Markup:
accent-n5
- HEX: #221101
- RGB: 34, 17, 1
- HSL: 28.6111111111deg ,92.9615384615%, 6.8823529412%
accent-n4
- HEX: #442203
- RGB: 68, 34, 3
- HSL: 28.6111111111deg ,92.8461538462%, 13.7647058824%
accent-n3
- HEX: #713805
- RGB: 113, 56, 5
- HSL: 28.6111111111deg ,92.6923076923%, 22.9411764706%
accent-n2
- HEX: #9e4e06
- RGB: 158, 78, 6
- HSL: 28.6111111111deg ,92.5384615385%, 32.1176470588%
accent-n1
- HEX: #bf5f08
- RGB: 191, 95, 8
- HSL: 28.6111111111deg ,92.4230769231%, 39%
accent-0
- HEX: #e17009
- RGB: 225, 112, 9
- HSL: 28.6111111111deg, 92.3076923077%, 45.8823529412%
accent-1
- HEX: #f57d10
- RGB: 245, 125, 16
- HSL: 28.6111111111deg ,87.6923076923%, 51.2941176471%
accent-2
- HEX: #f79338
- RGB: 247, 147, 56
- HSL: 28.6111111111deg ,80.7692307692%, 59.4117647059%
accent-3
- HEX: #fab77a
- RGB: 250, 183, 122
- HSL: 28.6111111111deg ,69.2307692308%, 72.9411764706%
accent-4
- HEX: #fcdbbd
- RGB: 252, 219, 189
- HSL: 28.6111111111deg ,57.6923076923%, 86.4705882353%
accent-5
- HEX: #fef1e4
- RGB: 254, 241, 228
- HSL: 28.6111111111deg ,50.7692307692%, 94.5882352941%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.accent
*/
/*
info: Color Variations
The Modified versions of the info color from this theme
Markup:
info-n5
- HEX: #191714
- RGB: 25, 23, 20
- HSL: 31.3043478261deg ,18.6666666667%, 8.9117647059%
info-n4
- HEX: #332e28
- RGB: 51, 46, 40
- HSL: 31.3043478261deg ,17.3333333333%, 17.8235294118%
info-n3
- HEX: #544c43
- RGB: 84, 76, 67
- HSL: 31.3043478261deg ,15.5555555556%, 29.7058823529%
info-n2
- HEX: #766b5e
- RGB: 118, 107, 94
- HSL: 31.3043478261deg ,13.7777777778%, 41.5882352941%
info-n1
- HEX: #8f8173
- RGB: 143, 129, 115
- HSL: 31.3043478261deg ,12.4444444444%, 50.5%
info-0
- HEX: #a3988c
- RGB: 163, 152, 140
- HSL: 31.3043478261deg, 11.1111111111%, 59.4117647059%
info-1
- HEX: #aca298
- RGB: 172, 162, 152
- HSL: 31.3043478261deg ,10.5555555556%, 63.4705882353%
info-2
- HEX: #bab2a9
- RGB: 186, 178, 169
- HSL: 31.3043478261deg ,9.7222222222%, 69.5588235294%
info-3
- HEX: #d1ccc6
- RGB: 209, 204, 198
- HSL: 31.3043478261deg ,8.3333333333%, 79.7058823529%
info-4
- HEX: #e8e5e2
- RGB: 232, 229, 226
- HSL: 31.3043478261deg ,6.9444444444%, 89.8529411765%
info-5
- HEX: #f6f5f4
- RGB: 246, 245, 244
- HSL: 31.3043478261deg ,6.1111111111%, 95.9411764706%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.info
*/
/*
highlight: Color Variations
The Modified versions of the highlight color from this theme
Markup:
highlight-n5
- HEX: #2e2303
- RGB: 46, 35, 3
- HSL: 44.4578313253deg ,90.1612903226%, 9.5294117647%
highlight-n4
- HEX: #5c4605
- RGB: 92, 70, 5
- HSL: 44.4578313253deg ,90%, 19.0588235294%
highlight-n3
- HEX: #997409
- RGB: 153, 116, 9
- HSL: 44.4578313253deg ,89.7849462366%, 31.7647058824%
highlight-n2
- HEX: #d7a20c
- RGB: 215, 162, 12
- HSL: 44.4578313253deg ,89.5698924731%, 44.4705882353%
highlight-n1
- HEX: #f2bc21
- RGB: 242, 188, 33
- HSL: 44.4578313253deg ,89.4086021505%, 54%
highlight-0
- HEX: #f5ca4f
- RGB: 245, 202, 79
- HSL: 44.4578313253deg, 89.247311828%, 63.5294117647%
highlight-1
- HEX: #f6cf61
- RGB: 246, 207, 97
- HSL: 44.4578313253deg ,84.7849462366%, 67.1764705882%
highlight-2
- HEX: #f8d77b
- RGB: 248, 215, 123
- HSL: 44.4578313253deg ,78.0913978495%, 72.6470588235%
highlight-3
- HEX: #fae5a7
- RGB: 250, 229, 167
- HSL: 44.4578313253deg ,66.935483871%, 81.7647058824%
highlight-4
- HEX: #fdf2d3
- RGB: 253, 242, 211
- HSL: 44.4578313253deg ,55.7795698925%, 90.8823529412%
highlight-5
- HEX: #fefaed
- RGB: 254, 250, 237
- HSL: 44.4578313253deg ,49.0860215054%, 96.3529411765%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.highlight
*/
/*
acc: Color Variations
The Modified versions of the acc color from this theme
Markup:
acc-n5
- HEX: #000a12
- RGB: 0, 10, 18
- HSL: 206.9491525424deg ,100%, 3.4705882353%
acc-n4
- HEX: #001423
- RGB: 0, 20, 35
- HSL: 206.9491525424deg ,100%, 6.9411764706%
acc-n3
- HEX: #00213b
- RGB: 0, 33, 59
- HSL: 206.9491525424deg ,100%, 11.568627451%
acc-n2
- HEX: #002e53
- RGB: 0, 46, 83
- HSL: 206.9491525424deg ,100%, 16.1960784314%
acc-n1
- HEX: #003764
- RGB: 0, 55, 100
- HSL: 206.9491525424deg ,100%, 19.6666666667%
acc-0
- HEX: #004176
- RGB: 0, 65, 118
- HSL: 206.9491525424deg, 100%, 23.137254902%
acc-1
- HEX: #00579d
- RGB: 0, 87, 157
- HSL: 206.9491525424deg ,95%, 30.8235294118%
acc-2
- HEX: #0077d8
- RGB: 0, 119, 216
- HSL: 206.9491525424deg ,87.5%, 42.3529411765%
acc-3
- HEX: #3ba7ff
- RGB: 59, 167, 255
- HSL: 206.9491525424deg ,75%, 61.568627451%
acc-4
- HEX: #9dd3ff
- RGB: 157, 211, 255
- HSL: 206.9491525424deg ,62.5%, 80.7843137255%
acc-5
- HEX: #d8edff
- RGB: 216, 237, 255
- HSL: 206.9491525424deg ,55%, 92.3137254902%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.acc
*/
/*
Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Weight:0
HideCodeBlock: display_none
Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #015697*/
/* $xd-color_primary-n5: #000d17*/
/* $xd-color_primary-n4: #001a2d*/
/* $xd-color_primary-n3: #012b4c*/
/* $xd-color_primary-n2: #013c6a*/
/* $xd-color_primary-n1: #014980*/
/* $xd-color_primary-1: #016abb*/
/* $xd-color_primary-2: #0289f0*/
/* $xd-color_primary-3: #4db1fe*/
/* $xd-color_primary-4: #a6d8fe*/
/* $xd-color_primary-5: #dbefff*/
/* $xd-color_secondary-0: #009db1*/
/* $xd-color_secondary-n5: #00181b*/
/* $xd-color_secondary-n4: #002f35*/
/* $xd-color_secondary-n3: #004f59*/
/* $xd-color_secondary-n2: #006e7c*/
/* $xd-color_secondary-n1: #008596*/
/* $xd-color_secondary-1: #00bbd2*/
/* $xd-color_secondary-2: #05e3ff*/
/* $xd-color_secondary-3: #59ecff*/
/* $xd-color_secondary-4: #acf6ff*/
/* $xd-color_secondary-5: #defbff*/
/* $xd-color_success-0: #468847*/
/* $xd-color_success-n5: #0b140b*/
/* $xd-color_success-n4: #152915*/
/* $xd-color_success-n3: #234424*/
/* $xd-color_success-n2: #315f32*/
/* $xd-color_success-n1: #3c743c*/
/* $xd-color_success-1: #509c51*/
/* $xd-color_success-2: #68b26a*/
/* $xd-color_success-3: #9bcb9b*/
/* $xd-color_success-4: #cde5cd*/
/* $xd-color_success-5: #ebf5eb*/
/* $xd-color_shade-0: #878585*/
/* $xd-color_shade-n5: #141414*/
/* $xd-color_shade-n4: #292828*/
/* $xd-color_shade-n3: #444242*/
/* $xd-color_shade-n2: #5f5d5d*/
/* $xd-color_shade-n1: #737171*/
/* $xd-color_shade-1: #939191*/
/* $xd-color_shade-2: #a5a4a4*/
/* $xd-color_shade-3: #c3c2c2*/
/* $xd-color_shade-4: #e1e1e1*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #c67605*/
/* $xd-color_warning-n5: #1e1201*/
/* $xd-color_warning-n4: #3b2302*/
/* $xd-color_warning-n3: #633b03*/
/* $xd-color_warning-n2: #8b5304*/
/* $xd-color_warning-n1: #a86404*/
/* $xd-color_warning-1: #e48806*/
/* $xd-color_warning-2: #f99f1e*/
/* $xd-color_warning-3: #fbbf69*/
/* $xd-color_warning-4: #fddfb4*/
/* $xd-color_warning-5: #fef2e1*/
/* $xd-color_alert-0: #953b39*/
/* $xd-color_alert-n5: #160909*/
/* $xd-color_alert-n4: #2d1211*/
/* $xd-color_alert-n3: #4b1e1d*/
/* $xd-color_alert-n2: #682928*/
/* $xd-color_alert-n1: #7f3230*/
/* $xd-color_alert-1: #ab4441*/
/* $xd-color_alert-2: #c05c5a*/
/* $xd-color_alert-3: #d59391*/
/* $xd-color_alert-4: #eac9c8*/
/* $xd-color_alert-5: #f7e9e9*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #e17009*/
/* $xd-color_accent-n5: #221101*/
/* $xd-color_accent-n4: #442203*/
/* $xd-color_accent-n3: #713805*/
/* $xd-color_accent-n2: #9e4e06*/
/* $xd-color_accent-n1: #bf5f08*/
/* $xd-color_accent-1: #f57d10*/
/* $xd-color_accent-2: #f79338*/
/* $xd-color_accent-3: #fab77a*/
/* $xd-color_accent-4: #fcdbbd*/
/* $xd-color_accent-5: #fef1e4*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #f5ca4f*/
/* $xd-color_highlight-n5: #2e2303*/
/* $xd-color_highlight-n4: #5c4605*/
/* $xd-color_highlight-n3: #997409*/
/* $xd-color_highlight-n2: #d7a20c*/
/* $xd-color_highlight-n1: #f2bc21*/
/* $xd-color_highlight-1: #f6cf61*/
/* $xd-color_highlight-2: #f8d77b*/
/* $xd-color_highlight-3: #fae5a7*/
/* $xd-color_highlight-4: #fdf2d3*/
/* $xd-color_highlight-5: #fefaed*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
.font .font--example {
background-image: url(http://basehold.it/i/24);
}
.font .font--name {
color: #000;
}
.font .font--dropcase_2x {
color: #015697;
}
/*
Basic HTML
The Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.
Weight: -100
Styleguide HTML
*/
/*
Reading Typography
Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.
| modifier class | customization | usage |
|---|
.inherit_color | removes all color rules from colored typography and sets it to inherit. | inverting a block of typography where all text and headlines should be white. |
.font-size_up | shifts all typography up one font size step | intro blocks of text where the text. Or in articles where you can shift all text up a size. |
| `.font-size_down` | shifts all typography down one font size step. | citation blocks or boiler plate content where the text should be smaller and less impactful. |
.links_dark | turns all links to the dark color standard. | this is used in junction with the .inherit_color class. |
.links_light | turns all links to the light color standard. | this is used in junction with the .inherit_color class when text is on a dark background. |
* there are further advanced features if you want to apply CSS Property Overrides.
Markup:
This is the primary heading and there should only be one of these per page
sub heading
A small paragraph to emphasis and show important bits.
- This is a list item
- So is this - there could be more
- Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- top level list items
Don't forget Ordered lists:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
A sub heading which is not as important as the first, but is quite imporant overall
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
| Table Heading |
Table Heading |
| table data |
table data |
| table data |
table data |
| table data |
table data |
| table data |
table data |
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
- Definition list
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
This heading plays a relatively small bit part role, if you use it at all
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table of Contents
- How to Prepare for the Boards
- General Principles of Cardiovascular Medicine
- Arrhythmias
- Coronary Artery Disease
- Heart Failure & Cardiomyopathy
- Valvular Disease
- Pericardial Disease
- Congenital Heart Disease
- Vascular Diseases
- Systemic Hypertension and Hypotension
- Pulmonary Circulation Disorders
- Systemic Disorders Affecting the Circulatory
System
-
Miscellaneous
- Cardiovascular Genetics
- CPR, Post-Resuscitation Care
- Cardiac Critical Care
- Sleep Disordered Breathing
- Sports Cardiology
- Pregnancy and Cardiac Disease
- Cardiovascular Operative Management
- Pharmacology
- General Principles of Cardiovascular
Medicine
Weight: -9
HideCodeBlock: display_none
Styleguide HTML.Typography
*/
/*
Reading Typography Modified
This text is used as a lorem content in many of our containers.
.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.
Markup:
{{> Sub.Placeholder.Typography modifier_class=" color_inherit bg_acc c_white p_4 links_light"}}
Weight: -9
HideCodeBlock: display_none
MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50
Styleguide HTML.Typography.Sample
*/
/*
Links States
This shows the look and feel of all the states of a text link, color, underline and decoration.
Markup:
MarkupWrapperClasses: reading-typography
Weight:100
Styleguide HTML.Typography.Links
*/
.container,
.card {
position: relative;
}
.table td,
.table th {
text-align: left;
}
.table tbody tr:nth-of-type(odd) {
background-color: rgba(19, 18, 18, 0.0078431373);
}
.table tr + tr {
border-top: 1px solid rgba(19, 18, 18, 0.2509803922);
}
.table.unshaded tbody tr:nth-of-type(odd) {
background-color: unset;
}
/*
Bootstrap
Bootstrap 5 is a complete UI framework with many features
.
Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items.
Bootstrap| # | First | Last | Handle |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry the Bird | @twitter |
|---|
| # | First | Last | Handle |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry the Bird | @twitter |
|---|
| Class | Heading | Heading |
|---|
| Default | Cell | Cell |
|---|
| Primary | Cell | Cell |
|---|
| Secondary | Cell | Cell |
|---|
| Success | Cell | Cell |
|---|
| alert | Cell | Cell |
|---|
| Warning | Cell | Cell |
|---|
| Info | Cell | Cell |
|---|
| # | First | Last | Handle |
|---|
| 1 | Mark | Otto | @mdo |
|---|
| 2 | Jacob | Thornton | @fat |
|---|
| 3 | Larry the Bird | @twitter |
|---|
-
quaerat odit assumenda
-
delectus sunt optio
-
deserunt quia quasi
Cardiac Syncope Program Launches!
NEW | Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! Find out more!
sint explicabo sequi Earum nihil omnis.
sint explicabo sequi Earum nihil omnis.
Previous
Next
Styleguide Bootstrap.Carousel
*/
.carousel-alt {
position: relative;
max-width: 630px;
margin: 0 auto 16px;
margin: 0 auto 1rem;
background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/subtle_surface.png");
background-repeat: repeat;
}
.carousel-alt:before {
display: block;
width: 100%;
padding-top: 66.6666666667%;
content: "";
}
.carousel-alt > .carousel-inner {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
}
.carousel-alt .carousel-indicators {
top: 0;
right: 0;
bottom: auto;
left: 0;
width: 100%;
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.carousel-alt .carousel-indicators li {
box-sizing: content-box;
width: 12px;
height: 12px;
margin-top: 5px;
margin-bottom: 5px;
overflow: hidden;
border: none;
border-radius: 24px;
text-indent: -9999px;
}
.carousel-alt .carousel-indicators li.active {
border-color: var(--accent);
background-color: var(--accent);
}
.carousel-alt.chevron-on .carousel-indicators li.active:before {
top: 4px;
left: 4px;
padding-top: 5px;
content: "\f054";
color: var(--accent);
font-size: 2.0736em;
}
@media only screen and (width > 768px) {
.carousel-alt.text-indicators {
max-width: 900px;
}
.carousel-alt.text-indicators:before {
padding-top: 46.6666666667%;
}
.carousel-alt.text-indicators .carousel-inner {
width: 70%;
}
.carousel-alt.text-indicators .carousel-inner > .carousel-item {
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel-alt.text-indicators .carousel-inner > .carousel-item:before {
display: inline-block;
/* width: 100%; */
width: 1px;
margin-left: -1px;
padding-top: 66.6666666667%;
content: "";
}
.carousel-alt.text-indicators .carousel-inner > .carousel-item a {
float: left;
}
.carousel-alt.text-indicators a[class^=carousel-control].right {
right: 30%;
}
.carousel-alt.text-indicators .carousel-indicators {
display: flex;
top: 0;
right: 0;
bottom: 0;
left: auto;
flex-direction: column;
width: 30%;
max-width: 300px;
height: 100%;
}
.carousel-alt.text-indicators .carousel-indicators li {
-moz-transition: background-color 0.25s ease-out;
-webkit-transition: background-color 0.25s ease-out;
display: block;
position: relative;
flex: 1 1 20%;
flex-direction: column;
width: auto;
height: auto;
margin: 0;
padding: 0.5rem 1rem;
border: 1px solid hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1);
border-radius: 0;
background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.375), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.75), 1);
font-size: 1.2em;
text-align: left;
text-indent: 0;
transition: background-color 0.25s ease-out;
}
.carousel-alt.text-indicators .carousel-indicators li:first-child {
border-top: 0;
}
.carousel-alt.text-indicators .carousel-indicators li:last-child {
border-bottom: 0;
}
.carousel-alt.text-indicators .carousel-indicators li.active {
padding-right: 10px;
border-right: var(--accent) 10px solid;
background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.015), calc(var(--shade-l) - var(--shade-l) * 0.15), 1);
color: white;
}
}
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20%;
min-width: 48px;
min-width: 3rem;
background-color: rgba(0, 0, 0, 0);
font-size: 1.2em;
text-align: center;
}
@media only screen and (width > 768px) {
.no-controls .carousel-control-prev,
.no-controls .carousel-control-next {
display: none;
}
.carousel-control-prev,
.carousel-control-next {
width: 10%;
}
}
@media only screen and (width > 768px) {
}
@media only screen and (width > 1024px) {
.carousel-control-prev,
.carousel-control-next {
width: 5%;
}
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
outline: 0;
color: var(--accent);
text-decoration: none;
}
.carousel-control-prev .fa,
.carousel-control-next .fa {
display: inline-block;
z-index: 5;
position: absolute;
top: 50%;
margin-top: -10px;
}
.carousel-control-prev .fa {
left: 50%;
margin-left: -10px;
}
.carousel-control-next {
right: 0;
left: auto;
}
.carousel-control-next .fa {
right: 50%;
margin-right: -10px;
}
@media only screen and (width > 768px) {
.carousel-control-prev .fas,
.carousel-control-next .fas {
width: 1.8em;
height: 1.8em;
margin-top: -0.6em;
font-size: 1.8em;
}
.carousel-control-prev .fa {
margin-left: -0.6em;
}
.carousel-control-next .fa {
margin-right: -0.6em;
}
}
.navbar .icon-toggle_bars-times {
--_fa-b: "";
--_fa: "";
}
.navbar .icon-toggle_plus-minus {
--_fa: "";
--_fa-b: "";
}
.navbar .icon-toggle_plus-minus-sub {
--_fa: "";
--_fa-b: "";
}
.navbar {
font-family: var(--font-family_accent);
}
.dropdown-menu {
font-family: var(--font-family_ui);
}
.nav-link {
padding-right: 4px;
padding-right: 0.25rem;
padding-left: 4px;
padding-left: 0.25rem;
}
.navbar-dark .navbar-nav .nav-link {
color: inherit;
}
.navbar-primary .dropdown-toggle:after {
display: none;
}
.navbar-primary .nav-item .nav-link {
color: inherit;
}
.navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
border-top-color: var(--accent);
border-bottom-color: #fff;
background-color: #fff;
color: var(--acc);
}
@media only screen and (width > 768px) {
.navbar-primary .nav-item {
border-top: 0.25rem var(--acc) solid;
border-bottom: 0.25rem var(--acc) solid;
}
.navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {
border-top-color: var(--accent);
border-bottom-color: #fff;
background-color: #fff;
color: var(--acc);
}
}
@media only screen and (width > 1024px) {
.navbar-primary .navbar-nav .nav-item {
border-top: 0.25rem var(--acc) solid;
border-bottom: 0.25rem var(--acc) solid;
}
.navbar-primary .navbar-nav .nav-item .nav-link, .navbar-primary .navbar-nav .nav-item .nav-link:hover, .navbar-primary .navbar-nav .nav-item .nav-link:focus-visible {
color: inherit;
}
.navbar-primary .navbar-nav .nav-item:hover, .navbar-primary .navbar-nav .nav-item:focus-visible {
border-top-color: var(--accent);
border-bottom-color: #fff;
background-color: #fff;
color: var(--acc);
}
.navbar-primary .navbar-nav .nav-item:hover .nav-link, .navbar-primary .navbar-nav .nav-item:hover .nav-link:hover, .navbar-primary .navbar-nav .nav-item:hover .nav-link:focus-visible, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:hover, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:focus-visible {
color: inherit;
}
}
@media only screen and (width > 1024px) {
.collapse.block\:lg {
display: block;
}
}
.dropdown-item {
color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.015), calc(var(--primary-l) - var(--primary-l) * 0.15), 1);
}
.dropdown-item:hover, .dropdown-item:focus-visible {
background-color: var(--accent);
color: white;
}
.dropdown_column {
min-width: 70vw;
}
@media only screen and (width > 768px) {
.dropdown_column {
min-width: 20rem;
}
}
.navbar-primary .navbar-nav .nav-item.active {
border-top-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
border-bottom-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);
color: #fff;
}
.navbar-primary .navbar-nav .nav-item.active .nav-link.active {
color: inherit;
}
.navbar-primary .navbar-nav .nav-item.active:hover {
border-top-color: var(--accent);
color: var(--acc);
}
.accordion .icon-toggle_plus-minus {
--_fa: "";
--_fa-b: "";
}
.dropdown-menu {
left: 0;
min-width: 100%;
border-radius: 0px;
}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active {
background-color: #e17009;
color: rgb(255, 255, 255);
text-decoration: none;
}
.navbar-primary .dropdown-toggle:after {
display: none;
}
.navbar-primary .nav-item:hover {
background-color: transparent;
color: rgb(255, 255, 255);
}
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
color: rgba(19, 18, 18, 0.9);
}
.navbar-light .navbar-nav .nav-link {
color: rgba(19, 18, 18, 0.5);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
color: rgba(19, 18, 18, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(19, 18, 18, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: rgba(19, 18, 18, 0.9);
}
.navbar-light .navbar-toggler {
border-color: rgba(19, 18, 18, 0.1);
color: rgba(19, 18, 18, 0.5);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(19, 18, 18, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
color: rgba(19, 18, 18, 0.5);
}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
color: rgba(19, 18, 18, 0.9);
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: white;
}
.navbar-dark .navbar-toggler {
border-color: rgba(255, 255, 255, 0.1);
color: white;
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text,
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
color: white;
}
.show > i.icon-toggle_plus-minus:before,
.dropdown:hover i.icon-toggle_plus-minus:before,
.accordion i.icon-toggle_plus-minus:before {
content: "\f146";
}
.accordion .collapsed i.icon-toggle_plus-minus:before,i.icon-toggle_plus-minus:before {
content: "\f0fe";
}
.active i.icon-toggle_plus-minus:before,
.active > i.icon-toggle_plus-minus:before {
content: "\f146";
}
@media only screen and (min-width: 480px) {
.navbar-expand-sm .dropdown:hover > .dropdown-menu {
display: block;
}
}
@media only screen and (min-width: 768px) {
.navbar-primary.navbar-expand-md .nav-item {
border-top: 0.25rem #004176 solid;
border-bottom: 0.25rem #004176 solid;
}
.navbar-primary.navbar-expand-md .nav-item:hover {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-md .nav-item:hover .nav-link {
color: #004176;
}
.navbar-primary.navbar-expand-md .nav-item.active {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-md .nav-item.active .nav-link {
color: #004176;
}
.navbar-primary.navbar-expand-md .nav-item.show {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-md .nav-item.show .nav-link {
color: #004176;
}
.navbar-expand-md .dropdown:hover > .dropdown-menu {
display: block;
}
}
@media only screen and (min-width: 1024px) {
.navbar-primary.navbar-expand-lg .nav-item:hover {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-lg .nav-item:hover .nav-link {
color: #004176;
}
.navbar-primary.navbar-expand-lg .nav-item.active {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-lg .nav-item.active .nav-link {
color: #004176;
}
.navbar-primary.navbar-expand-lg .nav-item.show {
border-top-color: #e17009;
border-bottom-color: rgb(255, 255, 255);
background-color: rgb(255, 255, 255);
}
.navbar-primary.navbar-expand-lg .nav-item.show .nav-link {
color: #004176;
}
.navbar-expand-lg .dropdown:hover > .dropdown-menu {
display: block;
}
}
/*
Backend Content Decorators
sfEditor-show - a class for showing items that might be only useful for a backend CMS User.
visible-anonymous-block - decoration for containers that hold content for users not logged in.
visible-authenticated-block - decoration for containers that hold content for users are authenticated.
Markup:
{{modifier_class}}
MarkupWrapperClasses: sfPageEditor
HideCodeBlock: display_none
Weight: 10000
Styleguide Sitefinity.BackEndAuthenticated
*/
.sfPageEditor .visible-anonymous-block, .sfPageEditor .visible-authenticated-block {
display: block !important;
margin: 5px;
border: 2px dotted transparent;
opacity: 0.75;
}
.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before, .sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
display: block;
position: relative;
font-size: 12px;
text-align: center;
}
.sfEditor-show {
display: none;
}
.sfPageEditor .sfEditor-show {
display: block !important;
opacity: 0.5;
}
.sfPageEditor .visible-anonymous-block img,
.sfPageEditor .visible-authenticated-block img {
display: none;
}
.sfPageEditor .visible-authenticated-block {
border-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.125), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.25), 1);
background-color: hsla(var(--accent-h), calc(var(--accent-s) - var(--accent-s) * 0.45), calc(var(--accent-l) + (100% - var(--accent-l)) * 0.9), 1);
}
.sfPageEditor .visible-authenticated-block:after, .sfPageEditor .visible-authenticated-block:before {
content: "AUTHENTICATED CONTENT - Permision/Role/Authenticated";
color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.015), calc(var(--accent-l) - var(--accent-l) * 0.15), 1);
}
.sfPageEditor .visible-anonymous-block {
border-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.125), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.25), 1);
background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.45), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.9), 1);
}
.sfPageEditor .visible-anonymous-block:after, .sfPageEditor .visible-anonymous-block:before {
content: "ANONYMOUS CONTENT - Permision/Role/Anonymous";
color: hsla(var(--highlight-h), calc(var(--highlight-s) + (100% - var(--highlight-s)) * 0.015), calc(var(--highlight-l) - var(--highlight-l) * 0.15), 1);
}
/** SCSS DOC: __globalshame_framework.scss **/
/*# sourceMappingURL=maps/cardiosmart_boot.css.map */
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/* Nav Recipes.00x */
/*
Call to Action Buttons
Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.
Sign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.
Purchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.
Learn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.
Subscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.
Get Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.
Markup:
NOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.
Weight:1000
Styleguide HTML.Inputs.Button.CTA
*/
/*
Buttons
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button
*/
/*
Buttons Small
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.SM
*/
/*
Buttons Large
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.LG
*/
/* Recipes.40 */
.address {
font-style: unset;
}
@media only screen and (min-width: 640px) {
.reverse-indent {
display: inline-block;
width: 100%;
margin-left: 1em;
padding-right: 1em;
text-indent: -1em;
}
.reverse-indent:after {
display: table;
clear: both;
content: "";
}
}
/*
Generic Footer
This defines the web footer.
Markup:
SubComponents:
Sub.Component.Navigation.Footer.Address - Addresses
Sub.Component.Navigation.Footer.Social - Social Links
Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites
Sub.Component.Navigation.Footer.Subfooter - Sub Footer
Sub.Component.Navigation.Footer.Cite - Citation for the Site
Weight: 40
Styleguide Component.Navigation.Footer
*/
/*
Sub Footer
Description: ACC has some basic legal information that should be on every property.
Markup:
Weight: 0
Styleguide Sub.Component.Navigation.Footer.Subfooter
*/
/*
Cite and Copyright
Contains copy right
Markup:
