skin.include=skin3_templates

icon.spin=multi,18,{template.imagedir}/sb/ic_loading.png
icon.success={template.imagedir}/success.png
icon.warning={template.imagedir}/warning.png
icon.failure={template.imagedir}/failure.png

template.innerborder.x=3.5rem
template.outerborder.x=2rem
template.textalpha=230
color.links.normal=#006eae
color.links.dark=#003a5c
color.fadedtext=#666666

color.top=#b3c9d5
color.title=#005186
color.line=BLUE.0
color.main=#ecf2f6
color.line2=BLUE.2
 
shell.type=container
shell.width={template.shell.width}
shell.title={remote.pairing.title}
shell.widgets=shell.top,\
              shell.main,\
              shell.bottom

shell.top.type=container
shell.top.color={color.top}
shell.top.attach.top=0,0
shell.top.attach.left=0,0
shell.top.attach.right=100,0
shell.top.widgets=top.logo,top.title,top.title.logo,top.bline

top.logo.type=image,{template.imagedir}/remote_logo.png
top.logo.attach.left=0,{template.padding.line}
top.logo.attach.top=0,{template.padding}
top.logo.attach.bottom=100,-{template.padding}


top.title.type=text,{remote.pairing.title}
top.title.text.size=130%
#top.title.text.style=bold
top.title.text.color={color.title}
top.title.attach.left=
top.title.attach.right=100,-{template.padding.line}
top.title.attach.bottom=100,-{template.padding}

top.bline.type=container
top.bline.color={color.line}
top.bline.height=1
top.bline.attach.left=0,0
top.bline.attach.right=100,0
top.bline.attach.bottom=100,0

shell.main.type=container
shell.main.color={color.main}
shell.main.attach.left=0,0
shell.main.attach.right=100,0
shell.main.attach.bottom=shell.bottom,0
shell.main.attach.top=shell.top,0
shell.main.widgets=main.group

main.group.type=container
main.group.attach.left=0,0
main.group.attach.top=0,{template.padding}
main.group.attach.right=100,0
main.group.attach.bottom=100,-{template.padding.small}
main.group.widgets=pair.subtitle,section.code,section.ftux

pair.subtitle.type=text,{remote.pairing.subtitle}
pair.subtitle.text.size=120%
pair.subtitle.text.color=#005186
pair.subtitle.text.style=bold
pair.subtitle.attach.left=0,{template.outerborder.x}
pair.subtitle.attach.top=0,{template.padding.small}
pair.subtitle.attach.right=100,-{template.outerborder.x}

###

section.ftux.type=container
section.ftux.view=pairing-ftux
section.ftux.widgets=ftux.info
section.ftux.attach.top=pair.subtitle,{template.padding.line}
section.ftux.attach.left=0,0
section.ftux.attach.right=100,0
section.ftux.attach.bottom=100,0

ftux.info.type=image,{template.imagedir}/remote_ftux.png
ftux.info.align=center
ftux.info.attach.top=0,0
ftux.info.attach.left=0,0
ftux.info.attach.right=100,0

###

section.code.type=container
section.code.view=pairing-code
section.code.widgets=pair.title,pair.area.code,pair.status.area,pair.clip,pair.easy,section.qr
section.code.attach.top=pair.subtitle,{template.padding.small}
section.code.attach.left=0,0
section.code.attach.right=100,0

pair.title.type=text,{remote.pairing.instruction2}
pair.title.text.color={color.fadedtext}
pair.title.text.size=110%
pair.title.attach.top=0,30
pair.title.attach.left=0,{template.innerborder.x}
pair.title.attach.right=100,-{template.innerborder.x}

pair.area.code.type=container
pair.area.code.view=code-area
pair.area.code.color=COLOR_INFO_BACKGROUND
pair.area.code.foreground=COLOR_INFO_FOREGROUND
pair.area.code.height=10rem
pair.area.code.attach.left=0,{template.innerborder.x}
pair.area.code.width=20.5rem
#pair.area.code.attach.right=100,-{template.innerborder.x}
pair.area.code.attach.top=pair.title,1.5rem

pair.clip.type=text,{remote.pairing.functions}
pair.clip.view=pair-clipboard
pair.clip.align=center
pair.clip.text.urlcolor={color.links.normal}
pair.clip.text.urlcolor-pressed={color.links.dark}
pair.clip.attach.left=pair.area.code,0,left
pair.clip.attach.right=pair.area.code,0,right
pair.clip.attach.top=pair.area.code,{template.padding}

pair.status.area.type=container
pair.status.area.color=#FFFFFF
pair.status.area.widgets=pair.status,pair.status.image
# force height so we can show 2 lines (in most cases)
pair.status.area.height=2rem
pair.status.area.attach.top=pair.clip,{template.padding}
pair.status.area.attach.left=0,{template.innerborder.x}
pair.status.area.attach.right=100,-{template.innerborder.x}

pair.status.image.type=image,foo
#pair.status.image.align=center
pair.status.image.view=status-image
pair.status.image.attach.left=0,3
pair.status.image.attach.top=0,1
pair.status.image.attach.bottom=100,-1

pair.status.type=text,{pairing.status.initialising}
pair.status.view=status-text
#pair.status.text.color={color.fadedtext}
pair.status.text.urlcolor={color.links.normal}
pair.status.text.size=16px
pair.status.text.size._mac=13px
#pair.status.align=center
pair.status.attach.top=pair.status.image,0,center
pair.status.attach.left=pair.status.image,3
pair.status.attach.right=100,0
pair.status.attach.bottom=100,0

pair.easy.type=container
#pair.easy.color=#d3e0e8
pair.easy.attach.top=pair.status.area,{template.padding}
pair.easy.attach.bottom=100,-{template.padding}
pair.easy.attach.left=0,{template.innerborder.x}
pair.easy.attach.right=100,-{template.innerborder.x}
pair.easy.widgets=pair.easy.1,pair.easy.2

pair.easy.1.type=text,{remote.pairing.tip.title}
pair.easy.1.text.style=bold
pair.easy.1.text.size=90%
pair.easy.1.attach.left=0,{template.padding}
pair.easy.1.attach.right=100,-{template.padding}
pair.easy.1.attach.top=0,{template.padding}

pair.easy.2.type=text,{remote.pairing.tip.text}
pair.easy.2.text.color={color.fadedtext}
pair.easy.2.text.urlcolor={color.links.normal}
pair.easy.2.text.size=90%
pair.easy.2.attach.left=0,{template.padding}
pair.easy.2.attach.right=100,-{template.padding}
pair.easy.2.attach.top=pair.easy.1,{template.padding.small}
pair.easy.2.attach.bottom=100,-{template.padding}

###

section.qr.type=image
section.qr.view=pairing-qr
section.qr.drawmode=center
section.qr.align=right
section.qr.attach.top=pair.area.code,0,top
section.qr.attach.left=pair.area.code,{template.padding}
section.qr.attach.right=100,-{template.innerborder.x}
section.qr.attach.bottom=pair.clip,0,bottom

###


shell.bottom.type=container
shell.bottom.widgets=bottom.area.install,bottom.area.code
shell.bottom.color=#FFFFFF
shell.bottom.attach.top=
shell.bottom.attach.bottom=100,0
shell.bottom.attach.left=0,0
shell.bottom.attach.right=100,0

bottom.area.line.type=container
bottom.area.line.height=1
bottom.area.line.color={color.line2}
bottom.area.line.attach.left=0,0
bottom.area.line.attach.right=100,0
bottom.area.line.attach.top=0,0

bottom.area.code.type=container
bottom.area.code.widgets=bottom.area.learnmore2
bottom.area.code.color={color.main}
bottom.area.code.view=reset-pair-area
bottom.area.code.attach.top=0,0
bottom.area.code.attach.bottom=100,0
bottom.area.code.attach.left=0,0
bottom.area.code.attach.right=100,0

bottom.area.learnmore.type=text,{remote.pairing.learnmore}
bottom.area.learnmore.v-align=center
bottom.area.learnmore.text.size=80%
bottom.area.learnmore.view=learn-more
bottom.area.learnmore.text.urlcolor={color.links.normal}
bottom.area.learnmore.attach.top=0,1
bottom.area.learnmore.attach.bottom=100,0
bottom.area.learnmore.attach.left=0,{template.padding}

bottom.area.learnmore2.type=text,{remote.pairing.learnmore}
bottom.area.learnmore2.text.size=80%
bottom.area.learnmore2.v-align=center
bottom.area.learnmore2.text.urlcolor={color.links.normal}
bottom.area.learnmore2.attach.top=0,1
bottom.area.learnmore2.attach.bottom=100,0
bottom.area.learnmore2.attach.left=0,{template.padding}

bottom.area.install.type=container
bottom.area.install.view=pair-install-area
bottom.area.install.widgets=bottom.install,bottom.turnon,bottom.area.line,bottom.area.learnmore
bottom.area.install.attach.top=0,0
bottom.area.install.attach.bottom=100,0
bottom.area.install.attach.left=0,0
bottom.area.install.attach.right=100,0

bottom.install.type=container
bottom.install.view=pairing-install
bottom.install.attach.left=bottom.area.learnmore,{template.padding.line}
bottom.install.attach.right=bottom.turnon,-{template.padding.line}
bottom.install.attach.top=bottom.turnon,0,top
bottom.install.attach.bottom=bottom.turnon,0,bottom

bottom.turnon.type=button
bottom.turnon.text={Button.next}
bottom.turnon.view=enable-pairing
bottom.turnon.attach.left=
bottom.turnon.attach.right=100,-{template.padding.line}
bottom.turnon.attach.top=0,{template.padding.small}
bottom.turnon.attach.bottom=100,-{template.padding.small}