/**
* The Robertson Partners
*
* Web site redesign
*
* @project 		The Robertson Partners
* @version 		1.0
* @author 		Mike Badgley, iStudio
* @copyright	2009
*
* @colordef 	#373535 Content
* @colordef 	#056ecb Hyperlinks
*/

/**
* Reset
*
* Global reset of all X/HTML elements. This section MUST appear at the top!
*
* @author 	Eric Meyer, meyerweb.com
* @version	1.0 | 20080212
* @see 		http://meyerweb.com/eric/tools/css/reset/
* @section 	reset
* @media 	all
*/
@media all {

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

}


/**
* Core Layout
*
* Basic styling for most X/HTML elements to give a general layout that is
* usable and shared across all devices and browsing platforms.
*
* @section	core
*/
html {
	font-size: 100.01%;
}

body {
	background-color: #fff;
	color: #373535;
	font: normal 13px/17px Arial, Helvetica, sans-serif;
}

a:link,
a:visited,
a:hover,
a:active {
	color: #004b8d;
	text-decoration: underline;
}
a:hover,
a:active {
	text-decoration: none;
}

address, p, hr {
	margin: 17px 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 17px 0;
}
	/* Top-level (primary navigation) heading. */
	h2 {
		color: #004b8d;
		font: normal 27px/29px "Myriad Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		margin: 0 0 17px 0;
	}
	/* Hide the 'normal' text of the links until Cufon has done it's 
	thing (to avoid "flash"). */
	.cufon-loading h2 { visibility: hidden !important; }
    
    h2.highlight {
        color: #373535;
        font-size: 25px;
        line-height: 27px;
    }
	
	h3 {
	    color: #004b8d;
	    font-size: 15px;
	    font-weight: bold;
	    line-height: 17px;
	    margin-bottom: 0;
	}
	
	div.feature h3 {
		color: #004b8d;
		font: normal 20px/22px "Myriad Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
	}

img.align-left {
	float: left;
	margin: 10px 17px 8px 0;
}

blockquote, dl, ol, ul {
	margin: 17px 0 17px 34px;
}
    ol { list-style-type: decimal; }
    ul { list-style-type: disc; }
    ul ul, ol ul, ol ol, ul ol { margin-top: 6px; margin-bottom: 6px; }
    li { margin-bottom: 6px; }


/**
* Page Layout
*
* Define major sections of the template - header, column(s) and footer.
*
* @section	layout
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection Page layout
	*/
	#page {
		margin: 0 auto;
		position: relative;
		width: 940px;
	}


	/**
	* @subsection Header
	*/
	#header {
		background: transparent url(../_images/banners/building_skyline.jpg) no-repeat left bottom;
		margin-bottom: 20px;		
		padding-top: 1px;
		position: relative;
		width: 100%;
	}
		/* Title of the Web site; SEO purposes only. */
		#header h1 {
			position: absolute;
		}

		/* Corporate logo for The Robertson Partners. */
		#header .logo {
			left: 0px;
			position: absolute;
			top: 46px;
		}
			#header .logo,
			#header .logo img {
				display: block;
				text-decoration: none;
			}

		/* Contact number badge. */
		#header div.contact {
			height: 60px;
			position: absolute;
			right: 0;
			top: 41px;			
		}
			.lang-en #header div.contact { background-image: url(../_images/features/speak_with_us_personally_en.gif); width: 221px; }
			.lang-fr #header div.contact { background-image: url(../_images/features/speak_with_us_personally_fr.gif); width: 183px; }

		/* Dynamically-loaded page banner. */
		#header div.banner { 
		    background: transparent url(../_images/banners/about_us.jpg) no-repeat left bottom; 		 
		    height: 315px;   
		    padding-top: 1px;
        }
		#header div.banner-1 { background-image: url(../_images/banners/about_us.jpg); }
		#header div.banner-2 { background-image: url(../_images/banners/our_team.jpg); }
		#header div.banner-3 { background-image: url(../_images/banners/our_approach.jpg); }
		#header div.banner-4 { background-image: url(../_images/banners/our_services.jpg); }
		#header div.banner-5 { background-image: url(../_images/banners/knowledge_and_insight.jpg); }
		#header div.banner-6 { background-image: url(../_images/banners/contact_us.jpg); }
		#header div.banner-9 { background-image: url(../_images/banners/site_map.jpg); }
		
		/* Home page dynamically-loaded banners. */
		#header .rotator { 
		    display: block; 
		    margin-bottom: 40px;
        }


	/**
	* @subsection Content
	*/
	#content {
		display: block;
		float: left;
		margin-bottom: 34px;
		position: relative;
		width: 100%;
	}
		#content div.column {
			display: inline;
			float: left;
			left: 100%;
			position: relative;
		}

		#body {
			margin-left: -914px;
			width: 556px;
		}
        div.one-column-layout #body { width: 888px; }		  

		#sidebar {
			margin-left: -302px;
			width: 302px;
		}


	/**
	* @subsection Calls to Action
	*/
	#calls-to-action {
		clear: both;
		float: left;
		position: relative;
		width: 100%;
	}
		#calls-to-action div.column {
			display: inline;
			float: left;
			left: 100%;
			position: relative;
			width: 301px;
		}


	/**
	* @subsection Footer
	*/

	#footer {
		clear: both;		
		position: relative;
		width: 100%;
	}
		#footer a:link,
		#footer a:visited,
		#footer a:hover,
		#footer a:active {
			color: #373535;
			text-decoration: none;
		}
		#footer a:hover,
		#footer a:active {
			text-decoration: underline;
		}


	/**
	* @section Miscellaneous
	*/

	/**
	* @subsection Skip over navigation
	*/
	#skipper {
		position: absolute;
		text-indent: -9999px;
	}


	/**
	* @subsection Graphical headers
	*/
	.bg {
		background-color: transparent;
		background-position: left top;
		background-repeat: no-repeat;
		display: block;
		overflow: hidden;
		text-decoration: none;
		text-indent: -5000px;
	}


	/**
	* @subsection Float "clearfix"
	*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	/* Hide from IE Mac \*/
	.clearfix {
		display: block;
	}
	/* End hide from IE Mac */

}



/**
* Navigation
*
* Styling for the primary, secondary, etc. navigation is found within this
* section.
*
* @section	navigation
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection Toolbar
	*/
	ul.toolbar {
		margin: 84px 238px 21px 355px;
		text-align: right;
	}
	.lang-fr ul.toolbar { margin-right: 200px; }
		ul.toolbar li {
			background-image: none;
			display: inline;
			margin: 0;
			padding: 0;
		}
			ul.toolbar a:link,
			ul.toolbar a:visited,
			ul.toolbar a:hover,
			ul.toolbar a:active {
				color: #373535;
				margin: 0 6px 0 2px;
				text-decoration: none;
			}
			ul.toolbar a:hover,
			ul.toolbar a:active {
				text-decoration: underline;
			}


	/**
	* @subsection Primary
	*/
	div.primary div.rtsLevel1 {
		background: #065091 url(../_images/layout/primary_navigation_bg.png) no-repeat right top;
		margin: 0;
		width: 100%;
	}
		div.primary div.rtsLevel1 li {
			background-image: none;
			display: inline;
			float: left;
			margin: 0;
			padding: 0;
			text-transform: lowercase;
		}
			div.primary div.rtsLevel1 a.rtsLink {
				background: transparent url(../_images/layout/primary_navigation_bg.png) no-repeat 100% -400px;
				color: #fff;
				display: block;
				font: normal 17px/17px "Myriad Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				height: auto !important;
				height: 17px;
				min-height: 17px;
				min-width: 40px;
				padding: 12px 15px 12px 14px;
				text-align: left;
				text-decoration: none;
				width: auto !important;
				width: 40px;
				white-space: nowrap;
			}
			div.primary div.rtsLevel1 .rtsLast a.rtsLink {
				background-position: 0 -400px;
			}

			div.primary div.rtsLevel1 a.rtsSelected,
			div.primary div.rtsLevel1 a.rtsLink:hover,
			div.primary div.rtsLevel1 a.rtsLink:active {
				background-color: #319cf9;
				background-position: 100% -200px;
				color: #fff;
				display: block;
				font: normal 17px/17px "Myriad Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
				padding: 12px 15px 12px 14px;
				text-decoration: none;
			}
			div.primary div.rtsLevel1 .rtsLast a.rtsSelected,
			div.primary div.rtsLevel1 .rtsLast a.rtsLink:hover,
			div.primary div.rtsLevel1 .rtsLast a.rtsLink:active {
				background-position: 0 -200px;
			}
			
			div.primary div.rtsLevel1 span { padding: 0; }
			
			/* Hide the 'normal' text of the links until Cufon has done it's 
			thing (to avoid "flash"). */
			.cufon-loading div.primary div.rtsLevel1 a.rtsLink { visibility: hidden !important; }
}


	/**
	* @subsection Secondary
	*/
    div.primary div.rtsLevel2 {
        border-top: 1px solid #fff;
        padding: 0;
    }	   
	    div.primary div.rtsLevel2 ul.rtsUL {
		    background: #c2e2fd url(../_images/layout/secondary_navigation_bg.gif) repeat-x left bottom;
            border-bottom: 1px solid #fff;
		    margin: 0;
		    padding: 13px 0 12px 0;
		    width: 100%;
	    }
	        div.primary div.rtsLevel2 li.rtsLI {
		        border-right: 1px solid #003c70;
		        background-image: none;
		        color: #003c70;
		        display: inline;
		        float: left;
		        line-height: 16px;
		        margin: 0 0 0 13px;
		        padding: 0;
	        }
	        div.primary div.rtsLevel2 li.rtsLast { border-right: 0; }

		    div.primary div.rtsLevel2 a.rtsLink {
			    color: #003c70;
			    margin-right: 13px;
			    padding: 0;
			    text-align: left;
			    text-decoration: none;
		    }
		    div.primary div.rtsLevel2 a.rtsLink:hover,
		    div.primary div.rtsLevel2 a.rtsLink:active { text-decoration: underline; }

		    div.primary div.rtsLevel2 a.rtsSelected { font-weight: bold; }
    		
		    div.primary div.rtsLevel2 span { padding: 0; }





/**
* Printer
*
* The follow styles create a printer-friendly layout.
*
* @section	printer
* @media 	print
*/
@media print {



}



/**
* Mobile
*
* The follow styles are applied to mobile devices.
*
* Absolute positioning is an absolute no-no on mobile devices.
* There’s no room to float anything on such a small screen either.
* We need to keep everything in the document flow so that the
* mobile UA sees a one column layout.
*
* Ref: http://nidahas.com/2005/04/04/mobile-css-first-steps/
*
* @section	mobile
* @media	handheld
*/
@media handheld {

	* {
	   background-image: none !important;
	   float: none !important;
	   position: static !important;
	}

}



/**
* Calls to Action
*
* At the bottom of each page sit three (3) calls to action. Each are composed
* of a title, small text-blurb and an associated icon.
*
* @section	calls-to-action
* @media	screen, projection
*/
@media screen, projection {

	#calls-to-action {
		background: transparent url(../_images/layout/call_to_action_bottom_bg.png) no-repeat left bottom;
		margin: 0 0 34px 0;
	}
		#calls-to-action div.column {			
			background: transparent url(../_images/layout/call_to_action_top_bg.png) no-repeat;
			padding: 12px 0 1px 17px;
			width: 284px; /* 301 */
		}

		#calls-to-action div.action1 {
			background-position: 0 0;
			margin-left: -940px;

		}
		#calls-to-action div.action2 {
			background-position: -320px 0;
			margin-left: -620px;

		}
		#calls-to-action div.action3 {		
			background-position: -639px 0;
			margin-left: -301px;

		}

		/* Hide the 'normal' text of the links until Cufon has done it's 
		thing (to avoid "flash"). */
		.cufon-loading #calls-to-action h3 { visibility: hidden !important; }
		
		/* Main "cufon" heading. */
		#calls-to-action h3 {
		    color: #004b8d;
		    font: normal 25px/28px "Myriad Pro", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		    margin: 10px 0 0 0;
	   	    position: relative;
            width: 267px;
		}
		
		#calls-to-action a { color: #1570c0; }
		
		/* Icon/avatars that are associated with the call to action. */
		#action-approach {
		    padding-right: 90px;
		    width: 194px; /* 284 */
		}
		#action-approach img.avatar { bottom: -5px; right: 5px; }
		
        #action-contact {
		    padding-right: 135px;
		    width: 149px; /* 284 */
        }
        #action-contact img.avatar { bottom: -4px; right: -6px; }

        #action-services {
		    padding-right: 80px;
		    width: 204px; /* 284 */
        }
        #action-services img.avatar { bottom: -16px; right: -10px; }

        #action-about {
		    padding-right: 90px;
		    width: 194px; /* 284 */
        }
        #action-about img.avatar { bottom: -6px; right: 8px; }

        #action-team {
		    padding-right: 90px;
		    width: 194px; /* 284 */
        }
        #action-team img.avatar { bottom: -10px; right: -15px; }

        #action-trans-planning {
		    padding-right: 60px;
		    width: 224px; /* 284 */
        }
        #action-trans-planning img.avatar { bottom: -1px; right: -13px; }

        #action-trans-support {
		    padding-right: 74px;
		    width: 210px; /* 284 */
        }
        #action-trans-support img.avatar { bottom: -7px; right: -7px; }

}



/**
* Sidebar Features
*
* Small features that sit within the sidebar column.
*
* @section	sidebar-features
* @media	screen, projection
*/
@media screen, projection {

	div.feature {
		margin-bottom: 20px;
		position: relative;
	}
	
	/* Useful for separating multiple features of the same type. */
	div.feature.keyline {
		background: transparent url(../_images/layout/keyline.gif) repeat-x left bottom;
		padding-bottom: 3px;
	}
	
	/* Feature box that has the same characteristics as a call to action; with the
	exception that it is contained within a blue-colored box rather than gray. */
	#sidebar div.feature.highlight {
		background: transparent url(../_images/layout/call_to_action_blue_bottom_bg.png) no-repeat left bottom;
		margin-bottom: 30px;
	}
		#sidebar div.feature.highlight div.wrapper {
			background: transparent url(../_images/layout/call_to_action_blue_top_bg.png) no-repeat left top;
			color: #fff;
			height: auto !important;
			height: 139px; /* 155 */
			min-height: 139px;
			padding: 15px 0px 1px 19px;
			position: relative;
			width: 283px; /* 302 */
		}

		#sidebar div.feature.highlight h3 {
			color: #fff;
			font-size: 22px;
			line-height: 27px;
		}

		#sidebar div.feature.highlight a { color: #fff; }
		
		/* Sidebar Feature Grey - same as above except grey boxes with dark text */
	    #sidebar div.feature.highlight-grey {
		    background: transparent url(../_images/layout/call_to_action_grey_bottom_bg.png) no-repeat left bottom;
		}
		    #sidebar div.feature.highlight-grey div.wrapper {
			    background: transparent url(../_images/layout/call_to_action_grey_top_bg.png) no-repeat left top;
			    color:#373535;
		    }
            #sidebar div.feature.highlight-grey a { color: #1570c0; }
            #sidebar div.feature.highlight-grey h3 {
			color: #004b8d;
            }

	/* List of downloadable files; normally associated with a small icon. */
	div.feature.download ul {
		list-style-type: none;
		margin-left: 0;
	}
		div.feature.download ul li {
		    overflow: hidden;
		}
		div.feature.download ul li.icon {
			background: transparent no-repeat;
		}
			div.feature.download ul li.icon.pdf {
				background-image: url(../_images/icons/pdf.gif);
				background-position: 1px 0;
				padding-left: 45px;
			}

		/* Detail text following the name of the link; normally the date or file 
		size. */
		div.feature.download span.fileinfo,
		div.feature.download span.date,
		div.feature span.publisher {
			color: #878787;
			display: block;
			font-size: 11px;
		}
	
	div.feature.download a { color: #373535; }

	/* An image assigned to the call-to-action or feature box. The actual 
	positioning  of the image is done on a per-feature/action basis. */
	div.action img.avatar,
	div.feature img.avatar {
		display: block;
		position: absolute;
	}

	/* Hide the 'normal' text of the header until Cufon has done it's thing 
	(to avoid "flash"). */
	.cufon-loading div.feature h3 { visibility: hidden !important; }
	div.feature h3 {
	    margin: 6px 0 -8px 0;
	    position: relative;
	    width: 267px;
	}
	    div.feature h3 a { color: #004B8D; }

	/* Icon that is associated with the title of the feature box. */
	div.feature h3.icon {
		background: transparent no-repeat left top;
	}
		div.feature h3.icon.quote {
			background-image: url(../_images/icons/quote.gif);
			height: auto !important;
			height: 23px;
			min-height: 23px;
			padding: 5px 0 0 35px;
		}
	
	/* Small thumbnail that is associated with an article. */
	div.feature img.thumbnail {
	    float: left;
	    margin: 0 10px 0 0;
	    height: 50px;
	    width: 60px;
	}
	

	/* "More" links that normally sit at the bottom of the feature and have a 
	small arrow bullet to the right of them. */
	div.feature a.more {
		background: transparent url(../_images/icons/arrow_blue_normal.gif) no-repeat 100% 50%;
		padding-right: 22px;
	}
	div.feature a.more:hover { background-image: url(../_images/icons/arrow_blue_hover.gif); }

	div.feature.highlight a.more { background-image: url(../_images/icons/arrow_white_normal.gif); }
	div.feature.highlight a.more:hover { background-image: url(../_images/icons/arrow_white_hover.gif); }

	/* Icon/avatars that are associated with the call to action. */
	#sidebar #feature-services div.wrapper {
	    padding-right: 26px;
	    padding-bottom: 10px;
	    width: 257px; /* 283 */
	}
	#feature-services img.avatar { bottom: -8px; right: -8px; }

	
	/**
	* @subsection Explore Our Services
	*/	
	#sidebar #feature-explore div.wrapper,
	#call-to-action #feature-explore div.wrapper {
	    padding-right: 122px;
	    width: 161px; /* 283 */
	}
	
	#sidebar #feature-explore h3 {
	    font-size: 27px;
	    line-height: 28px;
	    margin-top: 10px;
	    width: 227px;
	}
	
	#feature-explore img.avatar { bottom: -13px; right: -13px; }
	#feature-explore a.bg {
	    height: 26px;
	    margin-top: 30px;
	}
	#feature-explore a.bg:hover { background-position: 0 -26px; }
	    .lang-en #feature-explore a.bg { background-image: url(../_images/buttons/play_animation_e.png); width: 126px; }
	    .lang-fr #feature-explore a.bg { background-image: url(../_images/buttons/play_animation_f.png); width: 141px; }
    
    /* Subscribe */
    #page #feature-subscribe div.wrapper {
        padding-right: 14px;
        width: 270px; /* 283 */
    }
        #feature-subscribe h3 { position: relative; }
            #feature-subscribe h3 a.bg {
                background-image: url(../_images/icons/rss.png);
                height: 17px;
                position: absolute;
                right: 7px;
                top: 6px;
                width: 37px;
            }
                    
        #feature-subscribe input.text {
            border: 1px solid #c4c4c4;
            height: 20px;
            margin-right: 10px;
            vertical-align: top;
            width: 155px;
        }
        .lang-fr #feature-subscribe input.text { width: 145px; }
    
    /* Career Intelligence */
    #feature-career h3 span {
        color: #373535;
        display: block;
        font-size: 16px;
        line-height: 18px;
        margin-top: 5px;
    }
        #feature-career dl {
            margin-left: 0;
        }
            #feature-career dt {
                margin-bottom: 3px;
            }
                #feature-career dt a {
                    color: #373535;
                    font-size: 14px;
                    font-weight: bold;
                }
            #feature-career dd {
                font-size: 12px;
            }


	/**
	* @subsection Directions (Google Maps)
	*/
    #feature-maps h3 {
        background: transparent url(../_images/features/feature_google_maps.gif) no-repeat left top;
        height: auto !important;
        height: 80px;
        min-height: 80px;
        margin-left: -18px;
        padding: 13px 0px 0 149px;
        position: relative;
        width: auto;
    }
        #feature-maps h3 a {            
            text-decoration: none !important;
        }
        
        #feature-maps span.more {
            background: transparent url(../_images/icons/arrow_blue_normal.gif) no-repeat right 5px;
            padding-left: 15px;
            text-indent: -5000px;     
        }
        #feature-maps :hover span.more {
            background-image: url(../_images/icons/arrow_blue_hover.gif);
        }
 
}



/**
* Team Biographies
*
* List mini biography of each team member.
*
* @section	team-bio
* @media	screen, projection
*/
@media screen, projection {

    div.team-bio {
        border-bottom: 1px dotted #004b8d;
        height: auto !important;
        height: 190px;
        min-height: 190px;
        padding: 0 0 1px 145px;
        position: relative;
    }
        div.team-bio h3 {
            color: #1683e2;
            font-size: 20px;
            font-weight: normal;
            line-height: 22px;
            margin-bottom: 0;
        }
        .cufon-loading div.team-bio h3 { visibility: hidden !important; }
        
        div.team-bio img {
            background: transparent url(../_images/layout/mask_team_photo.gif) no-repeat left top;
            display: block;
            height: 161px;
            left: 0;
            padding: 7px;
            position: absolute;
            top: 17px;
            width: 112px;
        }
        
        div.team-bio .backtotop, div.common-questions .backtotop {
            font-size: 11px;
            text-align: right;
			background: transparent url(../_images/icons/arrow_up_normal.gif) no-repeat right center;
			height: auto  !important;
			height: 13px;
			min-height: 13px;
        }
            div.team-bio .backtotop, div.common-questions .backtotop a:link,
            div.team-bio .backtotop, div.common-questions .backtotop a:visited,
            div.team-bio .backtotop, div.common-questions .backtotop a:hover,
            div.team-bio .backtotop, div.common-questions .backtotop a:active {
                padding-right: 20px;
                text-decoration: none;
            }
            div.team-bio .backtotop, div.common-questions .backtotop a:hover,
            div.team-bio .backtotop, div.common-questions .backtotop a:active {
                text-decoration: underline;
            }

}



/**
* Google Maps Overlay
*
* Displays a Google map of the location of the Robertson Partners office within
* an overlay.
*
* @section	overlay-google
* @media	screen, projection
*/
@media screen, projection {

    div.overlay {
        background: #fff;
        border: 1px solid #d1d1d1;
        
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px;
         
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 5px;
        
        display: none;        
        height: auto;
        padding: 25px;
        width: auto;
        z-index: 10000;
    }
        div.overlay .close {
            background: transparent url(../_images/buttons/apple-close.png) no-repeat left top;
            cursor: pointer;
            height: 28px;
            left: -10px;
            position: absolute;
            top: -10px;
            width: 28px;
        }

}